こんにちは、専業ブロガーの孔雀です。
この記事では、AFFINGER5のデザイン部分（サイト全体の設定）のカスタマイズ方法について解説してみたいと思います。
この記事は、主に以下のような人をターゲットに書いています。
この記事を読むべき人
- AFFINGER5のデザイン部分をカスタマイズしたい人
- AFFINGER5のブログ全体のレイアウトをカスタマイズしたい人
- AFFINGER5のフォントのサイズと種類をカスタマイズしたい人
AFFINGER5の管理画面「デザイン」から簡単にカスタマイズする方法の解説です。
これはAFFINGER5のデザインの基本となる部分のカスタマイズなので、AFFINGER5のインストール後には必ず設定しておきましょう！
この記事を読むことで、AFFINGER5のデザイン部分の基本的なカスタマイズ方法がわかるようになります。
目次
AFFINGER5のデザイン部分（サイト全体の設定）のカスタマイズ方法
AFFINGER5のデザイン部分でいえば、下記で紹介する順番でカスタマイズしていけば誰でも簡単に設定できるかと思います。
このあたりの設定をまだいじっていないという方も、これを機会に一通りカスタマイズしておくことをおすすめします。
AFFINGER5のデザイン部分（サイト全体の設定）のカスタマイズは、「AFFINGER5管理」⇒「デザイン」からすべて行えます。
基本的なカラー（カラーパターンとデザインパターン）設定
上から順々にカスタマイズしていきましょう。
まずは、カラーパターンとデザインパターンです。
カラーパターンとは、ブロブのヘッダー、見出し、サイドバーのメニュー部分の色を変えるカスタマイズです。
そして、デザインパターンとは、見出しバナー、サイドバーのメニューバナーのデザインを変えるカスタマイズです。
それぞれ好きなものにチェックを入れて、「SAVE」をクリックすると反映させます。
ちなみに、当ブログでは「オレンジ（元気）」「フラット（シンプル）」を選択しています。
実際にブログに表示させながら一番合うものを選んでいけばいいと思います。
カテゴリーリンク（サイドバー）設定
次に、サイドバーに表示するカテゴリーリンクに簡易デザインを適応するカスタマイズです。
「サイドバーのカテゴリーリンクに簡易デザイン適応」にチェックを入れることで、以下のようなデザインに切り替わります。
カラーを設定すると、カテゴリーリンクの下線部分の色が変わります。
サイト全体のレイアウト設定
次に、ブログ全体のレイアウトをカスタマイズする方法です。
ここでは、以下のようなレイアウトに関するカスタマイズが可能です。
サムネイル画像設定
次に、記事一覧表示させた時のサムネイル（アイキャッチ）画像の表示設定です。
例えば、サムネイル（アイキャッチ）画像の表示を「正方形にする」から「丸くする」にすると、以下のように変化します。
その他、サムネイル（アイキャッチ）画像を右側に表示させたり、ポラロイド風にしたりできます。
抜粋設定
次に、抜粋記事の表示・非表示と、抜粋記事内に表示される文字数の設定です。
例えば、抜粋記事で表示される説明文の文字数を200文字に設定すると、以下のように抜粋記事内に表示される文字数が200文字になります。
その他、PCとスマホでの抜粋記事の表示・非表示の設定が可能です。
フォントのサイズ設定
次に、ブログ内のテキスト文字のフォントサイズのカスタマイズです。
要するに、ブログ内に表示されるテキスト文字の大きさを変更する設定になります。
「スマホ」「タブレット」「PC」の3つで表示された時のテキスト文字のフォントサイズを細かく設定することができます。
半透明になっている数字がデフォルトで設定されているピクセス数（px）になので、そこを基準に微調整していけばいいかと思います。
フォントの種類設定
次に、ブログ内のテキスト文字のフォントの種類を変更するカスタマイズです。
設定できるフォントの種類は下記の通りです。
これらのフォントを使って、ブログ内の各パーツ（サイト名、記事タイトル、見出しなど）のみで適応させるように設定することができます。
「Google Fonts（Googleフォント）」から取得したURLを使って、ブログ内のテキスト文字をGoogleフォントに適応させることもできます。
まとめ：AFFINGER5の使い方：デザイン部分（サイト全体の設定）のカスタマイズ方法
今回は、AFFINGER5のデザイン部分（サイト全体の設定）のカスタマイズ方法について解説してみました。
AFFINGER5のデザインの基本となる部分のカスタマイズは、「AFFINGER5管理」⇒「デザイン」のページですべて行えます。
AFFINGER5のインストールが済んだら、「カラーパターンとデザインパターン」くらいはまず必ず設定しておきましょう。
AFFINGER5の、その他のカスタマイズ方法については下記の記事をご覧ください。
