当サイトのコンテンツには広告を含む場合があります。記事内で紹介する商品を購入する事で、当サイトに売上の一部が還元される事があります。

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

見出しデザイン

初めてWordPressでブログを書いた時、ただただ文章を書き並べただけなのに

意外と様になっていた事に驚きました。

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

shunP

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

ここがポイント!

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

ブログデザインは超重要!見出しをオシャレにして離脱率を下げよう!

ブログって当たり前なんですけど

文字だけで読者にメッセージを伝えなくてはいけません。

ワンポイント
  • 説明の仕方
  • アピールしたいポイント
  • 文章構成

ブログを書いていく上で一番頭を悩ますところではないでしょうか。

ですが、いくらライティングが上手で構成もばっちりであっても

白黒でのっぺりしたページでは誰も見てくれません。

記事デザインがイマイチだったらどうなる?

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

あたなたはその中から一番関係のありそうなものを選びます。すると

文章が羅列してあるだけのサイトが表示されました。

あっなんか違うな…。

っとなり直ぐに戻るをボタンを…。

shunP

そんな経験ありますよね。まさにそれです。
注意

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

MEMO

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

フォントをデザインしてアクセントをつけよう!

とは言ったものの、

あまりにコテコテでカラフルなブログに仕上げるのは大変

ですし時間も掛かります。逆にそんな事をしなくても

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

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

フォントの色変えぐらいなら簡単にできるくま!

くまさん

でも、WordPress初心者の場合見出しデザインの変更ってどうやるの?

となっている方が多いと思います。

見出しを変更する上で最低限知っておきたい基礎知識

そもそも見出しとは
  • 検索エンジン(Googleなど)
  • 読者(ユーザー)

これらのターゲットにページを正しく説明する役割を持っています。

なのでブログの表現のみならず、SEOの観点からも重要視されます。

WordPressには『見出し1(h1)』~『見出し6(h6)』まで見出しがあり

数字が若い程、重要度が高くなります

MEMO

1はタイトルに使用されるので、記事で使うのは2~4ぐらいです。

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

shunP

それでは実際に見出しデザインを変更してみます。

WordPressでの見出し変更手順
『ダッシュボード』→『外観』→『テーマの編集』をクリックします。

すると『スタイルシート』が立ち上がります。

そしてスタイルシートの一番下に『コマンド(指示)』を入力することで

見出しに装飾を施すことが出来ます。

簡単なコマンドの一例
  • border-top:上に線を入れる
  • border-bottom:下に線を入れる
  • border-left:左に線を入れる
  • border-right:右に線を入れる

shunP

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


.headline2{
border-bottom: 2px #0000FF;
}

ここで『headline2』は見出し2の事です。

そして『{~}』の内容がデザインの内容となります。

この場合は

『2ピクセルの太さで色は青(#0000FF)の1本線を下に引く』

となります。

MEMO

『px』は太さ、『solid』は1本線を表し、#で色を指定します。

色のコードを調べたい時は「HTMLカラーピッカー」がおすすめ

色のコード(#~)はHTMLカラーピッカーというサイトから簡単に調べることができます。

HTMLカラーピッカー

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

テーマの編集

使いたい色のコードを確認して、#~に打ち込めば完了です。

『ファイルを更新』をクリックして設定を保存します。

shunP

それでは実際に試してみましょう。

『記事投稿画面』を開き『見出し2』を選択します。

見出し装飾のやり方

適当に文章を打ち込み、テキスト表示にします。

そして頭の〈h2〉にclass=”headline2″を追加しましょう。

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

見出し装飾の結果

はい。青色の下線が引けたくまね!

くまさん

プラグインでよりスマートに!2つのおすすめプラグインの紹介!

このようにスタイルシート(CSS)にコマンドを追記することによって

見出しにデザインを加える事が出来ました。

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

shunP

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

見出しデザインに便利なプラグインその①『AddQuicktag』

AddQuicktag

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

AddQuicktagのインストール方法

プラグインの検索欄に『AddQuicktag』と打ち込み検索して、

『今すぐインストール』をクリックして『有効化』しましょう。

見出しデザインに便利なプラグインその②『Simple Custom CSS』

Simple Custom CSS

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

テーマのCSSを編集するには子テーマを作って編集するのが一般的です。

が、初心者には少し手間がかかります。

その手間を省いてくれるのでとても便利です。

カスタムCSSのプラグインをインストール

まず、先ほどと同様に『プラグイン』→『新規追加』をクリックします。

Simple Custom CSのインストール方法

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

『AddQuicktag』で記事作成画面に見出しボタンを作る

これで下準備は整いました。インストールした2つのプラグインを使っていきます。

まずメイン画面から『設定』→『AddQuicktag』をクリックします。
AddQuicktagで見出しボタンを作る

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

AddQuicktagで見出しボタンを作る

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

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

これで記事作成画面に『見出し2』のボタンが出来ました。

shunP

同様に『見出し3』、『見出し4』も作りましょう。

『Simple Custom CSS』で見出しデザインを記述する

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

Simple Custom CSSで見出しデザインを記述する

すると編集画面が開きます。

とりあえず『h2#headline2{}』『h3#headline3{}』『h4#headline4{}』と入力しましょう。

Simple Custom CSSで見出しデザインを記述する

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

Simple Custom CSSで見出しデザインを記述する

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

デザインのコマンドなんて分からない!

こちらのサイトでは色んなデザインのCSS記述が紹介されています。


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

shunP

好きなデザインのCSSをコピペして使えます。

実際に使ってみよう!

見出しデザインを指定してみた

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

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

見出しデザインを指定してみた

shunP

はい。しっかりとデザインが反映されてます。
これでいちいちテキスト画面からコマンドを入力する必要がなくなったくまね!

くまさん

まとめ

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

また、面倒な手間を省いてくれるプラグインがWordPressにはまだまだ沢山あります。

少しでも使いやすくすることで
  • ブログを更新するモチベーションアップ
  • 仕上げるまでの時間短縮(効率化)

プラグインを導入することで快適にブログ運営していければ良いですね。

それでは今回はこの辺で。

以上、『WordPressでブログの見出しをデザインする方法』でした。

あわせて読みたい

コメントを残す

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