AFFINGER5

【AFFINGER5】見出しのデザインを変える2つの手順を紹介

 

悩んでいる人
AFFINGER5で、見出しを変える方法を知りたいです。また、良い感じの見出しに設定したいです。

こんな悩みに答えます。

 

 

AFFINGER5にて、見出しをカスタマイズする方法は2種類あります。

 

私はAFFINGER5を使って、最初はダサい見出しでしたが、納得のいく見出しのカスタマイズ方法を見つけることができました。

 

今回の内容

  • 見出しカスタマイズ方法は2つ
  • その①:追加CSSから変更する
  • その②:「外観」→「カスタマイズ」から変更する
  • まとめ

 

本記事を読めば、見出しのデザインを、自分の納得いくものに変えることができますよ。

 

 

見出しのカスタマイズ方法は2つ

 

AFFINGER5を導入したばかりの頃は、見出しの変更方法がよく分かりませんよね。

 

AFFINGER5における、見出しの変更方法は2つあります。

 

  1. 追加CSSから変更
  2. 「外観」→「カスタマイズ」から変更

 

ひとつずつ説明していきます。

 

 

その①:追加CSSから変更する

 

見出しは、追加CSSで設定するのが、一番オススメです。

 

オススメできる点としては、

  • デザインが豊富
  • サイトに合ったデザインを決められる
  • 自分で調整が可能

 

私も追加CSSで設定しています。

 

多少設定が面倒ですが、設定方法の手順を見ていきましょう。

 

 

手順①:見出しデザインが豊富なサイトに行く

 

まずは、以下の2つのサイトどちらか(どちらでもOK)にいきます。

 

 

どれも無料で、豊富なデザインがそろっています。

 

 

手順②:好きな見出しデザインをコピーする

 

 

 

 

上の画像のように、好きな見出しのデザインを見つけたら、コピーします。

 

上画面の状態で、「Ctrl」+「C」でコピーできます。

 

 

手順③:追加CSSにてペーストする

 

コピーしたコードを、自身のWordPressで使えるようにしていきます。

 

 

左のメニューから、「外観」→「カスタマイズ」を選択していきます。

 

 

 

左メニューの一番下にある、「追加CSS」をクリックします。

 

 

 

先ほどコピーしたコードを、空いてるスペースにペーストします。

 

入力バーが出ている状態で、「Ctrl」+「V」でペーストができます。

 

 

 

ペーストすると、上画面のようになりますね。

 

 

 

コード内「h1」→「h2」に変更します。

 

ペーストしたコードの最初の部分が、「h1」となっていると、「見出し1」のコードとなってしまうため、「h2」とすることで「見出し2」のコードとすることができます。

 

選んだデザインによっては、「h1」と書かれた部分が、2つや3つある場合があるため、すべて「h1」→「h2」としましょう。

 

 

 

ここまでやったら、自分の記事の、見出し2の部分を確認してみましょう。

 

まだ見本と違いますね。そんなときは、次の手順に進んでいきます。

 

 

手順④:追加CSSを有効にする

 

追加CSSを有効にするために、AFFINGER5に付いているカスタマイズを無効にします。

 

 

「外観」→「カスタマイズ」を選んで、

 

 

 

「各テキストとhタグ」をクリックします。

 

 

 

今回は見出し2を変更するので、「H2タグ」をクリックします。

 

 

 

左メニューを一番下までスクロールして、「カスタマイザーのCSSを無効化」にチェックを入れます。

 

ここまでやって再度、記事内の見出し2を確認してください。なんか違う点があれば、次に進みましょう。

 

 

手順⑤:CSSを調整していく

 

ここからは、選んだデザインによって、「プログラミング」によって調整していきます。

 

調整するに当たって、よくある4つについて解説していきます。

 

  • CSS(コード)が反映されない
  • 枠線を消したい・太くしたい
  • 見出しと文字の間をあけたい
  • 見出し内の文字の大きさを変更・固定したい

 

プログラミングといっても、分かりやすく、簡単なので、一緒に調整していきましょう。

 

自分に思い当たる箇所だけ見てもらえばOKです。

 

 

CSS(コード)が反映されない

 

上の手順を踏んでペーストしたのに、実際の記事には反映されないことがあります。

 

そんなときは、

 

 

上の画像のように、反映されない部分に「!important」と入力してあげます。

 

どこが反映されているのか分からない場合は、すべてに「!important」と入力するのが良いです。

 

 

 

枠線を消したい・太くしたい

 

 

「追加CSSにペーストしたけど、なぜか余計な枠線がある」

こんなこともあります。

 

追加CSSでは、枠線を消したり、太くしたりもできます。

 

 

枠線を消したい場合、考え方として、

「背景色と同じ色を、枠線に上書きする」

この方法で、枠線を消していきます。

 

例のように、見出し上部の枠線を消す場合、

 

border-top: solid 1px #f4f4f4 !important;

 

こんな感じでh2のカッコの中に書いてあげます。

 

  • 見出しの枠線を調整したい場合:top → bottom
  • 見出しの枠線を調整したい場合:top → right
  • 見出しの枠線を調整したい場合:top → left

 

topの部分を変えてあげると、調整する対象を変えることができますよ。

 

 

1pxの部分は、枠線の太さを入力します(pxとはピクセルの意味です)。

 

この値を大きくすると、枠線が太くなります。

 

例えば、

  • 少し太くしたい場合:1px → 2px
  • もう少し太くしたい場合:2px → 3px

 

こんな感じで、少しずつ値を大きくしたり、小さくしたりすると、納得いく太さになります。

 

 

#f4f4f4の部分は、枠線の色をカラーコードとして表しています。

 

 

枠線を消す場合、上の画像のように、h2の中にある、backgroundの色コードと同じコードを、#f4f4f4の部分に入力します。

 

また、別の色に変えたい場合は、カラーコード一覧から好きな色を選んでコードを#f4f4f4部分に入力することで、違う色に設定できます。

 

 

それでも反映されない場合は、セミコロン(;)の前に「!important」を入力しましょう。

 

これで反映されるはずです。

 

 

見出しと文字の間をあけたい

 

 

ペーストしただけだと、なぜか、見本よりも小さいことがあります。

 

これも調整していきましょう。

 

 

padding: 0.5em 0.4em !important;

この部分を調整していきます。

 

例えば、

  • 上下を調整したい場合:0.5em → 0.7em
  • 左右を調整したい場合:0.4em → 0.5em

 

このように調整すると、下の画像のように、見出しと文字の余白を広げることができます。

 

 

 

見出し内の文字の大きさを変更・固定したい

 

 

いざ見出しの中に文字を入力してみると、

「文字が小さい(大きい)…。」

なんてこともあります。

 

こんなときは、

 

 

 

 

 

もともと見出し内の文字の大きさが、薄い数字で書いてあります。

 

この値よりも少しだけ大きくしたりして、調整しましょう。

 

まずは、PC(パソコン)上だけの設定でOKです。

 

 

 

一旦設定が終わったら、忘れずに「save」を押しましょう。

 

 

 

確認して、まだ調整したいときは、再び「AFFINGER5管理」から設定すればOKです。

 

このときも、忘れずに「save」もしくは「保存」を押しましょう。

 

 

その②:「外観」→「カスタマイズ」から変更

 

悩んでいる人
追加CSSを使うのは面倒だし、難しそう…

 

こんな人は、「外観」→「カスタマイズ」でも、見出しの設定は可能です。

 

 

 

 

 

 

 

 

ボタンの押して、いろいろ試してみてください。

 

 

まとめ

 

AFFINGER5での、見出しの設定、調整方法について解説しました。

 

結論、時間はかかりますが、「追加CSSでの変更」の方が、自分が納得いく見出しを使えるようになりますね。

 

-AFFINGER5

© 2021 カレッジ・ルート Powered by AFFINGER5