AFFINGER7のサイトデザイン設定｜カスタマイズ方法とおすすめ設定

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7のサイトデザインを整える基本

AFFINGER7のサイトデザインを整えるときは、最初から細かな部分まで変更する必要はありません。

まずはサイト全体のレイアウトやカラー、文字まわりを整え、その後にヘッダーやメニュー、サイドバーなどの各パーツを調整すると、全体をまとめやすくなります。

AFFINGER7では、主に以下のような項目を設定できます。

• サイト全体のレイアウト
• サイト全体のカラー
• トップページの表示
• ヘッダー・メニュー
• フォント・文字サイズ
• 余白・行間
• サイドバー・ウィジェット
• SNSボタンなどの各パーツ

必要な設定から少しずつ調整しながら、自分のサイトに合ったデザインに仕上げていきましょう。

サイト全体の基本設定

サイト全体のデザインを整える前に、まずはサイトの基本となる設定を確認します。

AFFINGER7では、サイトタイトルやサイトアイコンなどの基本情報に加えて、サイト全体のカラーやサイト幅なども設定できます。

サイトの基本情報を設定する

サイトタイトルやキャッチフレーズ、サイトアイコンなどは、WordPressの基本設定から変更できます。

AFFINGER7の設定を始める前に、サイトの基本情報を確認しておきましょう。

関連記事 サイトタイトルやサイトアイコンの詳しい設定方法は、以下の記事で解説しています。

サイト全体のカラーを設定する

サイトの印象を決める重要な設定のひとつが、サイト全体のカラーです。

AFFINGER7では、キーカラーやメインカラー、サブカラーなどを設定し、サイト全体の色をまとめて調整できます。

関連記事 サイト全体のカラー設定については、以下の記事で詳しく解説しています。

サイト幅を設定する

サイト幅を調整すると、記事本文やサイドバーの表示幅を変更できます。

パソコンでの見やすさだけでなく、サイトのレイアウトにも関わるため、トップページや記事の表示を確認しながら設定しましょう。

関連記事 サイト幅設定方法については、以下の記事で詳しく解説しています。

トップページをカスタマイズする

サイト全体の設定を整えたら、次にトップページの表示を確認します。

AFFINGER7では、トップページを固定ページに設定したり、記事一覧やおすすめ記事などの表示を調整したりできます。

トップページの表示を設定する

まずは、トップページに何を表示するかを決めます。

ブログ形式で最新記事を表示するほか、固定ページをトップページとして設定し、サイトの目的に合わせてレイアウトを整えることもできます。

トップページのレイアウトを整える

トップページでは、メインコンテンツとサイドバーの配置などを確認し、サイト全体のバランスを整えます。

特に、1カラム・2カラムのどちらにするかによってサイトの印象が大きく変わるため、実際の表示を確認しながら調整しましょう。

トップページに表示する内容を整理する

トップページには、サイトの目的に合わせて必要なコンテンツを配置します。

たとえば、以下のような項目を組み合わせると、訪問者が目的の記事を見つけやすくなります。

• メインビジュアル
• おすすめ記事
• 新着記事
• カテゴリーへのリンク
• プロフィール
• サイトの案内

トップページは情報を詰め込みすぎず、訪問者が次に見るページへ移動しやすい構成にすることがポイントです。

関連記事 トップページの設定については、以下の記事で詳しく解説しています。

ヘッダー・メニューをカスタマイズする

ヘッダーやメニューは、サイトを訪れた人が目的のページを探すために重要な部分です。

AFFINGER7では、ヘッダーの表示やグローバルメニュー、スマホ用メニューなどを細かく設定できます。

ヘッダーを設定する

ヘッダーでは、サイトタイトルやヘッダー画像、ナビゲーションなどの表示を調整できます。

サイト全体のデザインに合わせて、ヘッダーの表示やレイアウトを整えましょう。

ヘッダーの詳しい設定方法は、以下の記事で解説しています。

関連記事 ヘッダーの設定については、以下の記事で詳しく解説しています。

グローバルメニューを設定する

グローバルメニューは、サイト内の主要なページへ移動するためのメニューです。

「ホーム」「カテゴリー」「お問い合わせ」など、訪問者がよく利用するページを配置すると、サイト内を移動しやすくなります。

AFFINGER7では、WordPressのメニュー設定に加えて、AFFINGER管理からヘッダーメニューの表示方法なども設定できます。

スマホメニューを設定する

スマートフォンでは、PCとは異なるメニュー表示になります。

AFFINGER7では、スマホスライドメニューの表示やアイコンデザイン、下層メニューの開き方などを設定できます。

PCとスマホの両方で実際の表示を確認しながら、使いやすいメニューに調整しましょう。

関連記事 メニューの設定については、以下の記事で詳しく解説しています。

文字・余白をカスタマイズする

サイト全体のレイアウトを整えたら、文字の大きさや行間、余白などを調整します。

これらの設定は、記事の読みやすさやサイト全体の印象にも関わるため、実際の表示を確認しながら調整しましょう。

フォントサイズを設定する

AFFINGER7では、スマートフォン・タブレット・PCそれぞれの文字サイズや行間を設定できます。

画面サイズに合わせて文字の大きさを調整すると、デバイスが変わっても読みやすいサイトに仕上げられます。

行間・余白を調整する

文章が詰まりすぎている場合は、行間や段落、ブロック間の余白を調整します。

AFFINGER7では、AFFINGER管理やブロックエディターから、それぞれの余白や行間を設定できます。

関連記事 詳しい設定方法については、以下の記事で解説しています。

見出しのデザインを設定する

見出しは、記事の内容を整理して読みやすくするために重要な要素です。

AFFINGER7では、見出しのデザインをカスタマイザーなどから変更できます。

サイト全体のカラーやデザインに合わせて見出しを調整すると、統一感のあるページに仕上げられます。

見出しの詳しい設定方法は、以下の記事で解説しています。

関連記事 見出しの詳しい設定方法については、以下の記事で解説しています。

サイドバー・ウィジェットを整える

サイドバーには、サイト内の主要なコンテンツや目的のページへ移動できる項目を配置します。

AFFINGER7では、WordPressのウィジェット機能を使って、サイドバーに表示する内容を自由に組み合わせることができます。

サイドバーに表示する項目を設定する

サイドバーには、サイトの目的に合わせて必要なウィジェットを配置します。

たとえば、以下のような項目があります。

• プロフィール
• 検索
• カテゴリー
• 人気記事
• 新着記事
• おすすめ記事
• 広告

すべての項目を表示する必要はないため、訪問者が必要とする情報を優先して配置しましょう。

サイドバーの表示を確認する

サイドバーは、PCではサイトの主要な情報を補足する役割があります。

一方、スマートフォンでは表示位置や順番が変わるため、PCだけでなくスマートフォンでも確認しておくことが大切です。

不要なウィジェットを減らし、記事を読むときに邪魔にならない構成に整えましょう。

SNSボタン・プロフィールなどを設定する

サイト全体のレイアウトが整ったら、SNSボタンやプロフィールなどの各パーツを設定します。

AFFINGER7では、サイトの用途に合わせてSNS関連の表示やプロフィールなどを細かく調整できます。

SNSボタンを設定する

SNSボタンは、記事やサイトの情報をSNSで共有してもらうための導線として利用できます。

AFFINGER7では、SNSボタンの表示やデザインなどを設定できます。

関連記事 SNSボタンの詳しい設定方法については、以下の記事で解説しています。

なお、SNSボタンの背景色やアイコンの色は、カスタマイザーから変更できます。

プロフィールを設定する

プロフィールは、サイトの運営者やブログの内容を訪問者に伝えるための項目です。

サイドバーなどにプロフィールを配置する場合は、サイトのテーマや運営内容に合わせて、簡潔にまとめると見やすくなります。

関連記事 プロフィールの詳しい設定方法については、以下の記事で解説しています。

各パーツのデザインを整える

SNSボタンやプロフィールなどは、サイト全体のカラーや文字のデザインと合わせると、統一感が出ます。

必要なパーツだけを配置し、サイト全体が見やすくなるように調整しましょう。

関連記事 ウィジェットの詳しい設定方法については、以下の記事で解説しています。

AFFINGER7のサイトデザインで意識したいポイント

AFFINGER7は細かな部分までデザインを変更できますが、すべての設定を変更する必要はありません。

サイト全体のバランスを確認しながら、必要な部分だけを調整していきましょう。

スマートフォンでの表示を確認する

PCで見やすく設定しても、スマートフォンでは文字の大きさや余白、メニューの表示などが異なる場合があります。

設定を変更したら、PCだけでなくスマートフォンでも表示を確認しておきましょう。

色や装飾を増やしすぎない

サイトのカラーや装飾を増やしすぎると、かえって見づらくなることがあります。

メインカラーやアクセントカラーを決め、全体のデザインに統一感を持たせると、すっきりしたサイトに仕上がります。

必要な設定から少しずつ変更する

AFFINGER7は設定項目が多いため、最初からすべてを変更しようとすると、どこを設定したのかわからなくなってしまいます。

まずはサイト全体のレイアウトやカラー、文字まわりなど、基本的な部分から整えていきましょう。

その後、必要に応じてヘッダーやメニュー、サイドバーなどを調整すると、効率よくサイトデザインを仕上げられます。

まとめ！AFFINGER7のサイトデザイン設定｜カスタマイズ方法とおすすめ設定

AFFINGER7では、サイト全体のレイアウトやカラー、文字、ヘッダー、メニューなど、さまざまな項目をカスタマイズできます。

最初からすべてを変更するのではなく、まずは基本的なデザインを整え、必要に応じて細かな部分を調整していくとスムーズです。

サイトの表示を確認しながら、自分のサイトに合ったデザインに仕上げていきましょう。