全体設定

サイト全体のデザインを設定する(テーマカラー、デザインパターン、見出し2、見出し3、段落)

この記事は「初期設定まとめ」の2番目の記事です。前の記事はこちら「トップページのSEO設定とSNS設定

ここではAFFINGER6(アフィンガー6)のサイト全体のデザインを設定していきます。設定すべき箇所はたくさんありますが、その中でも一番最初に決めておくべき設定を紹介します。

デザインに関してはこれだけ設定しておけば他は後回しで大丈夫です!

ここで紹介する方法はまっさらな状態から自分で設定していく方法です。公式サイトにはAFFINGER6用のデザイン済みデータが公開されています(まだ1種類ですが)。気になる人はそちらを使う方法でも大丈夫です。データの種類が充実するまではまっさらな状態から設定していく方がいいと思います。

デザイン済みデータ配布ページ(β)【外部サイト】

サイト全体のテーマカラーとデザインパターンを決める

AFFINGERのいろんな着せ替え機能

最初はサイト全体のテーマカラーデザインパターンを決めます。AFFINGERには「着せ替え機能」といえばよいでしょうか、選ぶだけでそれなりの見栄えになるよういくつかのパターンが用意されています。まずは、このカラーパターンデザインパターンを決めましょう。設定場所はこちらです↓

ダッシュボード】→【AFFINGER管理】 → 【全体設定】> "サイト全体の設定"> "カラーパターン"、"デザインパターン"

カラーパターン全12種類デザインパターン全5種類あります。Saveサイトを表示で確認を繰り返してあなたの好みの組み合わせを見つけてください。

AFFINGERのカラーパターンとデザインパターンを決める

カスタマイズしていく上で原型はなくなっていきます。ここはそこまで神経質に選ぶ必要はないと思います。あくまで仮の設定だと思ってください。

文字に関する設定(見出し、段落)

ここからは文字に関する設定を行います。

準備作業

文字の設定に入る前に編集するのにちょうどいいページがあるのでそのページに移動しましょう。

基本文の見やすさチェック用ダミーページ(Gutenberg)】という固定ページです。次の場所に移動してください。ない場合は【基本文の見やすさチェック用ダミーページ】を代用します。

ダッシュボード】→【固定ページ一覧】 → "基本文の見やすさチェック用ダミーページ(Gutenberg)> プレビュー > 新しいタブでプレビュー > カスタマイズ

このページはAFFINGERをインストール後、自動生成されるページです。

編集画面に行ったらプレビュー、そしてカスタマイズを押してカスタマイズ画面を開きます。

基本文の見やすさチェック用ダミーページをプレビュー
基本文の見やすさチェック用ダミーページをカスタマイズ

ここで文字の設定を行います。

見出し(H2、H3)のデザインを決める

それでは文字の設定に入っていきましょう。まずは「見出し(H2)」と「見出し(H3)」のデザインを決めます。見出しは記事の柱になる重要な要素なので最初にデザインを決めましょう!

カスタマイズ画面の次の項目へ移動してください。

【カスタマイズ画面】→ "見出しタグ(hx) / テキスト" → "H2タグ"、"H3タグ"

H2タグのデザインを設定する

まず、ここで配色と"基本スタイル"(形)を決めます。特に決まりはないので好きなようにカスタマイズしてください

H2タグの色を変更する
H2タグのデザインを変更する

見出しのスタイル(デザイン)

見出しの基本スタイルをまとめたので参考にしてください。これに色を塗っていきます。

  • 見出しの基本スタイル(吹き出しデザイン):AFFINGER6
    吹き出し
  • 見出しの基本スタイル(囲み&左ラインデザイン):AFFINGER6
    囲み&左ラインデザイン
  • 見出しの基本スタイル(2色アンダーライン):AFFINGER6
    2色アンダーライン
  • 見出しの基本スタイル(グラデーションアンダーライン):AFFINGER6
    グラデーションアンダーライン
  • 見出しの基本スタイル(センターライン):AFFINGER6
    センターライン
  • 見出しの基本スタイル(囲みドットデザイン):AFFINGER6
    囲みドットデザイン
  • 見出しの基本スタイル(ストライプデザイン):AFFINGER6
    ストライプデザイン
  • 見出しの基本スタイル(破線アンダーラインデザイン):AFFINGER6
    破線アンダーライン
  • 見出しの基本スタイル(左ラインデザイン):AFFINGER6
    左ラインデザイン
  • 見出しの基本スタイル(チェック ボックスタイプ):AFFINGER6
    チェック(ボックスタイプ)

見出し2の設定が終わったら、同じ要領で見出し3も設定しましょう。

初心者のためのアドバイス!

ここで見出しのデザインのアドバイス!

見出しのデザインをどう設定していいかわからない人は参考にしてみてください。

スタイル(形)を統一

見出し2と見出し3のスタイルは同じにすると見やすいですよ。統一感が出て読みやすくなります。

色で差別化

スタイルだけ同じだと見分けがつかないので区別できるようにちょっと変化を加えてあげましょう。まずで差別化します。

配色するときは見出し2を濃ゆい色で、見出し3はそれより薄い色を使うといいです。色の濃さで見分けがつくようになります。

位置で差別化

また、位置で差別化もできます。

 見出し2の位置をずらして(左に寄せて)差別化しましょう。見出し2にデザインを幅一杯にするを適用ます(中央寄せをしていない場合)。こうすることで一目で見出し3より重要な要素として認識できます。

初心者のための見出しのデザイン例
スタイルを統一して、色と位置で差別化を行った例

段落(P)のデザインを決める

次に、段落(P)のデザインを決めます。本文にあたる部分ですね。

段落(P)のフォントサイズと行間を変更

まずは段落(p)のフォントの大きさ行間を変更しましょう。以下の設定箇所へ移動してください。

ダッシュボード】→【AFFINGER管理】 → "全体設定" > "フォントサイズ"

スマホ、タブレット、そしてPC閲覧時の"基本(Pタグ)"のサイズと、行間を設定します。いろいろ試してちょうどいいものを探してください。

ちなみに当サイトは次のような設定をしています。

段落(P)のフォントサイズを変更する

スマホ閲覧時の段落のフォントサイズはデフォルトで18px、行間は30pxになっています。これはちょっと大きいかもしれません。当サイトではサイズ16px行間27pxに設定しています。

また、PC閲覧時のフォントサイズですがデフォルトでは15pxになっています。このままでもいいですが当サイトではちょっと大きく16pxにしました(行間は変更していません)。ちなみにサイトのフォントサイズは16pxが一般的だそうです。

段落(P)の文字色を決める

最後に段落(P)の文字色を決めましょう。AFFINGER6ではデフォルトの文字色が#333333になっています。これはウェブで使われる一般的な文字色の一つです。特に変更する必要はないでしょう。

もし変更したい場合は以下の場所から変更できます。

ダッシュボード】 > 【外観】 >【カスタマイズ】 → "見出しタグ(hx) / テキスト" → "テキスト色一括変更"

色がうまく反映されない場合(AFFINGER側のバグ?)は"範囲を広げる"にチェックを入れてください。


以上で最初に行うべきサイト全体のデザイン設定は完了です。

以上「初期設定まとめ」の2番目の記事でした。次の記事はこちら「サイトアイコン(ファビコン)を設定する

-全体設定