インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

ブログの見出しデザインを制覇せよ!CSS貼り付けだけの簡単素材で記事を彩る

  2015/12/07   あとで読む

約 7 分で読めます

corridor-598319_1280

ブログデザインの中でも大きな要素を占めるものの1つが「見出し」。

トップページや個々の記事、またサイドバーなど、ブログのいたるところで使われるものですね。

見出しはテーマごとにいろいろとデザインがされていて、テーマの特徴がとてもよく出るものですが、そうであるからこそ逆に人気のテーマでは「あ、これはあのテーマ使ってるな」と見出しのデザインからすぐ分かり、他のブログと見栄えが代わり映えしなくなることからデザインの差別化も必要となって来ます。

ここではそんな重要な位置づけである見出し用のデザインで、特徴があり過ぎず、すぐにブログに馴染んで使用できるものを紹介と、CSSの簡単貼り付け(コピペ)で利用する使い方の解説です。

ブログの見出しは勿論、タイトルやその他のタグなどに適用して、是非個性あるブログ運営に生かしてくださいね。

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

 

CSSの利用の仕方

では早速見ていきましょう。

ここではWordpressの記事作成で通常使われる「見出し2」(h2タグの見出し )に対するCSSを紹介しています。

どれもそのままコピーしてブログのCSSに追加すればすぐ使えるようになっていますので、是非いろいろと試してみてくださいね!

  • 1.基本の利用法
    • コレが使いたい!というデザインのCSSをブログのCSSに貼り付けてください。
    • 貼り付けても変な表示になる等あれば、下方にある初期設定用のCSSも貼り付けてください。
  • 2.記事本文だけへの適用
    • ブログのテーマごとに、記事本文の 見出し2(h2タグ)への指定が変わります。
    • 詳しくは下方の関連記事で解説しますが、有名どころのテーマで言えば、以下のようにしてみてください。
      (全てのh2 を以下の “” 内に置き換える)

      • 賢威“#main-contents .contents  h2”
      • Simplicity“div.article h2”
      • Stinger5“div.post h2”
      • Twenty Fifteen“div.entry-content h2”
    • 関連記事 ブログのデザインカスタマイズの決め手!CSSの適用範囲を確認する技
  • 3.見出し2以外の見出しへの利用
    • 見出し2以外の見出しに利用したい場合、例えば「見出し3」では h2 を h3 に、「見出し4」では h2 を h4 に全て変更します。
  • 4.記事タイトルへの利用
    • 記事のタイトルは基本 h1 タグが使われます。h2 を 全て h1 に置き換えます。
  • 5.見出し以外への利用
    • 見出し以外に追加たい場合には、h2 を適用したいHMTLタグに置き換えます。
  • 6.ブログのCSSへの反映
  • 7.色変更などのデザインカスタマイズ

初期設定用CSS

WordPressのテーマでは既に見出し2(h2)がいろいろとデザインされている(CSSが設定されているため)ことから、なにか表示が変だ、という場合には、以下の初期設定をCSSの最初に貼り付けてみてください。

CSSの初期設定

またモバイルでの文字の大きさを調整したい(少し小さく表示したい)という場合には、以下のコードをCSSの一番最後に貼り付けてみてください。

CSS - モバイル用

前置き長すぎ!それでは順番に見てみましょう!

標準タイプ(塗りつぶし)

標準的に使える見出しデザインです。

塗りつぶし基本

見出しサンプル – 塗りつぶし01

角丸

見出しサンプル – 塗りつぶし02

影付き(ボックス)

見出しサンプル – 塗りつぶし03

影付き(ボックス – 内側)

見出しサンプル – 塗りつぶし04

影付き(テキスト)

見出しサンプル – 塗りつぶし05

影付き(ボックス – 内側 + テキスト)

見出しサンプル – 塗りつぶし06

標準タイプ(ワク)

標準的に使えるワクで囲ったタイプの見出しデザインです。

枠デザイン基本

見出しサンプル – ワク01

角丸

見出しサンプル – ワク02

影付き(ボックス)

見出しサンプル – ワク03

影付き(ボックス – 内側1)

見出しサンプル – ワク041

影付き(ボックス – 内側2)

見出しサンプル – ワク042

影付き(テキスト)

見出しサンプル – ワク05

影付き(ボックス – 内側 + テキスト)

見出しサンプル – ワク06

左+下

見出しサンプル – ワク07

左+下(背景色あり)

見出しサンプル – ワク08

左+右

見出しサンプル – ワク09

上+下(シンプル)

見出しサンプル – ワク10

 グラデーション

グラデーションは設定が結構あります。
CSSの多さにびっくりしないでくださいね(笑)
(少し古いブラウザなど考慮しなければそんなでもないんですけど)

ネット上で簡単にシミュレーションできるサービス(以下のURL)がありますので、そちらでグラデーションのかかり具合や色の組み合わせを試してCSSのコードを取得してみてください。

  • Ultimate CSS Gradient Generator
    • 色々と触ればグラデーションの作り方がわかると思いますが、最後のコードの取得が分かりづらいかも知れません。
    • CSSコードの上にマウスを持って行くと、右下に小さく「copy」とでるので、そこをクリック!するとコピーできます。

取得したコードは、以下の箇所に貼り付けてください。

以下はそのジェネレーターで作成した例です。こんな感じのが簡単にできるんですね。嬉しすぎ ^◇^)

取得したコードの位置も見てみてください。

ふっくらグラデーション

見出しサンプル – グラデ01

CSSコード - グラデ01

左右グラデーション1

見出しサンプル – グラで02

CSSコード - グラデ02

左右グラデーション2

見出しサンプル – グラで03

CSSコード - グラデ03

2色ふっくらグラデーション

見出しサンプル – グラで04

CSSコード - グラデ04

 特徴的な形 – 下三角

吹き出し調の枠です。人気のテーマ「Stinger5」に取り入れられてますね。

下三角

見出しサンプル – 特徴的01

下三角 – 白背景

見出しサンプル – 特徴的02

下三角 – 輪郭のみ

見出しサンプル – 特徴的03

下三角 – 上下のみ

見出しサンプル – 特徴的04

 特徴的な形 – 前後に丸

先頭に丸

見出しサンプル – 特徴的051

先頭に丸

見出しサンプル – 特徴的052

左右に丸

見出しサンプル – 特徴的06

 特徴的な形 – 前後に三角

先頭に三角

見出しサンプル – 特徴的071

最後に三角

見出しサンプル – 特徴的072

左右にに三角

見出しサンプル – 特徴的073

先頭に三角(反転)

見出しサンプル – 特徴的081

最後に三角(反転)

見出しサンプル – 特徴的082

左右にに三角(反転)

見出しサンプル – 特徴的083

右に三角リボン

見出しサンプル – 特徴的09

 特徴的な形 – 前後/上下に棒

先頭に棒

見出しサンプル – 特徴的101

左右に棒

見出しサンプル – 特徴的102

上に棒

見出しサンプル – 特徴的111

下に棒

見出しサンプル – 特徴的112

 特徴的な形 – 二重枠

2重ワク(背景色あり)

見出しサンプル – 特徴的121

2重ワク(背景色なし)

見出しサンプル – 特徴的122

今回のまとめ

  • 見出しのデザインは、ブログの見かけ上の個性を出す上では欠かせない要素
  • ここにある見出しデザインで使ってみたものはCSSをブログへコピーする
  • 正しく表示されるよう、初期設定用のCSSも利用する
  • 記事本文だけなど、限られた箇所に適用する場合、使用しているテーマごとに h2タグ への指定を全て変更する
  • 見出し2以外(見出し3,見出し4などやタイトル、その他HTMLタグ)にも勿論使える
  • 文字色や背景色を変えるなど、独自にデザインカスタマイズを行なう場合には、Google Chrome の開発ツールが超便利

ブログの見かけを変える大きな要素はいろいろとありますが、「テーマを利用しつつ他のブログと見かけの差別化をはかる」ものとしては、「ヘッダー画像」とここで紹介してる「見出しのデザイン」が非常に大きな要素となるでしょう。

他の記事で解説しているヘッダー画像とともに、ここで紹介してる見出しなどを活用し、是非あなたらしい、独自のブログデザインに挑戦してみてください。

その独自性、個性はグーグルのペナルティの危険性を遥かに軽減し、またその効果以上にあなたの感性、といったメッセージを読者に伝えられます。

完成された美しいデザインでなくても全然OK。その1つ1つの工夫が読者を惹きつけ、他のブログとの差別化をはかるとともに、読者の滞在時間を延ばし、更に強いブログへの成長を促します。

こうした1つ1つの工夫が良きスパイスとなり、成功への到達スピードを加速します。

関連記事 ブログのヘッダー画像の作り方!簡単リサイズから文字入れまで独自性を打ち出す

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です