≫メルマガにてブログ無料相談OKです。

WordPressの見出しデザインをプラグインで3分簡単設定!【解説】

はじめ

  • WordPressの見出しデザインを変更したい!
  • 見出しのCSSコードをプラグインで簡単に設定したい!
  • 設定した見出しの便利な使い方が知りたい!

本記事では、上記の疑問にお答えしています。

この記事を読めば、誰でも簡単にWordPressの見出しデザインを3分で設定することができますよ。

 

1. WordPressの見出しデザインをプラグインで簡単に設定する方法

WordPressの見出しデザインをプラグインで簡単に設定する方法は以下の通りです。

見出しデザインの設定手順
  1. プラグイン「Jetpack」or「Simple Custom CSS and JS」をダウンロード
  2. 見出しデザインのコードを取得する
  3. プラグインを使いCSSにコードを追加する

↓WordPressの見出しデザインをプラグインで簡単に設定する方法について動画でも解説しております。

 

1-1. プラグイン「Jetpack」or「Simple Custom CSS and JS」をダウンロード

まず、初めにCSSコードの追加・設定を行うためのプラグインをダウンロードします。

おすすめのCSS追加プラグインは以下の2つです。

おすすめプラグイン
  1. Jetpack
  2. Simple Custom CSS and JS

おすすめは簡単なアクセス解析機能など様々な機能を追加できる「Jetpack」が個人的にはおすすめです。

「Jetpack」を使用すると、

Jetpackの便利な機能
  • CSSコード追加
  • アクセス解析
  • リファラ
  • 人気投稿ページ
  • URLクリック確認
  • SNSに記事更新情報のシェア

などのブログ運営には欠かすことのできない便利な機能がすべて使えるようになりますので、この記事では「Jetpack」使ったやり方を解説していきます。

【解説】WordPressのプラグイン「Jetpack by WordPress.com」の設定方法と使い方

 

まず、WordPressの左のメニューバーから「プラグイン→新規追加」を選択。

 

プラグイン追加のページにある検索窓に、「Jetpack」と入力すると、プラグイン「Jetpack」が表示されるので、「ダウンロード→有効化」します。

 

有効化するとJetpackの設定画面に進むので、案内に従い、登録を進めていきます。

ちなみに、Jetpackは有料プランも用意されていますが、無料で使うことができますのでご安心ください。

 

1-2. 見出しデザインのコードを取得する

次に見出しデザインのCSSコードを取得する作業です。

見出しデザインのCSSを公開している以下のサイトがおすすめです。

ブログの文中で使用する見出しは3つほど使うのがスタンダードとなるので「h2,h3,h4」の3つのデザインを決めましょう。

※h1タグは、通常タイトルタグで使われているので、h2から設定するのが一般的です。

まずは、上記の3つのサイトからお好みの見出しデザインを決めていきます。

私のブログは「サルワカ」で公開されている見出しCSSコードを使っておりますので、「サルワカ」を例にご説明していきます。

サルワカのページでお好みのデザインの見出しCSSコードを決める。

※今回は一本下線の見出しデザインを例にしています。

 

その見出しデザインの下に表示されている「CSSコード」をコピーします。

 

1-3. プラグインに見出しCSSにコードを追加する

次にWordPressの管理画面に戻り、左のメニューバーから「外観→CSS編集」を選択。

 

追加CSSというコードの入力画面が表示されるので、そこにコピーした「見出しCSSコード」を張り付けていきます。

「h1」と表記されている部分を以下のように書き換えます。

h1 {border-bottom: solid 3px black;}

h2#danraku2 {border-bottom: solid 3px black;}

h3タグの場合、「h3#danraku3」

h4タグの場合、「h4#danraku4」

ちなみに、「danraku」というワードはお好みのものでOKです!

この手順で、h3、h4の見出しCSSコードも追加していけば、見出しデザインの設定は完了です。

 

2. カスタマイズした見出しデザインの便利な使い方

続いて、設定した見出しデザインを便利な使い方を解説していきます。

見出しは、「AddQuicktag」にショートコードを登録し、「TinyMCE Advanced」で便利に「見出し」使うことができるようになります。

見出しデザインの便利な使い方の手順は以下の通りです。

見出しの便利な使い方
  1. 「AddQuicktag」と「TinyMCE Advanced」をダウンロードする
  2. 「ショートコード」を登録する
  3. ショートコードを使い記事に見出しを入れる

 

2-1. 「AddQuicktag」と「TinyMCE Advanced」をダウンロードする

まず、初めに「AddQuicktag」と「TinyMCE Advanced」というプラグインはダウンロードしましょう。

このプラグインは、WordPressでブログを執筆していく上で、非常に便利なプラグインなのでダウンロードすることをおすすめします。

先ほどと同じく、WordPressの管理画面のメニューバーから「プラグイン→新規追加」を選択。

 

プラグイン追加の画面で「AddQuicktag」と「TinyMCE Advanced」を検索し、「ダウンロード→有効化」する。

 

2-2. AddQuicktagに「ショートコード」を登録する

次に、WordPressの管理画面メニューバーから「設定→AddQuicktag」を選択。

 

ショートコードの入力画面が表示されますので、ブログ初心者は以下の通りに入力していきましょう。

 

ボタン名:【見出し】H2

ラベル名:H2

開始タグ:<h2 id=”danraku2″>

終了タグ:</h2>

上記のコードを同様にh3、h4についても設定すれば完了です。

 

2-3. 「TinyMCE Advanced」でショートコードを使い記事に見出しを入れる

「TinyMCE Advanced」をダウンロードし、有効化すると記事執筆画面のメニューバーに様々なボタンが追加されています。

 

その中の「Quicktag」と記載されたプルダウンメニューの中に今まで設定した見出しデザインのショートコードがあります。

 

使い方は、見出しにしたい文章を選択します。

 

そして、「Quicktag」プルダウンメニューの中から、設定したhタグを選択すれば、hタグの見出しとすることができます。

 

実際の表示では以下のように表示されます。

 

「AddQuicktag」と「TinyMCE Advanced」は、見出し以外にも様々な場面で使えるブログ運営には非常にお勧めのプラグインですので、導入することをおすすめします。

 

 

まとめ

今回は、WordPressの見出しデザインをプラグインで簡単に設定する方法について解説してきました。

見出しは、ブログ運営していく上で必要不可欠な要素であり、SEO効果も見込める重要な部分です。

今回ご紹介した方法で、カスタマイズした見出しを使って記事を執筆していってください。

もしこの記事が役に立ったと思ったら、ブックマーク・SNSでシェアしてくれるととても嬉しいです。

最後までありがとうございました。

WordPressブログの「見出し(hタグ)」の完全マニュアル【まとめ】

1 COMMENT

自分メモとお返事 – meonmeon

[…] | みーこの自宅でネットビジネス WordPressの見出しデザインをプラグインで3分簡単設定!【解説】 | ツヨシウ… CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 […]

現在コメントは受け付けておりません。