AFFINGER6

AFFINGER6(アフィンガー6)おしゃれなトップページにカスタマイズ|初心者でも簡単に設定できる方法

  • AFFIGER6(アフィンガー6)のトップページをおしゃれにカスタマイズしたい
  • 初心者でも簡単に設定ができる方法が知りたい
  • AFFIGER6(アフィンガー6)を導入前にカスタマイズ方法を知っておきたい

AFFINGER6(アフィンガー6)のトップページのこんな疑問にお答えしていきます。

この記事でわかること

  • トップページのカスタマイズ方法
  • おしゃれなトップページになる方法

AFFINGER6(アフィンガー6)はトップページのカスタマイズの自由度が高く細かな設定ができる強みがあります。
しかし、初心者には設定が少し難しいと思われがち・・・

このページでは初心者が簡単にカスタマイズできるように詳しく解説しています。
AFFINGER6(アフィンガー6)でおしゃれなトップページになるテクニックも解説していきますね。

\気になるWordPressテーマ/

AFFIGRE6を詳しく見る

※クリックすると公式サイトへ移動します

AFFINGER6(アフィンガー6)トップページ完成モデル

今回カスタマイズするトップページの完成モデルはこちら▼

現在このサイトのトップページになっています。

 

手順

  • 新着記事のスライドショーの作成
  • おすすめ記事の作成

まずトップページを設定する前におしゃれにするための準備をしていきましょう!

トップページの見せ方のテクニックを解説していきます。

AFFINGER6(アフィンガー6)おしゃれなトップページにデザインするテクニック!

トップページをおしゃれに見せるにはどうしたらいいの?

トップページをせっかくカスタマイズするならおしゃれに見せたいですよね。


そこで、カスタマイズ前におしゃれにするテクニックをお試し下さい!


ポイント

  • 色の配色を決めておく
  • ヘッダー画像やアイキャッチを統一しておく

私は適当にヘッダーやアイキャッチを作っていたので作り変えはさすがに大変でした。
はじめから統一しておくと楽ですよ。



色の配色を決めておしゃれなトップページにしましょう

トップページをおしゃれにするポイントとして、色の配色を決めておくと統一感がうまれます。
見た目のよい配色バランスはベースカラー・アクセントカラー・サブカラーに分けて面積の比率を決めておくとまとめやすくなります。

 

私のサイトではこのような配色のバランスで作りました。

トップページの配色を参考にした書籍があるので興味のある方は読んでみてくださいね。

 



ヘッダー画像やアイキャッチを統一しましょう

ヘッダー画像は決めた配色に合わせて画像を作る、もしくは写真に合わせて配色を決めるなどすると一体感がでます。
同じヘッダー画像でも写真の色合いや配色のバランスで印象が変わってきますね。

このサイトを例にあげると


現在のヘッダー画像

上の画像前に作ったのはこちら▼

ボツにしたヘッダー画像

このヘッダーは決めた配色にソファのピンクが濃く、色のバランスが良くなかったですね。
アクセントカラーの茶色もアクセントになっていなかったので止めました。


同じくアイキャッチも同じテイストにするとまとまり良くみえますよ。

変更前のアイキャッチ

アイキャッチはそれぞれ納得のいくものでしたが、トップページに載せるとバラツキがあるように見えますね。

現在のアイキャッチ

変更後は同じテイストで作ってみました。トップページは全体にまとまりのある感じになったと思います。



色の配色やヘッダー画像・アイキャッチの統一など参考にしてみてくださね。

次はトップページの作成をしていきます。



AFFINGER6(アフィンガー6)トップページを作成しまょう!

トップページの作成前に準備しておきましょう。

  • 見出しH3の設定の色やデザインを確認または再設定。
  • おすすめ記事の設定で使う写真や画像をメディアにアップロードしておく。



カスタマイズに必要になりますので確認しておいてくださね。

カスタマイズはステップ1~10になります。
少し長くなりますが頑張って設定していきましょう!



固定のページを作成します

step
1
固定のページの作成をしていきます。


『 固定ページ 』 → 『 新規作成 』





ページのタイトルはあなたの名前でOKです。


新着記事のスライドショーを作成しましょう

新着記事のスライドショーを作っていきます。
イメージはこちら▼

step
新着記事の見出しを作ります。


 


見出し H3  → 『 新着記事 』


と記入します。



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=""]

このようなコードがでていると思います。
プレビューで確認してみると

スキンケア

2023/3/27

オルビスアンバーは60代用なの?40代・50代には効果なし?ヴァイタルトリートメントクリームの口コミとレビューで解説!

オルビス アンバー はエイジングブランドケアとして2023年2月に発売されました。 60代を中心とする大人世代に作られたオルビスヴァイタルトリートメントクリーム の効果を口コミとレビューで検証します。 オルビス アンバー  オルビスヴァイタルトリートメントクリーム は1つで6役のオールインワンクリームです。 有効成分を配合した医薬部外品。 シワ改善・美白効果のナイアシンアミドとハリとやわらかさをサポートしてくるコラーゲンコンプレックスSPが大人世代の悩みにアプローチ。 私が実際に使った感想はしっとり・ふっ ...

ReadMore

スキンケア

2023/3/19

アテニアクレンジングオイルの口コミは悪いの?乾燥肌の私が実際にお試しし検証!

アテニアクレンジングオイルはお肌が暗く見えるなどの古い角質によるくすみ原因を取り除いてくれるクレンジング。 塗れた手、W洗顔不要、ウォータープルーフ、まつエク全部OK!使い勝手がよくメイクもスッキリ。 40代50代はお肌も変化に気付きやすい年齢。 こんなことありませんか? アテニアクレンジングオイルは40代50代の人や敏感肌・乾燥肌の人・時間がなくて手軽にメイクを落としたい人におすすめの商品です。 リンク アテニアクレンジング|スキンクリアクレンズオイルの特徴 商品名 アテニアスキンクリアクレンズオイルア ...

ReadMore

スキンケア

2023/3/27

IPSA(イプサ)ザ・タイムR アクアはどこで買える?売っている場所や通販サイトはココ!

化粧水IPSA(イプサ)ザ・タイムR アクアは年代を超えて人気な商品です。 そんな疑問にお答えしていきます。 結論から申し上げますと、 IPSA(イプサ)ザ・タイムRアクアはデパート・百貨店で取扱っています。 通販サイトでの取扱いもありますが、偽物では?と思う人は取扱店舗または公式サイトより購入が安心。 取扱店舗・公式サイトと通販サイトのメリット・デメリットも紹介します。 リンク IPSA(イプサ)ザ・タイムR アクアの売っているところは? IPSA(イプサ)取扱販売店はデパート・百貨店です。 上記以外に ...

ReadMore

スキンケア

2023/3/27

40代50代には効果なし?IPSA(イプサ)化粧水口コミやレビューで徹底解析!

40代50代になると肌のトラブルなど多くありませんか? 乾燥で潤いがない・肌荒れ・肌のハリがなくなった・・・など。 スキンケアでなんとかしたいと思いますよね。 IPSA(イプサ)ザ・タイムRアクアは化粧水の中でも人気の商品です。 結論から申します。40代50代にもIPSA(イプサ)ザ・タイムRアクアを使ってもらいたい。 こんな人におすすめ でもIPSA(イプサ)ザ・タイムRアクアって若い人に人気な商品なんじゃ・・・ IPSA(イプサ)ザ・タイムRアクアが40代50代にも効果があるのか?口コミやレビューで解 ...

ReadMore

おすすめ

2023/3/9

本格的なだし作りに最適!久世福商店風味豊な万能だし口コミ・レビュー

万能だしは久世福商店の中でも人気の商品でかつお節ベースにしただしです。 6種類の風味原料を使っており、化学調味料・保存料不使用で安心、無添加のだし汁。 久世福商店の「万能だし」なら風味もよく本格的なだし汁が簡単に作ることができます。 だしパックで手軽に作れますが、顆粒だしのようにはいかず少しの手間がかかります。 万能だしの使うメリット・デメリットは 使い終わっただしパックでおにぎりの作り方も紹介していますよ。 万能だしは5・15・30包と3種類。 お試し・贈り物・普段使いにと目的に合わせて購入することもで ...

ReadMore

このようになっていればOKですね。



カスタマイズは表のコード『 ” 赤い文字 ” 』の箇所を変更してくださいね。

st-catgroup catカテゴリーID
page読み込み数
orderbyID
child子カテゴリーの読み込み
slideスライドショーのオン・オフ
slides_to_show列数の指定
slide_more「続きを読む」文字の変更
slide_more続きを読むのオン・オフ


おすすめ記事を作成しましょう

おすすめ記事を作っていきます。
イメージはこちら▼

step
4
おススメ記事の見出しを作ります。



ステップ2と同じくタイトルを付けます。

 

見出し H3  → 『 おススメ記事 』


と記入します。

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

記事のIDは記事一覧で見ることができます。



『ステップ7』を3回繰り返します。


右側(水色の枠)も同じように作りましょう
注)ボックス枠の中に「このテキストは最後に消してください(50%)」の文字は忘れずに消しておいてくださいね。


両方できあがりましたら、もう一段『ステップ6』からつくっていきます。

あともう少しです!頑張りましょう!!!

step
8
記事の大きさを揃えましょう




さて、プレビューしみて下さい。


そうすると、記事の枠がずれていませんか?

 


タイトルの文字数で大きさに違いがでているようです。


できれば揃っている方が見た目もいいですよね。
揃え方はこちら▼


記事の枠の高さを変更します。
このページは「170」で設定していますが、合わない場合は調節してみて下さいね。


pc_heifht170に設定する
readmore続きを読むはオフまたは「””」にする

設定後、プレビューしてみましょう。

きれいに揃いました。

「続きをみる」は設定しない方がスッキリ見えるとおもいますよ。

 

step
9
トップページを公開しよう!

パーマリンクの入力

パーマリンク名は『 home 』と入力しましょう

 

最後に『 公開  』をクリックします。

 

 

固定ページは完成しました。
次は固定ページをトップページに設定しましょう!



トップページに設定から公開までしましょう

step
10
固定ページの設定

 

WordPress管理画面 外観  →  カスタマイズ



『 ホームページ設定 』をクリック。

 

  1. ホームページの表示を 『 固定ページ 』を選択
  2. 先ほど固定ページのタイトルを付けた「 home 」を選択
  3. 公開をクリック


お疲れさまでした!
これでトップページができあがりました。



【AFFINGER6】5ステップでサイドバーにプロフィールカードを設定方法!

合わせて読みたい
【AFFINGER6】5ステップでサイドバーにプロフィールカード設定方法!

続きを見る

まとめ|アフィンガー6おしゃれなトップページにカスタマイズ|初心者でも簡単に設定できる方法

アフィンガー6(AFFINGER6)おしゃれなトップページにカスタマイズで行った事

  • トップページの色の配色や画像を統一
  • 新着記事のスライドショーの設定
  • おすすめ記事の設定

あs今回はおしゃれなトップページにカスタマイズする方法を解説しました。

アフィンガー6(AFFINGER6)はカスタマイズの自由度が高く細かな設定ができます。

読み手がおしゃれなトップページだと思うとサイトを覚えてもらえたり、読者になってもらえたりしてもらえます。
サイトの顔でもあるトップページ作りのお手伝いができればと考えています。


\気になるWordPressテーマ/

AFFIGRE6を詳しく見る

※クリックすると公式サイトへ移動します



\ ぽちっとしていただけると励みになります /

   ▽ フォローまってます♪ ▽

mezo日記 - にほんブログ村

ブログランキング・にほんブログ村へにほんブログ村

関連コンテンツ

  • この記事を書いた人
  • 最新記事

mezo

はじめまして。
40代に入りシミやシワに気付き今までさぼっていたスキンケアを大慌てで見直し中!
美容・化粧品成分アドバイザー取得
日本化粧品検定取得
コスメマイスター・ライト取得
このサイトでは主婦歴21年の私がスキンケアや簡単なおやつ作り生活に役立つ情報を発信していきます。

-AFFINGER6