「投稿リスト」(記事一覧リスト)のデザイン・レイアウトの設定方法

「投稿リスト」(記事一覧リスト)のデザイン・レイアウトの設定方法
記事上のウィジェットエリア

このページでは、トップページやアーカイブページに表示される「投稿リスト」のカスタマイズ方法について説明していきます。

目次前広告表示エリア
目次

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

以下では、カスタマイザー上での操作について説明していきます。

投稿リストに関する設定はカスタマイザー内の「投稿リスト設定」というメニューから設定できます。

投稿リストの設定項目

投稿リストのレイアウト設定

カスタマイザーから「投稿リスト設定」を選択すると、「投稿リストのレイアウト(PC)」・「投稿リストのレイアウト(SP)」という設定項目があり、スマホ表示・PC表示でそれぞれ好きなレイアウトを選択することができます。

以下はPC版の設定欄です。(※ ver.1.2.4より選択できるレイアウトが増えました)

投稿リストのレイアウト選択
投稿リストのレイアウト選択

最大カラム数の設定

カード型・サムネイル型を使用している場合、PC・SPそれぞれで何列で表示するかを選択できます。

最大カラム数の設定
最大カラム数の設定

各表示形式の表示例

上記の「投稿リストのレイアウト」設定や「最大カラム数」設定、その他の設定などを組み合わせて様々なレイアウトへ変化させることができます。

カード型
カード型(3カラム)
リスト型
リスト型
リスト型(左右交互)
リスト型(左右交互)
ブログ型
ブログ型
ブログ型(大)
ブログ型(大)
カード型(1カラム)
カード型(1カラム)
サムネイル型(1カラム)
サムネイル型(1カラム)
サムネイル型(2カラム/文字なし)
サムネイル型(2カラム/文字なし)

「READ MORE」の表示テキストの設定

上記のレイアウトの中で「リスト型(左右交互)」や「ブログ型」などに表示されている「READ MORE」というテキストも自由に変更できます。

「READ MORE」の設定
「READ MORE」の設定

もっと読む」や「この記事を読む」など、そのブログに合ったテキストにしてみてください!

タイトルの非表示設定

ver. 1.2.4 より、タイトルを非表示にすることができるようになりました。(サムネイル型で画像だけ表示させたい場合にご利用下さい。)

タイトルの非表示設定
タイトルの非表示設定

公開日・更新日の表示設定

ver1.1.6より、投稿の「公開日」と「更新日」の表示・非表示を切り替えれるようになりました。

公開日・更新日の表示設定
公開日・更新日の表示設定

抜粋文の表示設定

ver1.1.6より、「抜粋文の表示設定」を追加しました。

抜粋文の設定

タブレットでは、縦向き横向きの両方で「PC・Tab」の設定が反映されます。

レイアウト設定などの「PC」と「SP」と表記分けされているものは、タブレットの横向きは「PC」、縦向きは「SP」の設定が反映されます。

カテゴリーの表示位置の設定

投稿リストに表示されているカテゴリーの位置を設定できます。

カテゴリーの表示位置設定
カテゴリーの表示位置設定

設定位置での表示の違い

カテゴリー位置の違い
カテゴリー位置の違い

サムネイル画像のサイズ比率設定

投稿リストに表示されるサムネイル画像のサイズ比率を設定することができます。

サムネイル画像の比率設定
サムネイル画像の比率設定

「カード型」・「リスト型」・「ブログ型/サムネイル型」でそれぞれ個別に比率を指定することができます。

了

ここで設定した比率に合わせて各記事のアイキャッチ画像を作成すると、綺麗な表示になります!

例:比率による見た目の違い

サイズ比率
上から、ワイド・黄金比率・正方形

マウスホバー時のオーバーレイカラー設定

投稿リストにマススホバーさせると、サムネイル画像の上にグラデーションのオーバーレイヤーが表示されます。

この色は、以下の設定項目で指定できます。

グラデーションカラーの設定

単色にしたい場合は、両方同じ色を設定して下さい。

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次