ワードプレスの見出しデザインをプラグインで装飾設定・使い方【簡単設定！】

ワードプレス(WordPress)の見出しのデザインの装飾の変え方の簡単な方法を知りたくないですか？

方法は簡単！プラグイン「AddQuicktag」と「Simple Custom CSS」を導入し好きに設定するだけです。

複雑なCSSコードをプラグインで簡単に設定することができるで、一度設定してしまえば、必要な時に一発で見出しのデザインを変更することができます。

（記事追加修正：addquicktagを利用してさらに作業効率をアップする）

ワードプレスで記事を書いたんだけど、「見出し１～6」を選んでも見出しの文字サイズしか変わらないんですけど・・・。

かっこいい見出しのデザインを付けたいです！！

そうですね。ワードプレスのデフォルト設定だと、文字のサイズだけが大きくなるだけですからね。

デザインを追加するだけでも記事にメリハリが付いて、読みやすくなります。

何より、見出しはアクセス数にも大きく関係していきます。

やり方は下記の手順通りに進めていくと簡単にできますからね！

簡単！ワードプレスの見出しデザインをプラグインで装飾設定・使い方
その他おすすめプラグインについて
ワードプレスの見出しデザインをプラグインで装飾設定・使い方【簡単設定！】まとめ

簡単！ワードプレスの見出しデザインをプラグインで装飾設定・使い方

ワードプレスを使えるようになるとブログを運営できますが、デフォルトの機能でh1やh2、h3で見出しを作っても文字の大きさしか変わらず、背景色などのデザインが付かなくて困っている方はいませんか？

簡単にできる方法は下記に紹介するプラグインの導入と設定だけです。

★導入するプラグインはこの2つだけ！

・AddQuicktag

・Simple Custom CSS

AddQuicktag、Simple Custom CSSは、後の作業効率もアップしますので、早い段階で入れておきましょう。

特に、「AddQuicktag」は、後の作業効率アップのツールとして大いに役立つこと間違いなしです。

このツールを使わなくても、CSSというコードをその都度h1やh2のタグに追加していくことで実装することができますが、初めてワードプレスを始めたばかりの方ですと、どこにどんな情報を記載していいのか分かりませんし、何より毎回追加するのは煩雑です。

ましてや、下手に触ると、ブログ全体のデザインが壊れてしまったなどと影響が出てしまう場合もあります。

また、ユーザービリティの観点からしても、「見やすさ」、「読みやすさ」は、グーグルの検索エンジンの評価にも直結し、結果としてアクセス数(PV数)の呼び込みへと繋がります。

★分かりやすく綺麗な見出しはメリットが高い

・見出しが綺麗で、読みやすい記事はユーザービリティもグーグル評価も良い

・アクセス数(PV数)の増加にもつながる

・SEOに強くなりドメインパワーが強くなる

ワードプレスでブログを構築し始めたら、この「AddQuicktag」と「Simple Custom CSS」はしっかりと導入し、魅力ある見出しデザインを作りユーザービリティを向上させていきましょう。

設定はとても簡単です。

次の章に設定方法をまとめてみました。

見出しデザインを装飾するにはプラグインをインストール

今回、見出しのデザインの装飾を行うには、下記の2つのプラグインをインストールする必要があります。

・AddQuicktag

・Simple Custom CSS

インストールが完了したら、それぞれのプラグインの設定値を少し変更するだけです。

「AddQuicktag」プラグインのインストール

【プラグイン】　⇒　【新規追加】をクリックします。

キーワードに「AddQuicktag」と入力します。

AddQuicktagのプラグインをインストールします。

【今すぐインストール】ボタンをクリックします。

インストールが完了したら【有効化】ボタンをクリックします。

※有効化にせず、上手くいかないという問い合わせがたまにあります。

プラグインが確実に有効化になったことを確認します。

「Simple Custom CSS」プラグインのインストール

プラグインの追加画面に戻ります。

キーワードに【Simple Custom CSS】と入力します。

Simple Custom CSSプラグインをインストールします。

【今すぐインストール】ボタンをクリックします。

インストールが完了したら、【有効化】ボタンをクリックします。

AddQuicktagの設定をおこなう

【ツール】⇒【AddQuicktag】をクリックし、管理画面を表示させます。

下記のような設定画面が表示されます。

設定する箇所は、赤枠の部分です。

まずは、下記の通りに登録してみてください。

【ボタンのラベル】：h2
【ラベル名】：h2
【開始タグ】：下記の（※追加コード）を登録
【終了タグ】：</h2>
【ビジュアルエディター】：チェックオン
【post】：チェックオン
【page】：チェックオン
【attachment】：チェックオン
【comment】：チェックオン
【edit-comments】：チェックオン
【widgests】：チェックオン

※追加コード
（コードはサンプルなので、慣れたら好きなコードを試してみてください）

参考　ワードプレスの見出しデザインを変えるCSS・html設定例5選(サンプルコードあり)

h2{
position: relative;
padding: 0.5em;
background: #add8e6;
color: white;
}h2::before {
position: absolute;
content: ”;
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}