読みやすいブログデザインを目指すなら、余白と配色がポイントです。 以下の記事でブログ記事本文の横幅と左右の余白に関して解説しています。 これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開 本記事は横ではなく縦の余白に着目してみたいと思います。つまり、1 行目と 2 行目の行間、段落ごとの余白ですね。 加えて、余白に深く関わってくる文字のサイズや色をどのようにすれば読みやすくなるのか、サンプルと合わせてご覧ください。 余白が必要な理由 ブログ記事は小説と違い、読者が一字一句逃さないよう読むことはほとんどありません。 よほど文才があってぐいぐい引き込まれる記事、または惚れこんでいるブログなら別ですが、たいていはざっと流し読みしていきます。 そのうえで、自分に必要な情報があると判断したらもう一度読み直したり、あとで読み返すためにブックマークやシェアといった行動に移ってくれます。

スマホから、ブログを見ている皆様……。このブログ、見づらくないですか？ こんにちは、赤ペソ先生（@spinf60 ）です。 ※この記事を書いた後に、もっといい方法を見つけました♪ こちらの記事の方をおすすめします↓ ライブドアブログはスマホのデザインがいじれない？ わたしが書いているこのブログはライブドアブログというブログサービスを利用しています。 ライブドアブログのPC版では、カスタマイズという項目があり、CSS（スタイルシート）というものを設定して、見出しの色を変えたりすることが可能です。 かなり自由にデザインをいじることが出来ます。 ブログのデザイン設定で、カスタマイズ→CSSで変更可能です。

2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ 知らなきゃ損！いつでもAmazonで90%オフの商品を探す方法！ はじめに 完成系 まずはCSSをコピペしよう！ ブログでの使い方 簡単解説（飛ばして良し！） まとめ 【追記】この記事のCSSをもとにさらに手を加えてくれた素敵な記事があるので紹介します！ありがたい。 こんな記事も書いてるよん。 はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれている

フォントサイズと行間を綺麗に整えることで、グッと文字が読みやすくなります。サイト訪問者が「読みやすいサイト」にするために、CSS初心者の方になるべく簡単に解説していきます。 文字の読みやすさって本当に大事です。面白そうな記事を読みだしても、なんだかゴチャゴチャしているから最後まで読むのを止めちゃうことって経験があると思います。 色々と難しいカスタムしていても、文字の調整を忘れちゃってる方も多いはず。 ということで僕自信も今一度『文字』について見なおしてみました。カスタム方法は最後にまとめて書くので、目を通して見て下さいー！ 段落の余白について テキストを入力していくときは基本＜p＞タグを多用していると思います。＜p＞タグは段落を作るタグなので、ここで言う『余白』とは段落の文字と文字の間の余白のことを言います。 悪い例① メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

見出しジェネレーター 外観や色を選んでCSSを生成するジェネレータータイプ。 CSS見出しジェネレーター CSS見出し-ジェネレーター | WEB道 吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するジェネレータ。 見出しメーカー 好きな色でCSS見出しが作れます | スタイルシート見出しメーカー 好きな色を選んでボタンを押すだけでシンプルな見出しが作れる見出しメーカー。 見出しサンプル集 見出しデザインと、HTML・CSSがセットになったデモサンプル集。 CSS見出しデザインのアイデア9個 H1一つでここまで出来るCSS見出しデザインのアイデア9個 切り取り線、テープ、リボン、吹き出し、アメリカンな吹き出し、付箋、メタルプレート、モザイク、旗、のような見出しをCSSのみで実現しています。ポイント解説などもあってわかりやすいです。 CSSのみで