AFFINGER5

【AFFINGER5】トップページのカスタマイズ方法を紹介!

【AFFINGER5】トップページのカスタマイズ方法を紹介!

質問者
AFFINGER5をインストールしたけど、トップページの作り方が良くわからない!

 

こんな方に向けて今回はトップページのカスタマイズと設定の方法について紹介していきます!

 

他のカスタマイズ方法はこちらの記事で紹介しています!

 

AFFINGER5ではトップページの作り方は

  • 固定ページに記入して挿入
  • 「AFFINGER5管理」の「トップページ」から挿入コンテンツを使用

 

カスタマイズの方法は基本的には同じなのでやりやすい方でやっていきましょう!

 

トップページの作成

僕は固定ページに記入しています。

AFFINGER5 トップページ

 

新着記事

スライドショーを使用した新着記事の設定はこちらの記事で紹介しています!

【AFFINGER5】スライドショーの設定方法を紹介!
【AFFINGER5】スライドショーの設定方法を紹介!

続きを見る

 

カテゴリー(列レイアウト)

AFFINGER5では2列や3列にして表示することが可能です。

 

AFFINGER5 トップページ3

  1. 「固定ページ」→「新規追加」をクリックします。
  2. 「タグ」をクリックして「レイアウト」をクリックします。
  3. 「PCとTab(959px以上)」をクリックして、「左右50%」をクリックします。

 

AFFINGER5 トップページ4

するとこのようになります。

 

ポイント

PCとTab(959px以上)を選択することによりPCとタブレットでは2列、スマホでは1列で表示させることが出来ます。小さい画面で2列にしてしまうととても見づらくなるのでこちらをおすすめします!

 

バーナーの設定

次はバーナーの設定をしていきます。

 

AFFINGER5 トップページ8

バーナーは画像の赤い四角で囲んだもののことを言います。

 

AFFINGER5 トップページ5

  1. 「タグ」→「ボックスデザイン」をクリックします。
  2. 「バーナー風ボックス」→「基本」をクリックします。

 

AFFINGER5 トップページ7

するとこのようなコードが表示されます。

 

一見難しそうですが今回必要となるのは

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

この3つのみです。

 

画像のURL

AFFINGER5 トップページ10

画像のURLは「メディア」で画像を選択すると右下に出てきます。

 

これをコピーしてbackgroud_image=""の""の間に入れます。

 

ポイント

もし、ペーストした際にURLが画像になってしまったら『Ctrl+Z』でURLに戻すことが出来ます。

 

ブログカードの設定

次にブログカードの設定をしていきます。

 

AFFINGER5 トップページ9

 

ブログカードは画像の赤い四角で囲んだもののことを言います。

 

右上にある「カード」をクリックするか「

」とコードを入力しましょう。

 

ここでやることは「id=」の後ろに表示させたい記事のID番号を入力するだけです!こちらの記事で記事IDの確認方法について紹介しています。

 

ブログカードの表示方法

ブログカードには抜粋を表示させるか非表示にするかを選択できます。

AFFINGER5 トップページ13

  1. 「AFFINGER5」管理をクリックします。
  2. 「デザイン」をクリックして、「抜粋設定」をクリックします。
  3. 「 PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」とあるので非表示にしたい場合はチェックを入れます。

表示

AFFINGER5 トップページ14

 

非表示

AFFINGER5 トップページ15

どちらがいいとはありませんので自分がいいと思う方でいいと思います!

 

ここまでくればトップページは完成です!

 

固定ページをトップページに設定する方法

先ほど作成した固定ページをトップページに設定していきます!

 

AFFINGER5 トップページ16

  1. 「外観」→「カスタマイズ」をクリックします。
  2. 「ホームページ設定」をクリックします。
  3. ホームページの表示は固定ページを選択します。
  4. ホームページで先ほど作成した固定ページを選択します。
  5. 最後に「公開」をクリックすると完成です!

 

最後に確認で「固定ページ一覧」で作成した固定ページにフロントページと記載があれば設定完了です!

AFFINGER5 トップページ17

 

【AFFINGER5】トップページのカスタマイズ方法を紹介のまとめ

今回はトップページのカスタマイズ方法について紹介しました!

 

トップページはブログの顔になるので少しこだわってカスタマイズしてもいいかもしれないですね!

 

では、また次の記事で会いましょう!!

 

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.