「Affinger」は、ブログもホームページも作れる高機能なワードプレスのテーマですが、初めて使う人にとっては、難易度が高め・・。
今回は、実際の画面を見ながら進めていただくために、サンプルページを作りました。
このページでは、実際のサイトを例に、Affingerのトップページの作り方を解説しています。
これから作る方はもちろん、カスタマイズでつまづいている方にも、参考になると嬉しいです。
※画像をクリックするとサンプルページが開きます。
このページで使っているサンプルサイトです。
ワードプレスとAffingerのテーマのインストールがまだの方は、先に済ませてくださいね。
それでは、さっそく始めましょう。
準備編：ヘッダーに表示する画像を用意します。
まずはじめに、正面の大きな画像＝ヘッダー画像から作っていきましょう。今回、サンプルで使っている画像のサイズは、横幅2200px、高さ1100pxですが、ぴったり同じじゃなくても大丈夫です。
海外のサイトですが日本語に対応しており、欲しい素材のキーワードを検索すると、複数のサイトから候補を一覧で表示してくれます。利用規約をよく読み、同意の上ダウンロードしてください。
O-DANのサイトはこちら。
ヘッダー画像をはじめ、画像の編集は、無料で使える「Canva（キャンバ）」が便利です。
初期の画面です。
こちらは、ワードプレスにログインをして、Affingerのテーマを入れたところです。
必要な設定を行う前は、このようにシンプルなデザインになっています。ここから中身を作成していきます。
本編：①ヘッダー画像を設定しましょう。
ヘッダー画像を設定する手順
本編②：ヘッダーの色を変えましょう。
ヘッダーの色を設定する手順
本編：④ウィジェットを設定しましょう。
ワードプレスのウィジェット機能を使うと、パーツを置くだけで自由なレイアウトが簡単に作れます。
ウィジェットの配置イメージです。
図の例では、オレンジで囲まれた「サイドバーウィジェットの枠」に、ウィジェットのパーツが入っています。
ウィジェットの設定画面の開き方
ウィジェットの設定は、以下の3ヶ所のどこからでも設定できます。
- ダッシュボード→外観→ウィジェット
- カスタマイズ→ウィジェット
- サイトタイトル→ウィジェット
- ダッシュボード→外観→ウィジェットの順に開く方法
２.カスタマイズ→ウィジェットの順に開く方法
3.タイトル→ウィジェットの順に開く方法
ウィジェットの設定画面の見方
ウィジェットの設定画面では、左半分に追加できるパーツが並んでいて、右半分は、ウィジェットを置く場所が書かれています。
本編：⑤ヘッダー画像の下に記事のスライダーを置く設定
サンプルのサイトでは、ヘッダー画像の下に新着記事のスライドが流れるようになっています。
ほかの記事もおすすめすることで、読者さんに「また読みに来よう。」と思われるためのアピールです。
新着記事のスライドを流す手順
- トップページを表示し、カスタマイズ→「ホームページ設定」の順にクリックします。
- 「固定ページ」を選択します。
- 固定ページの下の「ー選択ー」を「トップページ」にします。
- スライドショーが表示されていればOKです。
注※投稿記事にアイキャッチ画像を設定していないと画像は表示されません。