見出しデザインを変更する方法を解説【手順どおりやるだけでOKです】

Left Caption
見出しのデザインを変更するには、どうしたら良いのかな。やり方が知りたいな。

本記事では上記のような疑問を解決します。

この記事の内容

  • 見出しデザインを変更する方法を紹介します。
  • 見出しデザインのサンプルも合わせて紹介します。

この記事を書いている私は、ブログが大好きなシステムエンジニアです。暇さえあれば、ブログの見た目の変更や、効率化UPのためにソースコードをいじっています。

今回はそんな私が、見出しデザインを変更するための簡単な方法を解説していきます。

初心者ブロガーさんに特におすすめです。ぜひご覧ください。

広告

見出しデザインを変更する方法を解説【手順どおりやるだけでOKです】

見出しデザインを変更するときの手順は下記のとおりです。

  • 手順①:変更したい見出しのデザインを考える(用意する)。
  • 手順②:変更前の見出しのタグ(HTML)を確認する。
  • 手順③:デザインを変更する。

「むずかしそう。。。」というイメージかもですが、手順通りにやるだけでOKです。

次から具体的に説明していきます。

手順の前に:コツがあります。

1点、見出しを変更するにあたってコツがあるのですが、変更前の見出しはシンプルなものを選んでおいた方が良いです。

なぜなら、見出しの変更は「”今の状態”をベースに、好みの内容に変える」というものなので、”今の状態”が複雑なものだと、好みの内容に変えるために、色々と手を加える必要があるからです。

”今の状態”がシンプルだと、変更する箇所もシンプルになるので、断然にシンプルな見出しを選択しておきましょう。

WordPressを使っている場合は、テーマによっては複数種類の見出しが用意されていたりします。その中から1番シンプルなものを選んでおくと良いです。

手順①:変更したい見出しのデザインを考える(用意する)。

まずは変更したい見出しのデザインを考えましょう。

とはいえ、1からデザインを考えるのは難しいので、ネットから拾ってくるほうが良いです。探せばいろいろ出てきますので、気に入ったデザインを探してくれば良いかと思います。

デザインのサンプルは私も記事を書いてますので、ぜひこちらもご覧ください。見出しデザインのサンプル集【CSSコピペで簡単です。】

デザインを探すときのポイント

デザインを探すときは、下記のことを頭に入れておくと良いです。

  • 色については、後からの変更が簡単。
  • サイズや位置の変更は、少し手間となる場合があるかも。
  • その他の変更は、基本的は作り変え。

なので、多少の変更なら後からできるので、「これいいな」と思ったやつを採用し、あとから自分好みにカスタマイズすればOKです。

手順②:変更前の見出しのタグ(HTML)を確認する。

次に、変更したい箇所の見出しタグを確認しましょう。

確認の方法は、使っているブラウザによって異なります。今回は下記の2つのブラウザでのやり方について説明します。

  • Internet Explorer
  • Google Chrome

いずれも人気のブラウザですよね。

Internet Explorerの場合

まずは、自分のブログ、Webページを開きます。

ページが開いたら、「F12」キーを押します。すると、下記のような画面になります。

次は、下記箇所をクリック。

すると、「要素の選択」モードになるので、調べたい見出しをクリックしましょう。

見出しをクリックすると、下記のように見出しに適用されているスタイルの表示ができます。

ここで一番確認したいのは、下記の部分です。

.article h3 {
・・・
・・・
}

ここの定義が最も重要です。後から使うのでとりあえずコピーし、テキストファイルにでも貼り付けしておくと良いです。

Google Chromeの場合

Internet Explorerのときと同じように、まずは自分のブログ、Webページを開きます。

次はページ内のどこでも良いので、「右クリック - 検証」を選択します。

下記のような画面になりますので、矢印箇所をクリックします。

調べたい見出し箇所をクリックします。

すると、適用されているスタイルの表示ができます。

ここでも1番確認したいのは、「.article h3」の部分です。

手順③:デザインを変更する。

では次に、実際にデザインを変更してみます。

手順②で登場した「H3タグ」を変更してみたいと思います。変更内容は下記の記事の「下線⑦」に変更してみます。

【Related】: 見出しデザインのサンプル集【CSSコピペで簡単です。】

 

下線⑦のCSSコードをコピー

下記の「copy」をクリックすればOKです。

とりあえず、テキストエディタにでも貼り付けしておきましょう。

CSSコードの書き換え

コピーしたCSSコードを、自分のブログやWebページの見出しタグに合わせて書き換えます。下記のような感じです。

CSSコードをブログに適用

書き換えたCSSコードをブログに適用させます。

「外観 – カスタマイズ」へと進みます。

「追加CSS」をクリック。

CSSコードを貼り付けし、「公開」をクリック。

以上で設定は完了となり、見出しの見た目が変更された状態となります。

使用しているブログの種類によって、微妙に見た目が異なる場合があるので、必ず自分の目で最終確認した方が良いので忘れずに!

=====

今日はここまでとしたいと思います。
見出しのデザインを変更するだけで、Webページの印象が全然違うものになりますので、ぜひともトライしてみてはと思います。

広告