【作りたい完成イメージから選ぶ】Affingerトップページの作り方を図解

「Affinger」は、ブログもホームページも作れる高機能なワードプレスのテーマですが、初めて使う人にとっては、難易度が高め・・。

ゆるペン先生

ちなみに、Affingerの商品名は、バージョン5＝Wing、バージョン6＝Actionです。

今回は、実際の画面を見ながら進めていただくために、サンプルページを作りました。
このページでは、実際のサイトを例に、Affingerのトップページの作り方を解説しています。
これから作る方はもちろん、カスタマイズでつまづいている方にも、参考になると嬉しいです。

※画像をクリックするとサンプルページが開きます。

ワードプレスとAffingerのテーマのインストールがまだの方は、先に済ませてくださいね。

それでは、さっそく始めましょう。

準備編：ヘッダーに表示する画像を用意します。

クリックで拡大できます

まずはじめに、正面の大きな画像＝ヘッダー画像から作っていきましょう。今回、サンプルで使っている画像のサイズは、横幅2200px、高さ1100pxですが、ぴったり同じじゃなくても大丈夫です。

クリックで拡大できます

ヘッダー画像は、無料の写真素材サービスである「O-DAN（オーダン）」の素材を借りました。
海外のサイトですが日本語に対応しており、欲しい素材のキーワードを検索すると、複数のサイトから候補を一覧で表示してくれます。利用規約をよく読み、同意の上ダウンロードしてください。
O-DANのサイトはこちら。

クリックで拡大できます

ヘッダー画像をはじめ、画像の編集は、無料で使える「Canva（キャンバ）」が便利です。

Canva（キャンバ）のサイトは、こちら。

クリックで拡大できます

こちらは、ワードプレスにログインをして、Affingerのテーマを入れたところです。

必要な設定を行う前は、このようにシンプルなデザインになっています。ここから中身を作成していきます。

本編：①ヘッダー画像を設定しましょう。

• step.1

  

  クリックで拡大できます

  まず、タイトルの下に出てくる「サイトを表示」をクリックしてトップページを表示します。

• step.2

  

  クリックで拡大できます

  タイトルの左上の「カスタマイズ」を押し、設定メニューを開きます。

• step.3

  

  クリックで拡大できます

  一覧から「ヘッダー画像」をクリックします。

• step.4

  

  クリックで拡大できます

  「新規画像を追加」をクリックします。

• step.5

  

  クリックで拡大できます

  パソコンから画像をアップロードします。

• step.6

  

  クリックで拡大できます

  画像をアップロードしたら、右下の「選択して切り抜く」をクリックします。

• step.7

  

  クリックで拡大できます

  画像切り抜きの編集画面が表示されたら、なにもしないで、右下の「切り抜かない。」をクリックします。

• step.8



クリックで拡大できます

ヘッダー画像が表示されたら上にある「公開」ボタンを押して完了です。

ゆるペン先生

ヘッダー画像が表示されましたね！

本編②：ヘッダーの色を変えましょう。

クリックで拡大できます

ヘッダー画像の上にあるのが「ヘッダー」です。

ゆるペン先生

「ヘッダー」「ヘッダー画像」「ヘッダーエリア」など、似た名前が多いので混乱するかもですが・・何回も触っていると慣れるので、ゆっくり覚えていけば大丈夫です！

• step.1

  

  クリックで拡大できます

  タイトルの下に出てくる「サイトを表示」をクリックしてトップページを表示します。




• step.2

  

  クリックで拡大できます

  タイトルの左上の「カスタマイズ」を押し、設定メニューを開きます。




• step.3

  

  クリックで拡大できます

  一覧から、「全体カラー設定」をクリックします。

• step.4

  

  クリックで拡大できます

  Affingerの配色は「簡単設定」機能に依存しているため、簡単設定の4タイプのうち1つを選んで使います。4タイプの特徴は、次の項目で解説します。

  本編：③簡単設定の4タイプの特徴

  (1)全体的に反映：有効化すると反映箇所のカラー変更ができなくなります。

  

  この項目では、上段のキーカラー、メインカラーで設定した色が全体的に反映されます。
  Affingerは、一ヶ所づつこまか～～～く色を設定することができますが、全体的に反映を選んでいるときは、細かい色指定ができなくなります。

  (2)一部メニューのみに反映：有効化すると反映箇所のカラー変更ができなくなります。

  

  この項目では、上段のキーカラー、メインカラーで設定した色は、一部だけに反映されます。
  反映されていない部分は、それぞれの設定画面で個別に設定する必要があります。

  (3)初期値として設定：反映箇所のカラーは初期値として設定されます。

  

  この項目は、全体的に反映と同じに見えますが、主要部分以外の色は、自由に設定できます。

  (4)使用しない：管理画面で選択したカラーが初期値と反映箇所のカラーは初期値として設定されます。

  

  この項目では、キーカラーに色を設定していても反映されません。この項目では、ダッシュボードの中にある「Affinger管理」で設定した色が反映されます。Affinger管理は、次の項で詳しく解説しています。

  

  ゆるペン先生

  カスタマイズの簡単設定を使用しない場合は、Affinger管理機能から全体の配色を一括で設定できます。

  Affinger管理画面

  

  1. ダッシュボードのAffinger管理をクリック
  2. 全体設定をクリック
  3. カラーパターンを選択
  4. saveボタンで保存をすることで、設定できます。

• step.5



編集用とプレビュー用にブラウザを2つ開いておくことで、色の設定を簡単に確認できます。


ゆるペン先生
簡単設定を使うと、こんな風に一括で色の管理ができます。
• 

  赤

• 

  青

• 

  オレンジ