本記事では上記のような疑問を解決します。
この記事の内容
- 見出しデザインを変更する方法を紹介します。
- 見出しデザインのサンプルも合わせて紹介します。
この記事を書いている私は、ブログが大好きなシステムエンジニアです。暇さえあれば、ブログの見た目の変更や、効率化UPのためにソースコードをいじっています。
今回はそんな私が、見出しデザインを変更するための簡単な方法を解説していきます。
初心者ブロガーさんに特におすすめです。ぜひご覧ください。
見出しデザインを変更する方法を解説【手順どおりやるだけでOKです】
見出しデザインを変更するときの手順は下記のとおりです。
- 手順①：変更したい見出しのデザインを考える（用意する）。
- 手順②：変更前の見出しのタグ（HTML）を確認する。
- 手順③：デザインを変更する。
「むずかしそう。。。」というイメージかもですが、手順通りにやるだけでOKです。
次から具体的に説明していきます。
手順の前に：コツがあります。
１点、見出しを変更するにあたってコツがあるのですが、変更前の見出しはシンプルなものを選んでおいた方が良いです。
なぜなら、見出しの変更は「”今の状態”をベースに、好みの内容に変える」というものなので、”今の状態”が複雑なものだと、好みの内容に変えるために、色々と手を加える必要があるからです。
”今の状態”がシンプルだと、変更する箇所もシンプルになるので、断然にシンプルな見出しを選択しておきましょう。
WordPressを使っている場合は、テーマによっては複数種類の見出しが用意されていたりします。その中から１番シンプルなものを選んでおくと良いです。
手順①：変更したい見出しのデザインを考える（用意する）。
まずは変更したい見出しのデザインを考えましょう。
とはいえ、１からデザインを考えるのは難しいので、ネットから拾ってくるほうが良いです。探せばいろいろ出てきますので、気に入ったデザインを探してくれば良いかと思います。
デザインのサンプルは私も記事を書いてますので、ぜひこちらもご覧ください。⇒見出しデザインのサンプル集【CSSコピペで簡単です。】
デザインを探すときのポイント
デザインを探すときは、下記のことを頭に入れておくと良いです。
- 色については、後からの変更が簡単。
- サイズや位置の変更は、少し手間となる場合があるかも。
- その他の変更は、基本的は作り変え。
なので、多少の変更なら後からできるので、「これいいな」と思ったやつを採用し、あとから自分好みにカスタマイズすればOKです。
手順②：変更前の見出しのタグ（HTML）を確認する。
次に、変更したい箇所の見出しタグを確認しましょう。
確認の方法は、使っているブラウザによって異なります。今回は下記の２つのブラウザでのやり方について説明します。
- Internet Explorer
- Google Chrome
いずれも人気のブラウザですよね。
Internet Explorerの場合
まずは、自分のブログ、Webページを開きます。
ページが開いたら、「F12」キーを押します。すると、下記のような画面になります。
次は、下記箇所をクリック。
すると、「要素の選択」モードになるので、調べたい見出しをクリックしましょう。
見出しをクリックすると、下記のように見出しに適用されているスタイルの表示ができます。
ここで一番確認したいのは、下記の部分です。
・・・
・・・
}
ここの定義が最も重要です。後から使うのでとりあえずコピーし、テキストファイルにでも貼り付けしておくと良いです。
Google Chromeの場合
Internet Explorerのときと同じように、まずは自分のブログ、Webページを開きます。
次はページ内のどこでも良いので、「右クリック － 検証」を選択します。
下記のような画面になりますので、矢印箇所をクリックします。
調べたい見出し箇所をクリックします。
すると、適用されているスタイルの表示ができます。
ここでも１番確認したいのは、「.article h3」の部分です。
手順③：デザインを変更する。
では次に、実際にデザインを変更してみます。
手順②で登場した「H3タグ」を変更してみたいと思います。変更内容は下記の記事の「下線⑦」に変更してみます。
【Related】: 見出しデザインのサンプル集【CSSコピペで簡単です。】
下線⑦のCSSコードをコピー
下記の「copy」をクリックすればOKです。
とりあえず、テキストエディタにでも貼り付けしておきましょう。
CSSコードの書き換え
コピーしたCSSコードを、自分のブログやWebページの見出しタグに合わせて書き換えます。下記のような感じです。
CSSコードをブログに適用
書き換えたCSSコードをブログに適用させます。
「外観 – カスタマイズ」へと進みます。
「追加CSS」をクリック。
CSSコードを貼り付けし、「公開」をクリック。
以上で設定は完了となり、見出しの見た目が変更された状態となります。
使用しているブログの種類によって、微妙に見た目が異なる場合があるので、必ず自分の目で最終確認した方が良いので忘れずに！
=====
今日はここまでとしたいと思います。
見出しのデザインを変更するだけで、Webページの印象が全然違うものになりますので、ぜひともトライしてみてはと思います。