- AFFIGER6（アフィンガー6）のトップページをおしゃれにカスタマイズしたい
- 初心者でも簡単に設定ができる方法が知りたい
- AFFIGER6（アフィンガー6）を導入前にカスタマイズ方法を知っておきたい
AFFINGER6（アフィンガー6）のトップページのこんな疑問にお答えしていきます。
この記事でわかること
- トップページのカスタマイズ方法
- おしゃれなトップページになる方法
AFFINGER6（アフィンガー6）はトップページのカスタマイズの自由度が高く細かな設定ができる強みがあります。
しかし、初心者には設定が少し難しいと思われがち・・・
このページでは初心者が簡単にカスタマイズできるように詳しく解説しています。
AFFINGER6（アフィンガー6）でおしゃれなトップページになるテクニックも解説していきますね。
AFFINGER6（アフィンガー6）トップページ完成モデル
今回カスタマイズするトップページの完成モデルはこちら▼
現在このサイトのトップページになっています。
手順
- 新着記事のスライドショーの作成
- おすすめ記事の作成
まずトップページを設定する前におしゃれにするための準備をしていきましょう！
トップページの見せ方のテクニックを解説していきます。
AFFINGER6（アフィンガー6）おしゃれなトップページにデザインするテクニック！
トップページをおしゃれに見せるにはどうしたらいいの？
トップページをせっかくカスタマイズするならおしゃれに見せたいですよね。
そこで、カスタマイズ前におしゃれにするテクニックをお試し下さい！
ポイント
- 色の配色を決めておく
- ヘッダー画像やアイキャッチを統一しておく
私は適当にヘッダーやアイキャッチを作っていたので作り変えはさすがに大変でした。
はじめから統一しておくと楽ですよ。
色の配色を決めておしゃれなトップページにしましょう
トップページをおしゃれにするポイントとして、色の配色を決めておくと統一感がうまれます。
見た目のよい配色バランスはベースカラー・アクセントカラー・サブカラーに分けて面積の比率を決めておくとまとめやすくなります。
私のサイトではこのような配色のバランスで作りました。
トップページの配色を参考にした書籍があるので興味のある方は読んでみてくださいね。
ヘッダー画像やアイキャッチを統一しましょう
ヘッダー画像は決めた配色に合わせて画像を作る、もしくは写真に合わせて配色を決めるなどすると一体感がでます。
同じヘッダー画像でも写真の色合いや配色のバランスで印象が変わってきますね。
このサイトを例にあげると
現在のヘッダー画像
上の画像前に作ったのはこちら▼
ボツにしたヘッダー画像
このヘッダーは決めた配色にソファのピンクが濃く、色のバランスが良くなかったですね。
アクセントカラーの茶色もアクセントになっていなかったので止めました。
同じくアイキャッチも同じテイストにするとまとまり良くみえますよ。
変更前のアイキャッチ
アイキャッチはそれぞれ納得のいくものでしたが、トップページに載せるとバラツキがあるように見えますね。
現在のアイキャッチ
変更後は同じテイストで作ってみました。トップページは全体にまとまりのある感じになったと思います。
色の配色やヘッダー画像・アイキャッチの統一など参考にしてみてくださね。
次はトップページの作成をしていきます。
AFFINGER6（アフィンガー6）トップページを作成しまょう！
トップページの作成前に準備しておきましょう。
- 見出しH3の設定の色やデザインを確認または再設定。
- おすすめ記事の設定で使う写真や画像をメディアにアップロードしておく。
カスタマイズに必要になりますので確認しておいてくださね。
カスタマイズはステップ１～10になります。
少し長くなりますが頑張って設定していきましょう！
固定のページを作成します
step
1固定のページの作成をしていきます。
『 固定ページ 』 → 『 新規作成 』
ページのタイトルはあなたの名前でOKです。
新着記事のスライドショーを作成しましょう
新着記事のスライドショーを作っていきます。
イメージはこちら▼
step
２新着記事の見出しを作ります。
見出し Ｈ３ → 『 新着記事 』
と記入します。
step
３記事のスライドショー作っていきます。
タグ → 記事一覧/カード → カテゴリ一覧（スライドショー）
html
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]
このようなコードがでていると思います。
プレビューで確認してみると
このようになっていればOKですね。
カスタマイズは表のコード『 ” 赤い文字 ” 』の箇所を変更してくださいね。
| st-catgroup cat | カテゴリーID |
| page | 読み込み数 |
| orderby | ID |
| child | 子カテゴリーの読み込み |
| slide | スライドショーのオン・オフ |
| slides_to_show | 列数の指定 |
| slide_more | 「続きを読む」文字の変更 |
| slide_more | 続きを読むのオン・オフ |
おすすめ記事を作成しましょう
おすすめ記事を作っていきます。
イメージはこちら▼
step
4おススメ記事の見出しを作ります。
ステップ2と同じくタイトルを付けます。
見出し Ｈ３ → 『 おススメ記事 』
と記入します。
step
５バナーボックスを作ります
タグ → レイアウト → PCとTab → 左右50％
そうするとバナーボックスが2つできますね。
step
6バナーボックスの中にカテゴリを作っていきます。
タグ → ボックスデザイン → バナー風ボックス → 基本
ボックスの中にコードが入りました。
このコードをカスタマイズしていきます。
カスタマイズは表のコード『 ” 赤い文字 ” 』の箇所を変更してくださいね
| st-flexbox url | タイトルのURL |
| title | タイトル |
| backgroud_image | タイトル画像の背景のURL |
| radius | 角を丸くする（10ぐらいがおすすめ） |
タイトル画像のURL
写真のURLをコピーし、固定ページに戻ります。
backgroud_image”〇”の所にURLを貼り付けます。
▼このような状態になった場合▼
そのまま 『 Ctrl + Z 』でURLに変換することができます。
タイトルの文字
タイトルとサブタイトルを入力。
プレビューすると
このように表示されます。
サブタイトルを入力しない場合はスペースは消しておきましょう。
スペースを消すとバランス良く表示されますよ。
step
7おすすめ記事を設定します
カード → 記事のID
『 クラッシックエディタ 』から『 カード 』を選びます。
カードをクリックするとコードが表示されます
| id | 記事のID |
| readmore | 『 続きを読む 』の表示 オン/オフ |
記事のID
記事のIDは記事一覧で見ることができます。
『ステップ7』を3回繰り返します。
右側（水色の枠）も同じように作りましょう
注）ボックス枠の中に「このテキストは最後に消してください（50％）」の文字は忘れずに消しておいてくださいね。
両方できあがりましたら、もう一段『ステップ6』からつくっていきます。
あともう少しです！頑張りましょう！！！
step
8記事の大きさを揃えましょう
さて、プレビューしみて下さい。
そうすると、記事の枠がずれていませんか？
タイトルの文字数で大きさに違いがでているようです。
できれば揃っている方が見た目もいいですよね。
揃え方はこちら▼
記事の枠の高さを変更します。
このページは「170」で設定していますが、合わない場合は調節してみて下さいね。
| pc_heifht | 170に設定する |
| readmore | 続きを読むはオフまたは「””」にする |
設定後、プレビューしてみましょう。
きれいに揃いました。
「続きをみる」は設定しない方がスッキリ見えるとおもいますよ。
step
9トップページを公開しよう！
パーマリンクの入力
最後に『 公開 』をクリックします。
固定ページは完成しました。
次は固定ページをトップページに設定しましょう！
トップページに設定から公開までしましょう
step
10固定ページの設定
WordPress管理画面 外観 → カスタマイズ
『 ホームページ設定 』をクリック。
- ホームページの表示を 『 固定ページ 』を選択
- 先ほど固定ページのタイトルを付けた「 home 」を選択
- 公開をクリック
お疲れさまでした！
これでトップページができあがりました。
→【AFFINGER6】５ステップでサイドバーにプロフィールカードを設定方法！
-
-
【AFFINGER6】5ステップでサイドバーにプロフィールカード設定方法！
続きを見る
まとめ｜アフィンガー６おしゃれなトップページにカスタマイズ｜初心者でも簡単に設定できる方法
アフィンガー6（AFFINGER6）おしゃれなトップページにカスタマイズで行った事
- トップページの色の配色や画像を統一
- 新着記事のスライドショーの設定
- おすすめ記事の設定
あｓ今回はおしゃれなトップページにカスタマイズする方法を解説しました。
アフィンガー6（AFFINGER6）はカスタマイズの自由度が高く細かな設定ができます。
読み手がおしゃれなトップページだと思うとサイトを覚えてもらえたり、読者になってもらえたりしてもらえます。
サイトの顔でもあるトップページ作りのお手伝いができればと考えています。
＼ ぽちっとしていただけると励みになります ／
▽ フォローまってます♪ ▽
にほんブログ村
