![](https://yodaredoriblog.com/wp-content/uploads/2020/10/AdobeStock_249424911-scaled.jpeg)
![](https://yodaredoriblog.com/wp-content/uploads/2021/01/42e38399f837884372eeb6be2a8975e2-e1610890019798-300x300.png)
アフィンガー5でトップページをオシャレにしたいけど、具体的にどんなことが出来るのかな?一から作り方を教えてほしいな!
こんな疑問に答えます。
アフィンガーは操作に慣れてしまえば、どんなデザインにも作り込むことが出来るクリエイティブなWordPressテーマ。初心者の人でもやりこむ覚悟のある人はどうぞw
導入方法はこちら>>【おすすめテーマ】10分で出来る!アフィンガー5の購入方法
本記事の信頼性
![](https://yodaredoriblog.com/wp-content/uploads/2021/02/JET-6.png)
本記事の内容
- アフィンガーのトップページをオシャレにするやり方
- まとめ:パーツの組み合わせでオリジナリティを出そう
ブログのトップページは、サイトの顔とも呼べる重要な要素です。
基本を覚えてアフィンガー5を使いこなすことが出来れば、誰が見ても完成度の高いサイトを簡単に製作できます。
完成イメージ
- 読者の人が読みやすい
- オシャレ
- 印象に残る
こんなトップページを作っていきましょう。
目次
アフィンガーのトップページをオシャレにするやり方
今回、作るトップページはこんなかんじ
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/0fe95212aa1a49eaad721a47ccd9b04c.jpg)
このページは、下記の3つパーツで構成されています。
- ヘッダーカード
- スライドショー
- バナー風BOX
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/70b5097cc5bbb9ab08ac00a8581304fe.jpg)
それでは、ひとつずつ説明していきます。
ヘッダーカードの作り方
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/5acce4869b10de775a821c7eef10d1d3.jpg)
step
1AFFINGER5管理→おすすめ記事一覧の順にクリック
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/fa2f2885db26caac8eed6e56debfb033.jpg)
step
2おすすめヘッダーカードの各項目を入力
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/0a7d94247ddd2c29ebe4698a92956399.jpg)
- まずは画像を選択
- 次に表示させるテキストを入力
- そして、クリックしたときのリンク先を設定します。
今回はカテゴリーで分けていくので、カテゴリ別のリンク先を貼り付けます。
リンク先はカテゴリ一覧にしていますが、ここは人それぞれ読んでほしいオススメ記事とかにしてもいいですね。
![](https://yodaredoriblog.com/wp-content/uploads/2020/12/IMG_8805-2-e1608991048560-300x290.png)
一番目立つところだから、有効に活用しよう!
※当ブログはテキストの前にアイコンを入れています。
アイコンを入れる方法はこちら>>コピペでOK!アフィンガー5でメニューにアイコンを表示させる方法
step
3デザインをカスタム
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/fca062d2ab347db4fe9ca5b50c873aba-scaled.jpg)
いまはこんな感じになっているんですが、少し味気ないのでカスタムします。
※ちなみに最大4枚設定することが可能で、見た目のバランスを考えても4枚全て設定することをオススメしてます。
それでは、細かい設定をしていきます。
下記が設定出来る項目です。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/fa44743c54a4c19d6bda12654dce63e1-1024x355.png)
今回は
- 文字を少し見やすくする
- 他と差別化する
この2点の理由から、ぼかしにチェックを入れておきます。
するとこんな感じになります。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/400867f5d1d084dbc3875177d6a95b42-scaled.jpg)
ぼかしが入ることにより、文字が見やすくなりました。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/b27f4151f23275cc951acfe3e745c9a8-scaled.jpg)
マウスのポインターをのせると元の画像に戻ります。
デザインをいろいろ試して、自分好みにカスタマイズしてみてください。
スライドショーと見出しをつける
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/5f49868e1a1293e5e2b7e1223e576d94.jpg)
続いてこの四角で囲った範囲を作っていきます。
※ブログには記事ページと固定ページがありますが、トッッページの作成は固定ページを使っておこないます。
step
1管理画面から固定ページ→新規作成をクリック
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/419ccd66a423ee19cbef5a6da972a30b.png)
まずはWordPressの管理画面から、固定ページ→新規作成をクリック
ちなみにテキストエディタはGutenberg(グーテンベルク)を使って説明していきます。
※テキストエディタとは文字入力ソフトのことです。WordPressには、クラシックエディタ(プラグイン)とグーテンベルクの2種類がありますが、クラシックエディタ(プラグイン)は2021年12月31日をもってサポートが終了してしまいます。なのでこれから始める方は、グーテンベルクで覚えていきましょう。ちなみに、最近WordPressをインストールされた人の場合は、デフォルトでグーテンベルクになっています。
step
2見出しをH3で作成
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/70080e57fed84605cddeac8566ac9c21-1024x658.png)
まずはスライドショーの前にH3見出しをつけます。なんでもいいのですが、今回は「新着記事」にしておきます。
step
3フォーマット→クラシックを選択
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/281c504e5d1c256a44e8cb61dbe09b51-1024x522.jpg)
- +をクリック
- フォーマット
- クラシックを選択(こちらはプラグインではありません)
スライドショーを作るためには、クラシックにする必要があります。
step
4「タグ」→「記事一覧」→「カテゴリ一覧」
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/a9a7b1ba7e8bc56c983b28e3622723ed.png)
「タグ」→「記事一覧」→「カテゴリ一覧」の順にクリック。
するとこのように、ショートコードと呼ばれるものが表示されます。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/cdfb5805cd19be88f90f427e2edb38c1.png)
ここで一度、プレビューで確認してみましょう。
するとこんな感じ
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/ab417758f79b9b4b2fd1ddc3f0941f50-1024x910.jpg)
これだけで、もうスライドショーの完成です。
![](https://yodaredoriblog.com/wp-content/uploads/2020/12/IMG_8805-2-e1608991048560-300x290.png)
とっても簡単だね!
でもせっかくなので、ショートコードの説明もかねて少しカスタマイズしてみましょう。
各コードの内容はこちら
- st-catgroup cat="カテゴリID指定"
- page="読み込むページの枚数"
- order="並び順(新⇄古)"
- orderby="並び順(何を基準に並べるか)"
- child="子カテゴリーの読み込み"
- slide="スライドショーのオンオフ"
- slides_to_show="列数の指定"
- slide_more="続きを読むボタンの表示文字"
- slide_center="スマホ表示時の見え方"
- fullsize_type="表示の内容"
st-catgroup cat
表示させたいカテゴリIDを設定できます。
カテゴリIDは下記から確認できます。
「投稿」→「カテゴリー」の順にクリックして、四角で囲ったところがカテゴリIDになります。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/50db2bd8079f7b702df2471961256bc4-scaled.jpg)
page
読み込むページの枚数を変えることができます。
デフォルトでは"5"になっているので、とくにこだわりが無ければこのままでOK。
order
並び順を設定できます。
記事の順番を
- 新しい順=desc
- 古い順=asc
で設定できます。
orderby
何を基準で並べるか変更できます。
- id:投稿ID
- none:なし
- rand:ランダム
- title:タイトル
- date:日付
- modified:更新日
こちらも、とくにこだわりがなければ、デフォルトの"ID"のままでOK。
child
子カテゴリーを読み込むか。
こちらも"on"のままでOKです。
slide
スライドショーの"on"と"off"を切り替えれます。
スライドショーを作っているので、もちろん"on"です。
slides_to_show
表示する列数を指定できます。
"3,3,1,"となっていて、ざっくり"パソコン,タブレット,スマホ"のイメージでOKです。
なので最初の数字を3→5に変更して"5,3,1,"にすると下記のようにパソコンでみた時に5列になります。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/e386ad978542bfd9143726043052014e.jpg)
slide_date
日付の表示をするかしないか、「on」 と「off」で選べます。
slide_more
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/07568452b9bc44650f34403f940a39a7.jpg)
続きを読むボタンの文字を変更できます。
デフォルトでは「ReadMore」ですが、分かりやすく「続きを読む」や「もっと詳しく」に変えてみるのもいいでしょう。
slide_center
スマホで表示したときに、前後の記事を少し見せるかどうかを設定できます。
"on"=前後の記事が少し見える。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/IMG_8268.jpg)
"off"=前後の記事が見えない。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/IMG_8267-614x1024.jpg)
こちらも気に入った方を選んで見てください。
fullsize_type
表示する内容を選べます。
・""=全て表示
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/3cd6bde178d14cbed567d9f8bc3dd49e-1024x523.jpg)
・"text"=画像+タイトル
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/75745c0626701c42bc28160838fe1b6e-1024x350.jpg)
・"card"=画像のみ
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/170a145c3c6f49ad95dc5d2b572bea33-1024x297.png)
以上がカスタマイズできる項目になります。
上記の中から
- st-catgroup cat="カテゴリ指定"
- slide_more="続きを読む"
この2箇所を変更してみます。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/69bf3079c36148f2b724c0c31e48ef3b.png)
するとこんな感じに
これでスライドショーの完成になります。
上記を参考に、いろいろとカスタマイズしてみてください。
バナー風ボックスの作り方
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/43ccd0ba20a42815aaff6dbe0a660c3f-930x1024.jpg)
それでは、四角で囲った部分を作っていきます。
このように、パソコンで見たとき2列のレイアウトになるよう設定していきます。
step
1見出しをH3で作成
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/6a3429668ebce4e0ea8977d85011552c.jpg)
バナー風BOXの前に、H3で見出しをつけます。
今回は「おすすめ記事」にしておきます。
step
2フォーマット→クラッシックを選択
step
3「タグ」→「レイアウト」→「PCとTab」→「左右50%」
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/6e0a9d73562540a6456174c93e97c6fd-1024x682.png)
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/c900719645b50f704452cbb6abbe7266.png)
これで準備OKです。
step
4「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/2ee12a84cbebe17c0e3a9ba2178b62a8-scaled.jpg)
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/60ba68aa0a16d1f1b1a1f331d9538928.png)
するとこのようなショートコードが表示されます。
この中で四角で囲った2箇所
- title="タイトル"
- backgroud_image="背景画像のURLを入力"
を変更して、このようなバナー風ボックスを製作していきます。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/f583c946e704e5acb827538aa21d591e.jpg)
step
5タイトルを変更
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/1faa09deb07b91773c047397e4e77620-scaled.jpg)
title=「"」ここに入力「"」
入力する場所を間違えないように注意しましょう。
これでタイトルの変更は完了です。
step
6「メディア」→「ライブラリ」の順にクリック
次に背景の画像を挿入していきます。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/d57fd50dc426e2ac884001fb15f3a193-scaled.jpg)
step
7画像を選んでURLをコピー
背景画像にしたいものを選んで、右下にあるURLをコピー
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/a38a99055f085b24ce0406b6da1e42f0-scaled.jpg)
step
8URLを貼り付け
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/7846ad81fb76eb5a1bcc9633982b6a35.png)
backgroud_image=「"」ここにURLを貼り付け「"」
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/0ba537050d475056020f4e64741a19b7-scaled.jpg)
貼り付け後に、勝手に画像になってしまう場合は「Ctrl+Z」を押すとURL表記に戻せます。
もしそれでも戻らない場合は、コピーの際に最初の「https〜」の「h」を外して「ttps〜」からコピーして、貼り付けた後に「h」を戻せば解決できます。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/948e92cbff931d9ec69ac66a332939eb-scaled.jpg)
ブログカードを設定する
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/e14a9abd34d8ab44c4804be176414bb7.jpg)
バナー風ボックスの下にあるブログカードを設定していきます。
step
1AFFINGER5管理→デザイン
まずは管理画面の設定をしていきます。
AFFINGER5管理→デザインの順にチェック
step
2計5箇所にチェックを入れる
デザインの中の「サムネイル画面設定」「抜粋設定」から下記の通りチェックを入れる。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/d56313d969d14df7bf75e3d8b3add5d9-scaled.jpg)
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/c6dda7c2c641eff9dd07a998033743e5-scaled.jpg)
step
3「カード」→「記事id」を入力
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/c5be15d0c5482ff1cf5c3ad9c934a8f1-scaled.jpg)
固定ページに戻り
- 「カード」をクリック
- 表示されたショートコードの「id=""」に表示させたい記事idを入力
※記事idは「投稿」→「投稿一覧」から確認できます。
まとめ:パーツの組み合わせでオリジナリティを出そう
以上がアフィンガー5の基本的なカスタマイズ方法になります。
あとはやりながら
- スライドショーを自分好みにカスタマイズしたり
- バナー風ボックスの数を増やしてみたり
いろいろ設定を変えて、試しながら覚えていきましょう。