【AFFINGER6】２列・２カラムで表示・カスタマイズしよう！

AFFINGER6(アフィンガー6)で、投稿記事を２列、２カラムで表示する方法。

悩む女性１

横２列に表示したいけどどこで設定したらよいかわからない？

設定箇所はどこ？

当記事では、こんな悩みを解決できます。

それでは、AFFINGER6で横２列・２カラムで投稿記事を表示する方法についてみていきましょう。

横２列・２カラムでの表示画面イメージ

まずは、横２列２カラムで表示する画面イメージです。

２列に分割して記事を表示していきます。

「１行目に列のカテゴリ名」、「２行目以降に投稿した記事」を表示していくイメージです。

投稿記事については、２行目以降にいくつでも表示することが可能ですが、なるべく表示したいものを３～５つぐらいに絞って表示するのがおすすめです。

こうした画面を作成するには、AFFINGER6の管理画面には設定を持っていません。ダッシュボードの「固定ページ」から設定していきます。

AFFINGER６の固定ページからカスタマイズ設定しよう！

２列に表示させる画面は、まず「固定ページ」で新規画面から作っていきます。

こちらからまず画面を開きましょう。

AFFINGER6で横２列・２カラムにする方法

続いて横２列・２カラムに設定して画面を作っていきましょう。

２列・２カラムの設定画面について

上記画面に倣って、

を選択することで下記２列の画面が表示されます。

こちらの、黄色と水色の両方にソースコードを埋め込んで２列・２カラムに表示していきます。

続いて、ソースコードを埋め込んでいきましょう。

記述するソースコードはこちら

記述するソースコードは上記になります。まずこちらのソースコードを「黄色部分」と「青色部分」にコピーしてください。

１行目に「ブログで稼ぐ」などのカテゴリー項目名を、２行目以降に記事を表示するためのソースコードを記述するイメージです。

項目名部分の変更箇所は、下記赤表示の部分を変更すれば、基本的に問題ないでしょう。

■＜項目名部分は１行目＞

変更箇所は、この「title」「backgroud_image」だけで基本OKです。

この２つの設定で、タイトル名と背景画像を表示できます。

■＜記事部分は２行目以降全て＞

ID部分を投稿記事のIDを記載しましょう。IDは、下記「投稿一覧」の右側に記載されています。

このID Noが記事一つ一つの番号になります。「""（ダブルクォーテーション）」に挟んで記入することで表示できます。

このような形で２列・２カラムを表示することができるようになります。

表示画像を大きくする方法

２画面で表示画像を大きくする方法については、別途ソース確認中です。

わかり次第記事化する予定ですが、もしお分かりの方がいらっしゃいましたら、ぜひお教えい頂けるとうれしいです。

まとめ

このように、２列・２カラムで表示する際には、固定ページや投稿記事の画面から設定することができます。

設定箇所は、ツールの「タグ」➡「レイアウト」➡「PCとTab」➡「左右50%」ですので覚えておきましょう。

AFFINGER6の管理画面などにはありませんのでご注意下さい。