ただの文章を見やすい箱にする方法｜初心者向けHTML見本

「ただ文章を書くだけだと、少し見にくいな」と感じることがあります。
今回は、普通の文章を見やすい箱にすると、どう変わるかを見本でまとめました。

ビフォー

まずは、ふつうの文章です。

▼ 前はこう

無料テンプレはこちらです。使いたい方は下を見てください。

アフター

同じ内容を、箱に入れるとこうなります。

▼ 後はこう
無料テンプレはこちら
使いたい方は下を見てください。

どう変わったの？

  • 前：ただの文章
  • 後：箱に入って、少し目立つ
  • 前より「ここが大事」と伝わりやすい
  • 初心者でも見た目の変化がわかりやすい

使うコード

下のコードをコピーして使えます。

▼ コピーするコード

下の灰色の中を、そのままコピーしてください。

使い方

  1. 上の「アフター」の見た目を確認する
  2. 下の「使うコード」をコピーする
  3. BloggerのHTMLモードに貼る
  4. 文字だけ自分の記事に合わせて変える

まとめ

今回は、ただの文章を見やすい箱にしてみました。
大きく難しいことはしていませんが、前より少し見やすくなります。
初心者向けなら、まずはこういう見た瞬間に違いがわかる形から始めるのが分かりやすいです。

コメント

コメントを投稿

このブログの人気の投稿

テンプレ一覧

このブログでできること 「ブログの崩れ」「CTAの置き方」「見やすさ」を、コピペで整えるテンプレをまとめています。 まずは“貼って使える形”を優先して、短く分かりやすく公開します。 現在の動作確認：Google Blogger（HTMLモード）／他サービスは順次対応（状況により変更あり） 無料テンプレ 無料配布 販売テンプレ 販売テンプレはストアにまとめます。 ストア（BOOTH）→ Web整備室｜テンプレ（BOOTH） ※ダウンロードにはBOOTH（pixiv）へのログインが必要です。 使い方 使いたいテンプレを選んで、HTMLをコピーします。 編集画面で「HTML表示」に切り替えて貼り付けます。 プレビューで崩れがないか確認して、公開します。 FAQ Q1. 貼ったのに見た目が違います テーマや画面幅で見え方が変わることがあります。まずプレビューで確認してください。 Q2. どこに貼ればいいですか？ 基本は記事本文の「HTML表示」です。テンプレによっては「レイアウト（ガジェット）」側に入れる場合もあります。 Q3. 広告やアフィリエイトはありますか？ 当ブログはアフィリエイト／広告を含む場合があります。リンク先の内容は各販売元の表示をご確認ください。 最後に：リンク集 S01：導線セット（BOOTH）→ 商品ページはこちら もしリンクが開けない場合は、BOOTHの「ショップへのお問い合わせ」から連絡ください。 ブログ名：【WEB整備/テンプレ】
続きを読む

比較記事テンプレ 基本編とは？まずはこの形で十分な理由

比較記事を書くとき、いきなりいろいろ足したくなることがあります。 でも、最初から比較表やFAQまで入れようとすると、かえって読みにくくなることがあります。 そこで使いやすいのが、 比較記事テンプレ 基本編 です。 これは、比較記事をわかりやすく始めるための、やさしい土台です。 実際の基本編テンプレも見たい方はこちら → 比較記事テンプレ 基本編 「まず何を書けばいいのか」 「どこをそろえれば見やすいのか」 そこをシンプルに整えるために作りました。 この記事では、この 基本編がどんな役目のテンプレなのか を、初心者にもわかりやすく説明します。 比較記事テンプレ 基本編は、はじめの形を作るためのテンプレです 比較記事は、ただ商品を並べればいいわけではありません。 読む人はまず、 「今日は何をくらべる記事なのか」 を知りたいです。 その次に、 「どこが違うのか」 を知りたくなります。 基本編は、この流れを見やすくするためのテンプレです。 いきなりたくさんの機能を入れるのではなく、まずは 記事の形を整えること を大事にしています。 いきなり全部入れないほうが、かえってわかりやすいです 比較記事というと、比較表や質問コーナーを思い浮かべる人もいるかもしれません。 もちろん、それが役立つ場面もあります。 でも、最初の段階では、そこまで入れなくても大丈夫です。 むしろ、先に入れすぎると、読む人がどこを見ればいいのか迷いやすくなります。 基本編で大事にしていること 何を比べるのか どんな違いがあるのか どんな人に合いそうか まずはこの3つが追いやすいだけでも、記事はかなり読みやすくなります。 このテンプレは、初心者に向いています ...
続きを読む