【初心者でも簡単】アフィンガー5のカスタマイズ方法 | 記事ページ編

こんにちは、えり（@eridoma_mogu2）です。

記事ページの画面のカスタマイズってどうしたらいいの？

この記事では、記事ページに表示される項目のカスタマイズを上から順に画像で解説します。

トップページのカスタマイズ方法はこちら↓

カテゴリータグのカスタマイズ方法

上記黄色枠で表示されているカテゴリのデザインやカラーも変更できます。
以下の手順で変更しましょう。

外観　→　カスタマイズ　→　各テキストとhタグ（見出し）　→　カテゴリ

「背景色」「文字色」「角を丸くする」の3つの設定ができます。

記事タイトルのデザインのカスタマイズ方法

黄色枠で表示している記事タイトルは、以下の要領でデザイン変更できます。

外観　→　カスタマイズ　→　各テキストとhタグ（見出し）　→　記事タイトル

「タイトルの基本スタイル」の項目から好きなデザインを選びましょう！
デザインによって、要背景色だったり要ボーダー色を設定する必要があります。
デザインやカラーを設定したら、「公開」を押すのを忘れないように！

タイトルの下にアイキャッチ画像を表示させる方法

初期状態では、アイキャッチ画像がタイトルの上に表示されます。

上記画像のように、アイキャッチ画像をタイトルの下に表示させたい場合には、以下の設定をしましょう。

AFFINGER管理　→　AFFINGER管理　→　投稿・固定記事

「アイキャッチ画像をタイトル下表示に変更する」にチェックいれます。
これで、OKです。

もくじの設定方法

私が設定している上記のもくじは、プラグインを入れることで簡単に付けられます。

「Table of Contents Plus」というプラグインを入れましょう。

インストール後に「有効化」して、下記の設定をします。

設定　→　TOC+

当ブログでは、上記のように設定しています。

自分の好みにあわせて設定してみてください♪

見出しデザインのカスタマイズ方法

上記の見出しデザインは、以下の要領で変更できます。

外観　→　カスタマイズ　→　各テキストとhタグ（見出し）

H2タグ・H3タグ・H4タグ・H5タグをそれぞれ設定します。

上記のように、確認しながら設定するのがおすすめです。

書く人や記事内容にもよりますが、使うのはH2タグとH3タグかなぁと思います。
H4タグとH5タグはあまり使わないかな？

ちなみに私は、以下のデザインにしています。

フォントのカスタマイズ方法

フォントのサイズは以下の要領で変更できます。

AFFINGER管理　→　AFFINGER管理　→　デザイン

下のほうにスライドすると「フォントのサイズ」欄があります。

当サイトでは、上記のサイズに設定しています。

吹き出しのカスタマイズ方法

ここでは、吹き出しアイコンの設定と吹き出しの背景色の設定について解説します。

吹き出しアイコンの設定方法

吹き出しアイコンの設定は以下の要領でできます。

AFFINGER管理　→　AFFINGER管理　→　会話・ファビコン等

「会話風アイコン」の設定欄に画像をアップロードすることで設定できます。

アイコン名は、入力すると吹き出しにした際にアイコンの下に表示されます。
不要な方は入れなくてOK！

吹き出しの背景色の設定

吹き出しの背景色は、以下の要領で変更できます。

外観　→　カスタマイズ　→ 　オプションカラー　→　会話風吹き出し

設定した吹き出しの数だけ設定したらOKです。

文字が読みにくくなるので薄いカラーがおすすめ

統一感を出すために吹き出しすべて同じ色にしてもイイかもしれません。

サイドバーの新着記事を非表示にする方法

サイドバーに新着記事が表示されてジャマだなー？って思いません？
消せます！

ちなみに、トップページのサイドバーを消す方法はこちらに記載しています　↓

それでは、さっそく以下の方法でサイドバーの新着記事表示を消しましょう。

AFFINGER管理　→　AFFINGER管理　→　トップページ

記事一覧の「下層ページのサイドバーの新着記事一覧を非表示にする」にチェックを入れましょう。
これで、表示されなくなります。

まとめ

以上の設定をしたら、記事ページも見やすくなると思います！

トップページのカスタマイズがまだって方は、以下の記事を参考にやってみてくださいね♪