こんな方におすすめ
- AFFINGER5の記事タイトルをカスタマイズしたい
- 見出しのデザインを変えたい
今回は、AFFINGER5の記事タイトル&見出しのデザインをカスタマイズする方法について解説します。
AFFINGER5はCSSなしで簡単にデザインが変えられるので是非試してみてください。
AFFINGER5の記事タイトル&見出しをカスタマイズする
まずは、管理画面を開いてください。
次に『外観➡︎カスタマイズ➡︎各テキストとhタグ(見出し)を選択すると、以下のようになると思います。
![AFFINGER5の記事タイトル&見出しをカスタマイズする](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-箱部ブログ-1024x617.png)
- 記事タイトル
- H2タグ
- H3タグ
- H4&H5タグ
この4つを順番に解説します。
参考にしていただけると嬉しいです。
デザイン①:記事タイトル
まずは記事タイトルからです。
ちなみに僕の記事タイトルはこんな感じです。↓
![箱部ブログの記事タイトルデザイン](https://hakobublog.com/wp-content/uploads/2021/04/【AFFINGER5】記事タイトル見出しのデザインをカスタマイズする-1024x165.png)
このくらいならCSSなしでもAFFINGER5の設定でデザインを作ることができます。
それでは、カスタマイズの画面から「記事タイトル」クリックしてください。
![デザイン①:記事タイトル](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-箱部ブログ-1-edited-1.png)
まず、上の5つの項目で全体の色合いを設定できます。
文字や背景、枠線をそれぞれ選びましょう。
![記事タイトルの設定【タイトルの基本スタイル】](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-箱部ブログ-2-1024x860.png)
続いて、下の方にスクロールするとタイトルの基本スタイルの設定ができます。
画像の上の「◉」のところは一つ、下の「」のところは複数の選択ができます。
そして、次の項目では背景画像が選べます。
![記事タイトルの設定【背景画像】](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-【AFFINGER5】検索フォームのデザインをカスタマイズする方法-1024x670.jpg)
試しに以下の画像を設定してみました。
![記事タイトルの背景画像](https://hakobublog.com/wp-content/uploads/2021/04/bekky-bekks-ZiG6GmNlfeI-unsplash-edited-scaled-e1617365057501-1024x407.jpg)
するとこんな感じのデザインに…↓
![記事タイトルの背景画像設定後](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-【AFFINGER5】検索フォームのデザインをカスタマイズする方法-3-2-1024x275.png)
色合いの問題で見づらくなってしまいましたね…。
ただ、画像を上手に使えばオリジナルのデザインが作れるかもしれません。
そして、最後の「カスタマイザーのCSSを無効化」にチェックを入れると「追加CSS」に書き込まれた記事タイトルのCSSが無効になります。
記事タイトルのカスタマイズは以上です。
設定が完了したら、右上の「公開」をクリックすればサイトに反映されます。
デザイン②:H2タグ
続いてH2タグです。
僕のH2タグのデザインは以下の通りです。↓
![](https://hakobublog.com/wp-content/uploads/2021/04/【AFFINGER5】記事タイトル見出しのデザインをカスタマイズする-1-1024x112.png)
こちらのデザインも追加CSSなしで作りました。
それでは、「H2タグ」を開いてください。
H2タグも記事タイトルと同じような設定ですが、「H2タグの基本スタイル」という項目が少し違います。
![デザイン②:H2タグ](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-【AFFINGER5】検索フォームのデザインをカスタマイズする方法-2-1-1024x630.png)
「チェック(ボックスタイプ)デザインに変更」というスタイルが追加されています。
それ以外は基本同じなので、記事タイトルと同じように設定しましょう。
デザイン③:H3タグ
次はH3タグです。
僕のデザインはこんな感じ↓
![](https://hakobublog.com/wp-content/uploads/2021/04/【AFFINGER5】記事タイトル見出しのデザインをカスタマイズする-2-1024x103.png)
デザインは「H3タグ」からカスタマイズしましょう。
設定はおそらくH2タグと同じだと思います。
設定が完了したら「公開」をお忘れなく。^^
デザイン④:H4タグ&H5タグ
最後は、H4タグとH5タグです。
設定項目が少なく、どちらとも同じ設定なのでまとめて紹介します。
僕のH4タグは以下の通り。↓
![](https://hakobublog.com/wp-content/uploads/2021/04/【AFFINGER5】アーカイブをカスタマイズする方法【ウィジェット】-1-1024x99.png)
H5タグは使ったことがないのでデフォルトのままです。
それでは、「H4タグ」の設定を開いてください。
以下のような設定項目が表示されます。
![デザイン④:H4タグ](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-【AFFINGER5】検索フォームのデザインをカスタマイズする方法-1-1024x621.png)
色をカスタマイズする項目が6つ➡︎3つになりましたね。
サブカラーやグラデーションカラーがなくなりました。
![H4タグの設定](https://hakobublog.com/wp-content/uploads/2021/04/カスタマイズ-【AFFINGER5】検索フォームのデザインをカスタマイズする方法-12-1024x631.png)
下のスタイル設定も項目が減っていますね。
ちなみに、背景画像の設定項目はH2タグと同じでした。
まとめ
今回は、AFFINGER5の記事タイトル&見出しのデザインをカスタマイズする方法について、以下の4つを解説しました。
まとめ
- 記事タイトル
- H2タグ
- H3タグ
- H4&H5タグ
AFFINGER5を使うと見出しや記事タイトルのデザインが簡単にカスタマイズできますね。
まだAFFINGER5を使ってないという方はぜひこちらからどうぞ。↓
\ 稼ぐに特化したWordPressテーマ /
というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。
-
【裏技あり】AFFINGER5でFontAwesome5を使う方法
続きを見る