「Affinger」は、ブログもホームページも作れる高機能なワードプレスのテーマですが、初めて使う人にとっては、難易度が高め・・。
今回は、実際の画面を見ながら進めていただくために、サンプルページを作りました。
このページでは、実際のサイトを例に、Affingerのトップページの作り方を解説しています。
これから作る方はもちろん、カスタマイズでつまづいている方にも、参考になると嬉しいです。
※画像をクリックするとサンプルページが開きます。
このページで使っているサンプルサイトです。
ワードプレスとAffingerのテーマのインストールがまだの方は、先に済ませてくださいね。
それでは、さっそく始めましょう。
準備編：ヘッダーに表示する画像を用意します。
クリックで拡大できます
まずはじめに、正面の大きな画像＝ヘッダー画像から作っていきましょう。今回、サンプルで使っている画像のサイズは、横幅2200px、高さ1100pxですが、ぴったり同じじゃなくても大丈夫です。
クリックで拡大できます
海外のサイトですが日本語に対応しており、欲しい素材のキーワードを検索すると、複数のサイトから候補を一覧で表示してくれます。利用規約をよく読み、同意の上ダウンロードしてください。
O-DANのサイトはこちら。
クリックで拡大できます
ヘッダー画像をはじめ、画像の編集は、無料で使える「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管理画面
- ダッシュボードのAffinger管理をクリック
- 全体設定をクリック
- カラーパターンを選択
- saveボタンで保存をすることで、設定できます。
step.5
編集用とプレビュー用にブラウザを2つ開いておくことで、色の設定を簡単に確認できます。
ゆるペン先生簡単設定を使うと、こんな風に一括で色の管理ができます。-
赤
-
青
-
オレンジ
本編：④ウィジェットを設定しましょう。
ワードプレスのウィジェット機能を使うと、パーツを置くだけで自由なレイアウトが簡単に作れます。
ウィジェットの配置イメージです。
図の例では、オレンジで囲まれた「サイドバーウィジェットの枠」に、ウィジェットのパーツが入っています。
ウィジェットの設定画面の開き方
ウィジェットの設定は、以下の3ヶ所のどこからでも設定できます。
- ダッシュボード→外観→ウィジェット
- カスタマイズ→ウィジェット
- サイトタイトル→ウィジェット
- ダッシュボード→外観→ウィジェットの順に開く方法
２.カスタマイズ→ウィジェットの順に開く方法
3.タイトル→ウィジェットの順に開く方法
ウィジェットの設定画面の見方
ウィジェットの設定画面では、左半分に追加できるパーツが並んでいて、右半分は、ウィジェットを置く場所が書かれています。
本編：⑤ヘッダー画像の下に記事のスライダーを置く設定
サンプルのサイトでは、ヘッダー画像の下に新着記事のスライドが流れるようになっています。
ほかの記事もおすすめすることで、読者さんに「また読みに来よう。」と思われるためのアピールです。
新着記事のスライドを流す手順
step.1
- ダッシュボードから「固定ページ」を開きます。
- 「新規固定ページ」を作成します。
- ページのタイトルを「トップページ」と入力します。
- 本文に「新着記事」と打ち込みます。
step.2
5.入力した「新着記事」の文字を【段落】から【見出し2】に変更します。
6.文字が装飾されます。
step.3
7.Enterキーで改行して、タグ→「記事一覧/カード」→「カテゴリ一覧（スライドショー）」の順にクリックすると、コードが挿入されます。
8.更新ボタンで保存します。
step.4
- トップページを表示し、カスタマイズ→「ホームページ設定」の順にクリックします。
- 「固定ページ」を選択します。
- 固定ページの下の「ー選択ー」を「トップページ」にします。
- スライドショーが表示されていればOKです。
注※投稿記事にアイキャッチ画像を設定していないと画像は表示されません。
