商品紹介やまとめ記事を、見やすい形にすぐ整えたい人向けのHTMLです。

下にあるHTMLをそのままコピペすれば使えます。
Google Bloggerなら、Googleアカウントがあればすぐにブログを作って試せます。
WordPressでも使えますが、まずはBloggerのほうが手軽です。

このページの見方

• 上は完成見本です
• 下はコピペ用HTMLです
• 変えるのはタイトル・本文・ボタン文字・リンク先だけです

完成見本

これだけHTMLを使えば読みやすい記事になる！

コピペして、文章を少し変えるだけ

この記事では、商品やサービスの良さをわかりやすく伝えるための形を、すぐ使えるHTMLでまとめています。文章は自分で書いて、見た目だけ先に整えたい人にぴったりです。

この記事で伝えたいこと

読みやすい記事は、内容だけでなく見せ方も大事です。このHTMLを使えば、見出しやポイント、まとめやボタンまで一気に整えられます。

おすすめポイント3つ

1. 形が最初から整っている

見出し、説明、ポイント、まとめ、ボタンまで入っているので、ゼロから考えなくて済みます。

2. コピペ後すぐ使える

HTMLが苦手でも大丈夫です。必要なところだけ自分の言葉に変えれば、すぐ記事として使えます。

3. 見た目の変化がすぐわかる

文章だけの記事より、ぐっと読みやすくなります。見た瞬間に「変わった」とわかるのが強みです。

こんなときに便利

• 商品紹介の記事を書きたいとき
• おすすめ記事を見やすくまとめたいとき
• 普通の記事を少しオシャレにしたいとき

まとめ

記事を読みやすくしたいなら、まず形を整えるのが早いです。このHTMLは、その最初の一歩をすぐ始めやすくするための素材です。

くわしく見る

気になる方は、上のボタンからチェックしてみてください。

コピペ用HTML

下のHTMLをそのままコピーして使えます。
タイトル・本文・ボタン文字・リンク先だけ自分用に変えてください。

<div style="max-width:760px; margin:24px auto; line-height:1.9; color:#222;"> <h1 style="font-size:1.9em; line-height:1.4; margin:0 0 16px; padding:0 0 12px; border-bottom:3px solid #e74c3c;"> ここにタイトルを書く </h1> <div style="background:#fff8f6; border:1px solid #f3c7bf; border-radius:12px; padding:18px; margin:0 0 24px;"> <p style="margin:0 0 10px; font-weight:bold; color:#c0392b;"> 最初にひとことを書く </p> <p style="margin:0;"> ここに短い説明を書く。この記事では、商品やサービスの良さをわかりやすく伝える。 </p> </div> <h2 style="font-size:1.35em; margin:32px 0 12px; padding-left:10px; border-left:6px solid #e74c3c;"> この記事で伝えたいこと </h2> <p style="margin:0 0 20px;"> ここに本文を書く。この商品はどんな人に合うのか、何が良いのかを先にわかりやすく伝える。 </p> <h2 style="font-size:1.35em; margin:32px 0 12px; padding-left:10px; border-left:6px solid #e74c3c;"> おすすめポイント3つ </h2> <div style="border:1px solid #eee; border-radius:12px; padding:16px; margin:0 0 14px; background:#ffffff;"> <p style="margin:0 0 8px; font-weight:bold; color:#c0392b;">1. ポイント1の見出し</p> <p style="margin:0;">ここにポイント1の説明を書く。</p> </div> <div style="border:1px solid #eee; border-radius:12px; padding:16px; margin:0 0 14px; background:#ffffff;"> <p style="margin:0 0 8px; font-weight:bold; color:#c0392b;">2. ポイント2の見出し</p> <p style="margin:0;">ここにポイント2の説明を書く。</p> </div> <div style="border:1px solid #eee; border-radius:12px; padding:16px; margin:0 0 24px; background:#ffffff;"> <p style="margin:0 0 8px; font-weight:bold; color:#c0392b;">3. ポイント3の見出し</p> <p style="margin:0;">ここにポイント3の説明を書く。</p> </div> <h2 style="font-size:1.35em; margin:32px 0 12px; padding-left:10px; border-left:6px solid #e74c3c;"> こんなときに便利 </h2> <ul style="margin:0 0 24px; padding-left:20px;"> <li>ここに1つ目を書く</li> <li>ここに2つ目を書く</li> <li>ここに3つ目を書く</li> </ul> <h2 style="font-size:1.35em; margin:32px 0 12px; padding-left:10px; border-left:6px solid #e74c3c;"> まとめ </h2> <div style="background:#f9f9f9; border-radius:12px; padding:18px; margin:0 0 24px;"> <p style="margin:0;"> ここに最後のまとめを書く。短く言い切ると読みやすい。 </p> </div> <div style="text-align:center; margin:28px 0 8px;"> <a href="#" style="display:inline-block; background:#e74c3c; color:#fff; text-decoration:none; padding:14px 24px; border-radius:999px; font-weight:bold; font-size:1em;"> くわしく見る </a> </div> <p style="text-align:center; font-size:0.95em; color:#666; margin:10px 0 0;"> 気になる方は、上のボタンからチェックしてみてください。 </p> </div>

変える場所

• タイトル
• 本文
• ボタン文字
• リンク先