【AFFINGER6】最初にすべきデザイン設定・カスタマイズのおすすめを解説！

この記事では、AFFINGER導入後に、まず変更しておきたいデザイン部分の初期設定を簡潔にまとめてみました。

AFFINGERはカスタマイズする箇所が多すぎて何をすればいいのか分からない

AFFINGERのデザインカスタマイズを簡単に教えて欲しい

今回はこんな悩みにお答えします。

この記事ので分かること

AFFINGER6インストール後にすべき初期設定を解説：②デザインカスタマイズ編

以下がこれから解説するデザイン部分の初期設定リストです。

上記のデザインを変更することで、初心者でも十分おしゃれなブログデザインにすることができます！

①カラーパターンとデザインパターンを設定する

1-1：カラーパターンの変更

ここではカラーパターン（ページ全体の色設定）と、デザインパターン（ページ内パーツの色設定）を変更します。

AFFINGERでは、ブログ初心者でもすぐにブログを書き始められるように、一括でブログのデザインの設定ができるパターンがいくつか用意されています。

この設定使うことで、初心者でも一瞬でちゃんとしたブログデザインが設定できます。

まずはこのパターンを使用したデザインを用いてブログをを運営しながら、少しずつ自分の好みにブログデザインを変更していくのがおすすめです

色は今後、細かい箇所まで変更できるので、今は深く考える必要はありません。
まずは自分がなんとなく『いいな』と思ったデザインを選べばOKです。

個人的なおすすめは「グレー（ダーク）」もしくは「グレー（やさしい）」です。

パターンを変更したら、画面下方にある「SAVE」ボタンをクリックして反映します。

1-2：デザインパターンの変更

次にその下にある「デザインパターン」も設定しておきます。

このデザインパターンで変更できる箇所は以下です。

そんなに見た目が大きく変わる箇所ではないので、特にこだわりがなければ最初は「デフォルト（グラデーション横）」か「ブログ（初心者おすすめ）」でOKです。

パターンを変更したら、画面下方にある「SAVE」ボタンをクリックして反映します。

②サイト全体のレイアウト一括設定

サイト全体のレイアウト一括設定という箇所で、PCからサイトを閲覧した時の横幅の長さを設定できます。

おすすめとされているのは「アドセンス広告を２つ横並びで表示させた時に最適な幅である「1114px」と言われています。

入力箇所が２つありますので、どちらとも「1114px」を設定しておきましょう。

③フォントのサイズ・余白の変更

ここでは、ブログで表示されるフォントのサイズや、上下の余白を設定することができます。

以下の設定内容に変更しておきます。

フォントサイズや余白は好みの部分がありますが、読みやすいようにある程度しっかり空けておくと読みやすいと思います。

フォントの設定

次にフォントの設定をしておきます。

『フォントの種類』の箇所で好きなフォントがあれば変更しておきます。

おすすめは下記です。

font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

こちらをコピーして、『全体』と『記事タイトル』内にある『その他（優先）』の箇所にペーストします。

④アイキャッチ画像の有効化

AFFINGER6は、デフォルト状態だとアイキャッチが表示されません。

上記のアイキャッチ設定から

「アイキャッチ画像の表示を全ての記事で有効化する（デフォルトは上部）」
「アイキャッチ画像をタイトル下表示に変更する」

にチェックをいれておきます。

※スマホとPCそれぞれ設定箇所があるのでどっちも設定しておきます。

設定が完了したら「save」ボタンを押して変更を保存します。

次行う事：ブログ記事を書く

以上、AFFINGERでまず設定を変更しておきたいデザインカスタマイズをご紹介いたしました！

ブログの運営したての時にデザインに注力しすぎてしまうと、ブログを書く気力まで使い切ってしまう危険性もあるので、
最初はデザイン変更は必要最低限行って記事を書くことに注力しましょう！

でも、デザイン変更ってどんどんブログがを自分好みにできるので楽しいんですよね(笑)

当ブログではAFFINGERのデザインカスタマイズ記事もありますので気になる箇所があれば参考にしてみてください！
でもデザイン修正はほどほどに！

次回は実際にブログの書き方をご紹介いたします。

参考になれば幸いです。

今回は以上です。