affinger5_3columneye

WordPress

AFFINGER5トップページの記事一覧を3列で表示したい

WordPressテーマのAFFINGER5では「デザイン済みデータ」が無料配布されていて、手軽にプロ級のトップページが作れるようになっています。

でも僕はそこまで作り込まず、よりシンプルな形で3列のボックスに似たタイプのものにしたいと考えました。

重要

この記事はAFFINGER5をご自身で購入されログインパスワードをお持ちの方に向けたものです。「トップページにカテゴリ一別の一覧を作成する」コードが必要であり、それはログインが必要なWINGマニュアルで解説されています。そちらと併せてご覧いただくことが前提となっています。

WINGマニュアル:トップページにカテゴリ一別の一覧を作成する方法

 

重要

パソコン、スマホでの表示に適したデザインです。タブレットではタイトルの表示が崩れる場合があるのでご注意ください。

 

できあがったのはこんな3列

全部で九つのボックス(アイキャッチ画像が上ではないので正しくはボックスではないのですが、以降ボックスと表記)を作り、それぞれにカテゴリー範囲(全カテゴリーと1カテゴリー)を設定し、1記事(記事数変更は自由)をピックアップ。記事の抜粋の文字数(ダッシュボード>AFFINGER5管理>デザイン>抜粋設定)は「0」としてタイトルのみ表示しています。

1行目の3列は左が「新着記事」。これは全カテゴリーから日付順に最新の記事を掲載しています。

中央が「ランダム」。これは全カテゴリーから1記事をランダムに選び掲載しています。

右が「おすすめ」。これは僕がぜひ読んでほしいと思う「おすすめ」カテゴリーを設定し、その中から1記事をランダムに選び掲載しています。

2行目と3行目はメニューバーにあるそれぞれのカテゴリーから1記事をランダムに選び掲載しています。

 

ただ不安なので「更新履歴」は残す

affinger5_3column02

トップページの上部は前章のように3列3行の9つのコラムで構成しました。

しかしここで気になったのが「最新記事」の表示がひとつだけであること。やはりもう少し知ってもらった方が親切ではないかと思いました。

そこで従来の基本的な記事一覧の表示形式を下に残すことにしました。併せてこの部分をわかりやすく掲示するため「更新履歴」のタイトルを付けました。

実際にご覧になりたい方は関連サイト「ロマグレ」まで、どうぞ。しばらくこのデザインでいくつもりなのでご確認いただけるはずです。

さて、以上のような意図を実行するためAFFINGER5をどう設定していけばよいのか。つぎの章からご説明します。

 

設定の構成

affinger5_3column03

設定を実行する前に全体の構成を整理しておきます。

まず[1] 基本的なエリアがベースとしてあります。

ここに[2] 挿入コンテンツを差し込みます。

挿入コンテンツは[3] 左右を3分割のデザインとします。

それを[4] [5] と繰り返します。

最後に[6] 同じ挿入コンテンツ内に下の基本的なエリアのタイトルを入れ込みます。本来は基本的なエリアで実行できればよいのですが、不可能であるため、変則的にこの方法を採用しました。

 

ダッシュボードのAFFINGER5管理から

では設定の実際です。

affinger5_3column04

まず左のダッシュボードのメニューからAFFINGER5管理を選択します。表示されたAFFINGER5管理のメニューからトップページを選び、挿入コンテンツを表示させます。

 

affinger5_3column05

つぎに挿入コンテンツのタグメニューからレイアウト>PCとTab(959px以上)>3分割を選択します。

するとつぎのような表示となるはずです。

affinger5_3column07

ここで表示をビジュアルモードからテキストモードへと変更します。

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

affinger5_3column08

このコードの赤枠の部分を差し替えていきます。

差し替えるコードはWINGマニュアルの「トップページにカテゴリ一別の一覧を作成する方法」ページに掲載されています。

WINGマニュアル:トップページにカテゴリ一別の一覧を作成する方法

 

「最新記事」は全カテゴリーから最新1記事

「最新記事」を表示するボックスの差し替え部分はまずタイトルである「最新記事」を設定します。

コードは以下のようにしました。メニューからかんたんに設定できます。

<span style="font-size: 70%;">最新記事</span>

これに続けてマニュアルで紹介されているコードを書き込みます。ただし以下の部分を書き換えています。

"表示したいカテゴリID"の部分は全カテゴリーの番号を半角英数カンマ「,」で記述。
"表示したいページ数"は「1」
"並び方法"は「date」

これで最初のボックス「最新記事」の完成です。

affinger5_3column10

 

「ランダム」は全カテゴリーから無作為に1記事

最初の3分割の中央「ランダム」は全カテゴリーから無作為に1記事をピックアップし表示させます。

「最新記事」とコードはほぼ同じ。ただし以下の部分だけ書き換えます。

"並び方法"は「rand」

 

「おすすめ」以下は各カテゴリーから無作為に1記事

最初の3分割の右「おすすめ」と以下の各カテゴリーはつぎのように設定しました。

"表示したいカテゴリID"はカテゴリーの番号をひとつ記述。
"並び方法"は日付順にしたい場合は「date」、ランダムにしたい場合は「rand」

"並び方法"について今回僕は「rand」にしました。

挿入コンテンツの記述はここまででつぎのような構成となるはずです。

affinger5_3column08

affinger5_3column08

affinger5_3column08

つまり3分割するコードが3回繰り返されます。

 

基本的なエリアのタイトル

ボックスの設定が完了したら、最後に下の基本的なエリアのタイトルを入れ込みます。

各ボックスのタイトル同様、メニューからかんたんに設定できます。

<span style="font-size: 70%;">更新履歴</span>

 

スライドショーなら自動的に分割される

affinger5_3column09

なお3分割の指定をしなくてもWINGマニュアルの「トップページにカテゴリ一別の一覧を作成する方法」ページに掲載されているコードで"スライドショー化の有無"を「on」にすれば、上画像のように正しいボックスのスタイルで分割した表示が実行できます。

ただしスライドショーであるため表示速度に影響を及ぼします。僕はできるだけシンプルにしたかったので今回のような設定にしました。

興味のある方は、ぜひ実践してみてください。

 

スポンサーリンク

スポンサーリンク

スポンサーリンク

-WordPress
-

© 2020 IT-SORAYORI