AFFINGER(アフィンガー)

【アフィンガー5】トップページのカスタマイズ方法【かっこよく見せる方法】

2020年7月24日

【アフィンガー5】トップページのカスタマイズ方法【かっこよく見せる方法】

 

悩む人
トップページのカテゴリを2分割に分けて表示設定したいけど、設定方法は?

 

こんな悩みに答えます。

 

WordPressテーマのアフィンガー5に変えたら、ブログの顔となるTOPページをカッコ良く見せたいと思いますよね。
KEI

 

ただ、機能がたくさんありすぎてどうやったらおしゃれなデザインのTOPページを作ったら良いのか悩むと思います。

 

そこで、本記事では、AFFINGERでできるトップページをカッコよくカスタマイズする方法を紹介します。

 

以下のように悩んでいる方は参考になると思うので、ぜひ読み進めてみてください!

 

こんな方におすすめ

  • AFFINGERのトップページをかっよく見せたい!
  • AFFINGERのトップページのカスタマイズ方法を知りたい!
  • 機能がたくさんあるので、まずはAFFINGERのトップページだけでもカスタマイズを知りたい!

 

それでは、早速解説していきます。

 

【AFFINGER】トップページのバナー風ボックス完成系

 

まずは、AFFINGERトップページの完成系のイメージを紹介します。

 

今回は以下のように、バナー風のボックスの作り方を紹介します!(記事後半では、おまけで他のカスタマイズ方法も紹介します!)
KEI

 

最終的な完成形

PC

SP

 

メモ

  • 『PCは2列に分割して表示』『SPは縦一列で表示』。
  • 『バナーリンク』は、クリックするとカテゴリ一覧ページへ。
  • 『記事』は、自分がクリックさせたい記事へ。

 

それでは、実際に設定方法を紹介していきます。

 

手順①:2分割のレイアウト設定

 

まずは、お使いのワードプレスの管理画面を開きます。

 

管理画面を開けましたら、以下のようにサイドメニューにある『固定ページ → 新規追加』をクリックします。

 

 

続いて、以下の手順でバナー風ボックスを追加していきます。

 

  • 新規追加ページで『タグ』→『レイアウト』→『PCとTab(959px以上)』→『左右50%』を選択します。
  • 選択後に黄色(左)とブルー(右)の画面が出ますので、これで2分割のレイアウト設定の準備完了です。

 

 

 

 

この『黄色(左)』と『ブルー(右)』のボックスの中に『バナーリンク』と『記事』を入れていきます!
KEI

 

手順②:バナーリンクの挿入

 

続いて『黄色(左)』と『ブルー(右)』のボックスの中に以下のようにバナーリンクを追加します。

 

 

バナーリンクを追加するには、新規追加ページ画面にいき、『タグ → ボックスデザイン → バナー風ボックス → 基本』でバナーリンク用のコードを設定します。

 

 

上記のように、バナーリンク用のコードが追加されます。

 

 バナーリンク用コード
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"] [/st-flexbox]

 

  • リンク先URL:st-flexbox url
  • カテゴリタイトル:title
  • タイトル下の背景画像:backgroud_image

 

自分が設定したい「リンク先URL」「カテゴリタイトル」「タイトル下の背景画像」をそれぞれ設定していきます!
KEI

 

『リンク先URL』,『カテゴリタイトル』『タイトル下の背景画像』をいれるには、以下のようにクォーテーションマークの中にURLをいれます。

 

例)リンク先URLを入れる場合:

st-flexbox url="" → st-flexbox url="https://www.keiblog0815.com/"

 

なお、画像のURLはメディアのライブラリから取得することができます。

 

 

手順③:記事の設定

 

続いて、以下のようにバナーリンク下に入れる『記事=ブログカード』を追加する方法です。

 

 

まずは以下の手順でブログカードを追加します。

 

  • カードをクリックして『記事=ブログカード』を表示させます。
  • ブログカードのショートコードが表示されたら、以下のテキストを変更していきます。

 

 

  • 「id="" 」のクォーテーションマークの間に表示させたい記事のIDをいれます。
  • 「readmore="on"」→「readmore="off"」 に変更。

 

 

 

次に、『管理画面 → AFFINGER5 管理 → デザイン → 抜粋設定 → PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする』にチェックをいれます。

 

 

最後に右側のブルー箇所にも同じように、入れたい数だけブログカードをいれて完了です。
KEI

 

手順④:トップページに表示設定

 

最後にトップページの表示設定をしていきます。

 

 

  • WordPress 管理画面 → 設定 → 表示設定 → ホームページの表示 → 固定ページ』をチェック。
  • ホームページ」のプルダウンで固定ページで作成したタイトルを選択します。
  • 最後に『変更を保存』をクリックして設定完了です!

 

 

AFFINGERトップページ以外のカスタマイズ方法

 

最後におまけでAFFINGERでできるカスタマイズ方法を紹介します。

 

当ブログでは、トップページ以外にもAFFINGERでできるカスタマイズ方法をいろいろ紹介しています!
KEI

 

もし興味のあるカスタマイズがありましたらぜひ参考にしてみてください!

 

 

今回は、以上になります。

 

ここまで、読んでいただきありがとうございました!

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴8年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)