ワードプレス

【図解】ワードプレスの見出しを好きなデザインにする方法

更新日:

今回は、プラグインを使って見出しを綺麗にしていこうと思います。

見出しはとても重要な部分で読者の方には最初に目につくところだと思います。

そこが見やすいか見やすくないかで、その後読まれるか読まれないかは分かれます。

必ず綺麗で読みやすい見出しに設定しましょう!

画像を使って分かりやすく解説していきますので、見出しを変更したい方はぜひ参考にしてみてください。

見出しとは?

見出しと言うのは、この上にある記事の中にあるタイトルみたいなものです。

初期設定だとこのような感じです。

ちょっと寂しいですね。

これをプラグインを使って、好きなデザインにしていきます。

 

プラグインを設定

今回はプラグイン『AddQuicktag』を使って進めていきます。

・管理画面のプラグインから新規追加をクリックします。

 

・こちらにAddQuicktagと入力します。

 

・こちらの今すぐインストールをクリックし、有効化します。

 

・そうしますと、プラグインに追加されますので設定をクリックします。

・このような画面になりますので入力していきます。

 

入力する部分はこちらです。

① ボタン名 h2と入力します。見出しの名前です。

② ラベル名 h2と入力します。

③ 開始タグ <h2 id="midasi2">と入力します。idから後ろは好きなもので。

④ 終了タグ </h2> と入力します。

⑤と⑥は空欄にします。

⑦は全てチェックを入れます。

 

・そうしますと、このようになります。

変更を保存して終了です。

見出し3を作りたい場合は、h2をh3に変更し、midasi2を3に変更するだけで可能です。

好きなデザインを選ぶ

こちらは自分の好きなデザインの見出しをコピーできるサイトを見つけましょう!

私は、こちらのサイトを参考にさせていただきました。

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

たくさんあって、自分の好きなデザインがあると思います。

色は、自分で簡単に変更できますので、好きなデザインを選びましょう!

 

CSSにコピペする

・好きなデザインのCSSをコピーしてきましたら、外観のカスタマイズをクリックします。

 

・そうしましたら追加CSSをクリックします。

 

・そこに、コピーしてきたCSSを貼ります。

 

h1の部分を先ほど設定した、ものに変更します。

私の場合はh2#midasi2と入力します。

下のh1も同様に変更します。

入力が終了しましたら、上部の公開をクリックします。

以上で設定は終了になります。



使い方

使い方は簡単です。

投稿画面に移動します。

・そうしましたら、こちらのツールバー切替を押します。

 

・そうしますと、Quicktagsが出ますので押します。

 

・先ほど設定した、h2,h3がありますので使いたい際に押します。

 

・今回設定したカスタマイズですとこのようになりました。

初期設定のものより、とても綺麗で見やすくなりました。

 

終わりに

今回は、見出しをプラグインを使って設定していきました。

とても簡単にできて、しかも記事が読みやすくなるのでとても重要です。

今回の記事を参考にしていただいて皆さんも見出しをカスタマイズしてみてはいかがでしょうか?

-ワードプレス
-

Copyright© トリヤリ , 2019 All Rights Reserved.