AFFINGER6 Wordpress

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

 

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

 

悩む女性1

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

設定箇所はどこ?

 

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

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

 

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

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

 

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

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

 

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

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

 

AFFINGER6の固定ページからカスタマイズ設定しよう!

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

 

カスタマイズ画面:「固定ページ」➡「新規追加

 

 

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

 

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

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

 

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

 

上記画面に倣って、

 

タグ」➡「レイアウト」➡「PCとTab」➡「左右50%

 

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

 

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

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

 

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

 

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

 

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

 

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

 

■<項目名部分は1行目>

 

 

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

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

 

■<記事部分は2行目以降全て>

 

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

 

 

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

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

 

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

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

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

 

 

まとめ

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

 

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

 

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

 

 


→当ブログをフォローして頂けると励みになります。 


大人気自宅飲み放題!多彩なビールをご自宅で楽しめる【DREAM BEER】

楽天おすすめ商品はこちら

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

みやさん

【サイト運営者・著者】みやさん 【実績】ライター歴7年 ブログ歴3年⇒2万PV推移中 【実務】現役プログラマー|【発信内容】▶副業やブログの始め方 ▶ライターとしてのノウハウ ▶生活の有益情報を発信しています。皆様の生活改善にご利用ください。

Copyright© 副業ケアネット , 2022 All Rights Reserved Powered by AFFINGER5.