ブログの見出しデザインまとめとCSSカスタマイズで参考にしたサイト

この記事は、

  • ブログの見出しをカスタマイズしたい
  • 具体的なCSSを見たい
  • CSSをコピペして自分なりにカスタマイズしたい
  • 見出しの装飾とCSSを照らしあわせて参考にしたい
  • 見出しデザインに参考になるサイトが知りたい

という、ブログの見出しを何とかしたい!という人の参考になるかと思って自分が見出しを設定した時に参考にしたサイトや実際のCSSのタグをまとめてみました。

ちなみにこのブログは現在WordPressの無料テーマSimplicityを利用して子テーマのCSSファイル(style.cssとmobile.css)を編集しています。Simplicityを導入している人ならちょっとは頭に入りやすいかも。

スポンサーリンク

 見出しデザイン完成品の見た目

まず先に設定した見出しを画像で貼り付けておきます。(今後変更する可能性もあるため画像にしています)

パソコンの見出し

ブログの見出し

パソコンでは左右の余白が十分にあることからインデントも利用しながら上記の画像のように設定しました。

  • h2見出し(背景色無し、下線、マークあり)
  • h3見出し(背景色あり)
  • h4見出し(背景色無し、下線、マークあり)

というふうになっています。

各要素別に見ると、

  • 背景色(無し→あり→無し)
  • 左側マーク(あり→無し→あり)
  • インデント(徐々に右へ)

というふうに見出しの階層が変わるごとに交互に違いをつけることによって階層が切り替わった時に分かりやすくなるんじゃないかと考えました。

スマホの見出し

iPhoneで見た見出しの見た目

スマホの見出しにパソコンと同じフォントサイズを使うと大きくて邪魔になるので小さめにしました。そのぶん左側のマーク・背景色・太字・下線で見出しということが分かるようにしています。

でもインデントに関してはスマホだと横幅が狭いので調節ができずにh2見出しが右側に入り込んで見分けが付きにくくなってしまいました。

スマホのCSSもこだわっていたら時間がいくらあっても足りなさそうだったので妥協しています。今後の課題です。

見出しデザインを考える時に参考にしたサイト

さてここからは自分がどんな見出しデザインにしようか考えた時に参考にさせてもらったサイトの紹介です。

こう書くとあっさり紹介が終わりますけど何時間も何時間も何時間もかかってます。

まわり道・寄り道も知識が深まるので良いことではありますけどまぁ大変でした(汗)

見出しのCSSについて充実したまとめ

Simplicity作者のわいひらさんが見出しのCSSについて参考になるサイトをまとめてくれています。

参考:少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ|寝ログ

この記事のリンクを辿りながらいろいろな見出しのデザインを見て回りました。

オシャレな見出しやかっこいい見出し、吹き出しとか具体例は豊富だし他にも見た目を確認しながらCSSを作成できる見出しジェネレーターなども紹介されています。

各見出しで採用したデザイン

続いてh2見出しからh4見出しまでそれぞれで参考にさせていただいたブログの紹介です。

h2見出し

参考:【CSS】先頭に四角形が入った見出しのデザインを真似してみました | キノめも(ドメインが失効していました)

h2見出し左側のマークを付けるためのCSSをパク・・参考にさせてもらいました。

h3見出し

参考:初心者ブロガー指南:Naifix

背景色の見出しとしてシンプルで立体感があって落ち着いたNaifixさんのデザインを参考にさせてもらい自分のブログに合わせてフォントサイズ・余白(padding・margin)・シャドウの大きさなどを微調整しました。

カスタマイズはしましたがほとんどパク・・・参考にさせていただきました(汗)

h4見出し

参考:CSSで作る見出しデザイン | Web’Notes

この中で紹介されているチェックマークのデザインを参考にさせてもらいました。これも擬似要素・擬似クラスを使っています。色を変えたくらいで形は元のまま使わせてもらってます。

さて次はいよいよ見出しに使ったCSSの中身を見ていきます。

見出しタグの中身

ここからお待ちかね、実際に設定した見出しタグの中身を載せています。自分もパクりまくっているし結局は自分のブログに合わせて組み合わせることになるから大いに参考にしていただけると幸いです。

Simplicityではstyle.cssに書かれたタグはパソコンとスマホ両方に適用されます。スマホ独自のCSSを設定する場合はmobile.cssをカスタマイズします(後述)。

h2見出しのタグ

h2見出し
↑この画像はパソコンで見たら原寸大です。後々見出しのCSSを変更するかもしれないので記録のためにキャプチャを画像として一緒に載せておきます。

h2見出しは擬似要素・擬似クラスでふたつの四角が重なり合ってる?らしいです。CSSでもこんなことができるとは知りませんでした。

h3見出しのタグ

h3見出し

h3見出しは背景色や下線がほとんどなのでシンプルなCSSで分かりやすいですね。

h4見出しのタグ

h4見出し

h4見出しは一見シンプルなマークなのに驚くほど長いCSSタグ!

スマホ用のCSS

SimplicityがCSSを読み込む順番はstyle.cssの後でmobile.cssが上書きされるようになっていてmobile.cssの設定はスマホやタブレットなどのモバイル端末にだけ適用されるCSSとなっています。

  1. Simplicity(親テーマ)のstyle.css
  2. 子テーマのstyle.css
  3. スキンのstyle.css
  4. Simplicity(親テーマ)のmobile.css
  5. 子テーマのmobile.css
  6. スキンのmobile.css
  7. テーマカスタマイザーで変更したスタイル

via:Simplicityのスキン機能の仕様

パソコン用に調整したCSSでそのままスマホ表示を確認するとフォントサイズが大きすぎたりいかにもバランスが悪いのでmobile.cssに追記していろいろ微調整しました。

モバイル用のCSS(mobile.css)は先程の全体のCSS(style.css)の後に読み込まれてスタイルが上書きされるようになっています。

ほとんどの設定は最初のstyle.cssと同じでmobile.cssに書くのは上書き部分だけなのでh2からh4見出しのCSSをすべてここに書きます。

主にフォントサイズを小さくしたりそれに伴ってずれた余白を微調整しています。

「AmazonJS」のh4見出しを修正

WordPressでAmazon商品を紹介する時に便利なプラグイン「AmazonJS」ですがこの商品タイトルにはh4タグが使われていて.article h4のCSSが適用されてしまい商品名の部分がおかしくなってしまうので修正します。

h4見出しとAmazonJSのCSS重複

Chromeのデベロッパーツールを頼りになんとかAmazonJSのh4見出し部分にだけ下線やマークを非表示にしました。以下がそのCSSタグです。style.cssに追記します。

いろいろnoneを使って非表示にしていますがこれはそれぞれ設定している内容によって何をnoneにするのか変わってきます。

上記コードは僕が設定したh4見出しに対応した内容なので自分の設定しているh4見出しのCSSを見ながらいじってください。

CSSタグはパクりまくり

ゼロからCSSをゴリゴリ書くことができないので見出しの見た目とCSSが載っているサイトを参考にさせてもらって、それらしき数値の部分を変更してちょっとずつちょっとずつ整えていきました。

なのでこの記事ではパクられるの覚悟で参考になると思い見た目のキャプチャとCSSのタグを一緒に載せています。

でもたぶんブログによって見出しの最適なバランスはそれぞれ違うと思うのでオリジナルの見出しCSSを書く場合はぜひ他のサイトもいろいろ見て回って自分のデザインを決めて欲しいなと思います。

ほとんどのサイトではCSSのコードをわざわざブログ記事に書いていることは無いので基本的には気になるデザインがあったらChromeの「デベロッパーツール」を使って調べています。

Ctrl+Shift+C でタグを調べるモードになるのでマウスのクリックで調べてみてください。クリックした場所のHTMLやCSSが見られますよ。

見出しのデザインセンスが無ければ愚直に・・・

こんなことだろうと思ったけど段落とかと一緒で結局見出しも奥が深かったです。自分はゼロから生み出すデザインセンスに自信が無いので極力シンプルなものを組合わせて使うことがほとんどです。

色んな色を使ったりして冒険したデザインが使える人ってすごいなぁと思います。まぁでも見出しデザインのために色々なブログを見ているとそれ以外にも勉強になることが多くて面白いですけどね。

見出しデザインで目を惹かれたブログ

最後に、見出しデザインを参考にするためにブログをいろいろ見ていて印象に残ったサイトを紹介しておきます。

日常ぴよぴよ

参考:日常ぴよぴよ

h2見出しの色が非常に目立って見やすいと感じたブログでした。後から思ったけどひよこの黄色とか背景の木目の薄黄色と青系統の色は補色の関係で目立つのかなぁと思ったり。

YATのBLOG

参考:YATのBLOG

見出しタグの下に必ずと言っていいほど大きな画像を貼って見出しとして目立たせている方法でした。

ウェビメモ

参考:ウェビメモ

自分から見れば大冒険しまくりのデザインで「すごいなーすごいなー」と思いながら眺めていたブログです。背景色の有り無しや見出し左側のマークがハッキリしていてヒントをもらえました。

・・・

その後の見出し変更

この記事を書いている時はまだまだブログのデザインが定まっていないので何回か見出しのデザインも変更しました。

見出しデザインその2

見出しデザインその3

スポンサーリンク

このページのシェア・保存はこちら

『ブログの見出しデザインまとめとCSSカスタマイズで参考にしたサイト』へのコメント

  1. 名前:ささ 投稿日:2016/05/08(日) 07:00:15 ID:1876095d1 返信

    AmazonJSの見出しh4修正について、そのまま同じ症状でとても参考になりました。いつもなら2,3時間かけてテキストを検索するのですがあっという間に解決です(´Д`)!ありがとうございましたm(_ _)m

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。