広告 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/9/8

【8/21リニューアル】新オルビスユードット50代の私が使った口コミや効果・違いを解説!

オルビスの最高峰オルビスユードットが2023年8月21日にパワーアップしてリニューアルされます。 新オルビスユードットがどんな風にリニューアルされたのか気になりますよね。 私も新オルビスユードットを試してみたいなと思っていたところ なんと! オルビスユードットシリーズ特別選考体験モニターに当選してしまいました! と、いう事でお試しセットを買うつもりだったのですが、突然の当選で現品を頂きましていち早くお試しすることとなりました。 フォーミングウォッシュの潤いながらのスッキリ感。 エッセンスローションの肌馴染 ...

ReadMore

スキンケア

2023/8/8

草花木果Asmy(アズミー)敏感肌にやさしいと噂のスキンケアを口コミとレビューで解説!

草花木果Azmy(アズミー)は大人の敏感肌にやさしいスキンケア。 敏感肌の人だけでなく年齢を重ねてくると乾燥や肌あれなどに悩む機会が増えますよね。 私も乾燥肌に年齢肌も加わりスキンケアも選びながら使う状態。 Azmy(アズミー)ってどうなの? そんな疑問に私がAzmy(アズミー)をレビューしていきますね。 まずは使ってみたメリット・デメリットをお伝えしますね。 メリットデメリット 肌馴染みが良いべたつかないふっくら肌になる 価格が高め香りの好き嫌いが分かれる では深堀していきます。 敏感肌の人乾燥肌や肌荒 ...

ReadMore

スキンケア

2023/8/7

40代50代からでも遅くない!ファンケルのクレンジングオイル口コミや評価は?

クレンジングはメイクが落ちれば何でもいいと思っていませんか? 私はクレンジングなんてどれも同じでしょう?と思っていました。 でも40代50代になると今まで感じていなかった肌トラブルが発生。シミ、シワ・肝斑・乾燥・くすみ・・・ 必然的にスキンケアを頑張らないといけない年齢になってくるのですよ(泣) そこでまずはスキンケアの基本クレンジング。 ファンケルマイルドクレンジングオイルは高い洗浄力なのにうるおいはしっかりキープ。とろすべオイルで摩擦レスなクレンジングです。 ファンケルのマイルドクレンジングオイルを選 ...

ReadMore

スキンケア

2023/8/7

40代・50代乾燥肌の人注目!ファンケル酵素洗顔は効果ない?毎日使ったレビューと口コミを公開

40代・50代になるとちょっとしたケガや傷の回復が遅いなと感じませんか?直ぐによくなっていたケガや傷が悪化したり。 お肌も年齢と共にターンオーバーが乱れがちになります。 ターンオーバーが乱れると古い角質が積み重なって厚く硬くなり肌トラブルの原因に。 私も最近は肌が暗く見えるなと感じたり、シワやシミが気になったり肌の悩みが増えてばかり。肌年齢を感じることが多くなりました。 だけどこのまま放置するわけにはいきませんよね。 ターンオーバーを良くする1つの方法として酵素洗顔を使って角質や毛穴ケア。しっかり汚れを落 ...

ReadMore

スキンケア

2023/8/7

ファンケル泥ジェル洗顔を毎日使った毛穴の汚れの効果は?口コミと本音レビュー!

洗浄力が高く、毛穴の汚れまでしっかりと落とせると今人気のクレイ洗顔。 クレイ洗顔の中でも人気のファンケル泥ジェル洗顔は古い角質を除去しツルツルしっとり肌に導いてくれます。 洗顔を泡立てるのが苦手な人 洗顔の摩擦が気になる人 時間がない時でも肌のお手入れをしっかりしたい人 乾燥が気になる人 毛穴ケアを簡単にしたい人 毛穴の詰まりが気になる人 このような人にはおすすめ。 リンク メリットデメリット 摩擦レス泡立て不要洗顔・パック・マッサージの3WEY手頃な価格 サッパリ感はない泥ジェルが固く伸ばしにくい劇的な ...

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

-AFFINGER6