WordPressブログの見出しをデザインしよう。プラグインで簡単設定!

私が初めてWordPressでブログを書いた時、ただただ文章を書き並べただけなのに意外と様になっていたので驚きました。

WordPressが初心者から玄人まですべてのブロガーに愛用されている理由が分かった気がします。

しかもそれが無料で使えるなんて…すごい時代になったものです。

さて、そんなWordPressですがプラグインを用いることでさらに機能をもたせる事ができます。

ブログデザインの重要性

ブログって当たり前なんですけど文字だけで読者にメッセージを伝えなくてはいけません。

説明の仕方であったり、アピールしたいポイント文章構成はブログを書いていく上で一番頭を悩ますところではないでしょうか。

ですが、いくら説明が上手で構成もばっちりであっても、白黒でのっぺりしたページでは誰も見てくれません

例えば、WEBで調べたいワードを検索しているとします。いろいろと興味深いサイトが表示されますよね。

その中から一番関係のありそうなものをクリックします。すると文章が羅列してあるだけのサイトが表示されました。あっ違うな…っとなり直ぐに戻るをクリック…そんな経験ありますよね。

まさにそれです。訪問者はブログのパッと見のデザインだけで直感的に良し悪しを決めている事が多いです。

なので如何にこのパッと見で帰ってしまうのを防げるか内容に目を通して貰えるか大切になります。

少しでも興味を持ってもらうことが出来れば読者(リピーター)となってくれる可能性も高まりますからね。

ブログにアクセントを

とは言ったものの、そんなにコテコテカラフルなブログに仕上げるのは大変ですし時間も掛かります。逆にそんな事をしなくても

  1. フォントに色を付ける
  2. ポイントとなるところを太くする
  3. 見出しのデザインを変えてみる

といったちょっとしたアクセントを付けるだけでもブログの雰囲気は変わります

フォントの色変えぐらいなら簡単にできますよね。

でも、WordPressを始めたばかりの方はこの見出しデザインの変更ってどうやるの?となっている方が多いと思います。

今回はその方法を解説していきます。

見出しについて

とその前に予備知識の説明から。そもそも見出しとは検索エンジン(Googleなど)とユーザーにページを正しく説明する役割を持っています。

なのでブログの表現のみならず、SEOの観点からも重要視されます。WordPressには『見出し1』~『見出し6まで見出しがあり数字が若い程、重要度が高くなります。

使ってみると分かりますが『見出し1』はかなり大きく表示されます。1タイトルに使用されるので、普段使うには2~4ぐらいでしょうか。

この見出しですがtextで表示すると『<h2>テキスト</h2>』の様に文章が<h>2で挟まれています。プログラミングが苦手な(分からない)方はこのイメージだけ覚えておけばOKです。

見出しのデザインを変更してみよう

それではまず、『ダッシュボード』から『外観』→『テーマの編集』をクリックして『スタイルシート』を開きます。

そして『スタイルシート』の一番下に『コマンド(指示)』を入力することで見出しに装飾を施すことが出来ます。

  • 「border-top」に線を入れる
  • 「border-bottom」に線を入れる
  • 「border-left」に線を入れる
  • 「border-right」に線を入れる

例えば見出し2に線を引く』を設定したい場合はこのように打ち込みます。

HTML

.headline2{
border-bottom: 2px solid #0000FF;
}
ここで『headline2』見出し2の事です。そして『{~}』の内容がデザインの内容となります。『px』は太さ、『solid』は1本線を表し、#で色を指定します。

この場合は『2ピクセルの太さで色は(#0000FF)の1本線下に引く』となります。
因みに色のコード(#~)HTMLカラーピッカーというサイトから簡単に調べることができます。

自分の使いたい色をクリックすれば画面右下の#欄にコードが表示されます。

使いたい色のコードを確認して、#~に打ち込めば完了です。『ファイルを更新』をクリックして設定を保存します。

それでは実際に試してみましょう。『記事投稿画面』を開き『見出し2』を選択します。

適当に文章を打ち込み、テキスト表示にします。そして頭の〈h2〉にclass=”headline2″を追加しましょう。

これでプレビューしてみると

はい。青色の下線が引けました。

プラグインでよりスマートに

このようにスタイルシート(CSS)にコマンドを追記することによって見出しにデザインを加える事が出来ました。

しかしながら、毎回毎回『テキスト表示』→『見出しを探す』→『コマンドを入力』を行うのって結構な手間になります。

そんな困り事解決してくれるのが次に紹介するプラグインなのです。

『AddQuicktag』のインストール

このプラグインは記事作成画面に見出しのボタンを追加する為のプラグインです。

プラグインの検索欄に『AddQuicktag』と打ち込み検索して、『今すぐインストール』をクリックして『有効化』しましょう。

『Simple Custom CSS』のインストール

このプラグインは「WordPressのテーマをいじらずにちょっとだけCSSを編集したいな」と言う時に使うプラグインです。

テーマのCSSを編集するには子テーマを作って編集するのですが、これが少し手間がかかります。その手間を省いてくれるのでとても便利です。

ただ、このカスタムCSSのみでは高度な設定は不可能です。必ず子テーマを作るようにしておきましょう。

子テーマの作成についてはこちらの記事を参考にしてください。

WordPress初心者注意!親テーマに直書きはダメ!!必ず子テーマを作りましょう。

子テーマとカスタムCSSの使い分けについてはこちらの記事です。

子テーマは要らない!?初心者にはカスタムCSSで十分なのか?

それではカスタムCSSのプラグインをインストールしていきましょう。

まず、先ほど同様に『プラグイン』『新規追加』へ行きます。

そして検索欄に『Simple Custom CSS』と打ち込み、『今すぐインストール』をクリックして有効化しましょう。

記事作成画面に見出しボタンを作る

まずメイン画面から『設定』から『AddQuicktag』をクリックします。

すると設定画面が開きます。

『ラベル名』『h2』と入力します。開始タグに『〈h2 class=”hh hh4 main-bdr main-c” 〉』、終了タグに『〈/h2〉』と入力します。

それと、一番右の小窓にチェックを入れ、『変更を保存』をクリックします。

これで記事作成画面に『見出し2』のボタンが出来ました。同様に『見出し3』、『見出し4』も作りましょう。

CSSへ見出しデザインを打ち込む

次にCSSの編集を行います。『外観』から『カスタム CSS』をクリックします。

すると編集画面が開きます。とりあえず『h2#headline2{}』、『h3#headline3{}』、『h4#headline4{}』と入力しましょう。

そして各見出しの{}内に見出しのデザインを打ち込んでいきます。

デザインのコマンドなんて分からない!って方はこちらから好きなデザインを選んでみましょう。

参考

『CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選』サルワカ

以上で設定はおしまいです。

実際に使ってみよう!

記事作成画面に『Quicktags』のボタンが出てきましたね。

適当な文章を入力し『h2』を選択してみましょう。

はい。しっかりとデザインが反映されてます。

これでいちいちテキスト画面からコマンドを入力する必要がなくなりました。

注意
『3.見出しのデザインを変更してみよう』で親テーマの一番下に書き込んだコマンドは消しておかないとうまく表示されません。プラグインを使う場合は消しておきましょう。

まとめ

見出しのデザインを工夫することで、見栄えの良い見やすいブログを作ることが出来ます。

また、面倒な手間を省いてくれるプラグインがWordPressにはまだまだたくさん存在しています。

少しでも使いやすくすることでブログを更新するモチベーションであったり仕上げるまでの時間短縮に繋げ、効率よくブログ運営していければと思います。

コメントを残す

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