ワードプレス(WordPress)の見出しデザインを装飾カスタマイズする方法!

投稿者: | 2018年5月3日

ワードプレス(WordPress)の見出しデザインを装飾カスタマイズする方法!をご説明します。

ワードプレスを使用し記事を作成していくと【見出し】をつけて、記事を読みやすくしたいですね。

ワードプレスの【見出し】設定には1~6までの種類があります。

ただ、選んでも文字サイズが大きくなるだけです。

見出しに「素敵な背景色」を付けたり、「フォント種類」を変えたりできると、記事にメリハリがついて読みやすくなります。

今回は、2つのプラグインを追加して、見出しを簡単に設定できる方法を下記にご案内します。

 


 

プラグインのインストールについて

今回、見出しの装飾を行うには、下記の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】:チェックオン

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

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);
}

 


 

Simple Custom CSSの設定をおこなう

 

次に、【外観】⇒【カスタムCSS】をクリックします。

 

【カスタムCSSをここに入力してください】のテキストボックスのような画面が表示されます。

赤枠で囲んだように、上記で貼り付けた「※追加タグ」を貼り付けます。

【カスタムCSSの更新】ボタンをクリックします。

 


 

ブログの新規記事で、見出しを確認する

新規にブログを記載します。

赤枠で囲んだツールが追加されていることを確認してください。

Quicktags▲をクリックすると、先ほど追加設定した【h2】の設定値が作成されています。

(※特に選択する必要はありません。)

 

試しに【見出し2】の設定で、タイトルを入力します。

 

プレビューで確認してみると、如何ですか?

見出しに装飾されていることを確認できましたでしょうか?


 

まとめ

 

以上が、見出しの装飾の手順になります。

今回は、【見出し2】の設定値が【h2】に相当する設定を行いました。

【見出し1】~【見出し6】までありますので、自分のサイトデザインに合ったコードを作り、設定してみてください。

見出しの装飾一つで、ページ構成や見栄えがガラッと変わりますよね。

このツールの存在を知らなかった時は、直接CSSを変更したり、とても手間がかかります。

是非、試してみましょう。

 

 

コメントを残す

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