これからブログ始めるぞ！
と、勢いだけで始めて見たのはいいけどぬーぼーはHTMLもPHPもwordpressもわかりません。
とりあえず、デフォルトの見出しが気に入らなかったので、変更することにしました。
この記事では、wordpressを使っていて、テーマをAffinger5にしている方向けに見出しの変更方法についてお伝えしようと思います。
この記事の目次
見出しのカスタマイズ場所
"見出し"をカスタマイズする画面は次の手順でたどり着くことができます。
- 「外観」の「カスタマイズ」をクリック
- 「各テキストとhタグ(見出し)」をクリック
- 見出しとなる「H2タグ」～「H5タグ」をクリック
- カスタマイズ画面に到着
「外観」の「カスタマイズ」 の画面
まずはwordpressの左側にある「外観」の「カスタマイズ」をクリックします。
「各テキストとhタグ(見出し)」 の画面
「[+]各テキストとhタグ(見出し)」をクリックします。
見出しとなる「H2タグ」～「H5タグ」 の編集画面
自分の修正したい「Hタグ」をクリックします。
ここでは例として、「H2タグ」を選択することにします。
「Hタグ」のカスタマイズ画面
ここでは例として、「H2タグ」を選択した場合の編集画面を表示します。
この編集画面で見出しの出来栄えをリアルタイムで確認しながら自分好みの見出しに設定することが可能です。
h2タグの見出しのカスタマイズには次の種類があります。
そのほかにも背景を画像にするなどの設定があるのですが、自分は絶対使わないし、たぶん需要ないだろうってことで説明は省きます。(ただめんどくさいだけ。。。)
見出しのカスタマイズ例
見出しのカスタマイズ場所では、見出しを変更する場所までのたどりつく方法を書きました。
ただたどり着くだけの説明ではつまらないのでどんな装飾ができるのかについて説明したいと思います。
見出しの修正方法はH2タグ～H5タグまでありますが、ここではH2タグを例にタグの修正例を紹介します。
色の変更方法
見出しの色の変更方法について説明します。
見出しの色は次の5種類選ぶことができます。
- 文字色
- 背景色
- 背景色(グラデーション上部)
- ボーダー色
- ボーダー色(サブ)
- 文字色では、その名の通り文字の色を変更することができます。
- 背景色では、背景の色を選択することができます。
- 背景色(グラデーション)では、背景色が複数表示できるような見出し設定の場合に表示されます。
- ボーダー色では、線の色を変更することができます。
ボーダー色(サブ)は見出しの種類によって変更が可能です。
次の見出しの場合ボーダー色(サブ)の色が確認できます。
- ボーダー色(サブ)では、ボーダー色が複数表示できるような見出し設定の場合に表示されます。
ボーダーを上下のみにする
ボーダーを上下のみにチェックを入れると、見出しの周りにあるフチの線が上下のみになります。
ただし、「タグの基本スタイル」によってはボーダーを上下のみにするという設定は反映されないようです。
ボーダー上を太くする(下をサブカラーに)
「ボーダー上を太くする(下をサブカラーに)」にチェックを入れると見出しの周りにあるフチの上のほうだけ線太くなります。
hタグの基本スタイル
「h2タグの基本スタイル」についてそれぞれ例をご紹介します。
吹き出しデザインに変更
「吹き出しデザインに変更」にチェックを入れることで、見出しが吹き出しのようになります。
囲み&左ラインデザインに変更
「囲み&左ラインデザインに変更」にチェックを入れることで、見出しがボーダーによって囲まれた状態になり、左側にボーダーが付きます。
2色アンダーラインに変更
「2色アンダーラインに変更」にチェックを入れることで、見出しに2色のアンダーラインが設定されます。
グラデーションアンダーラインに変更
「グラデーションアンダーラインに変更」にチェックを入れることで、見出しのアンダーラインにグラデーションが設定されます。
センターラインに変更
「センターラインに変更」にチェックを入れることで、見出しのセンターラインンの中央に設定できます。
囲みドットデザインに変更
「囲みドットデザインに変更」にチェックを入れることで、見出しの周りにドット線の囲いを設定することができます。
ストライプデザインに変更
「ストライプデザインに変更」にチェックを入れることで、見出しの背景の色をストライプに設定することができます。
破線アンダーラインに変更
「破線アンダーラインに変更」にチェックを入れることで、見出しのアンダーラインを破線に設定することができます。
左ラインデザインに変更
「左ラインデザインに変更」にチェックを入れることで、見出しの左側にラインデザインを設定することができます。
チェックボックスデザイン
「チェックボックスデザイン」にチェックを入れることで、見出しの左側にチェックを入れることができます。
テキストを中央寄せ
「テキストを中央寄せ」にチェックを入れることで、見出しのテキストを中央に寄せることができます。
デザインを幅一杯に
「デザインを幅一杯に」にチェックを入れることで、見出しに使われているデザインの横幅が拡張されます。
背景や吹き出しの角を丸くする
「背景や吹き出しの角を丸くする」にチェックを入れることで、見出しに使われているデザインの角が丸くなります。
グラデーションを横向きにする
「グラデーションを横向きにする」にチェックを入れることで、見出しに使われているデザインのグラデーションが横方向に設定されます。(デフォルトでは縦方向にグラデーションが設定されている)
まとめ
いかがだったでしょうか。
自分はAFFINGER5の見出しの設定方法を調べたときに、そもそもの見出しの設定を変えらえる場所を探すこと自体に結構時間がかかってしまいました。
この記事では、見出しのカスタマイズ方法というよりは、どこでカスタマイズできるよ！という場所がわかりやすいような記事を目指して書いてみました。
それではまた！