MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

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

2020 3/12
記事一覧リスト(投稿リスト)のデザイン・レイアウト設定
記事上のウィジェットエリア

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

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

カスタマイザーの起動

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

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

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

記事一覧リストに関する設定はカスタマイザー内の「記事一覧リスト」というメニューに用意しています。

投稿リストの設定項目
カスタマイザーの「記事一覧リスト」メニュー

記事一覧リストのレイアウト設定

「外観」>「カスタマイズ」>「記事一覧リスト」へと進むと、まず初めに次のような設定項目が用意されています。

記事一覧リストのレイアウト設定
記事一覧リストのレイアウト設定

リストレイアウト」という項目で、好きなレイアウトを選択することができます。
カード型やリスト型など複数の種類がありますので、実際に設定してみて、気に入ったものをご利用ください。

「最大カラム数」設定について

カード型サムネイル型のリストにのみ有効な設定で、PCサイズ・スマホサイズのそれぞれで投稿リストを何列で表示するかを選択できます。

「READ MORE のテキスト」設定について

ブログ型・リスト型(左右交互)のリストにのみ「READ MORE」というボタンが表示されるのですが、その文字列を好きなものに変更できる設定です。

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

各レイアウトでの表示例

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

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

投稿情報の表示設定

リストレイアウトの設定エリアのすぐ下には、次のような設定エリアがあります。

投稿情報の表示設定
投稿情報の表示設定

ここで、タイトルや公開日、抜粋文などの投稿に関する基本的な情報を表示するかどうか選択できます。

カテゴリーの表示設定

さらにその下に、カテゴリーの表示に関する設定エリアがあります。

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

表示位置の違い

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

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

記事一覧リストに表示されているサムネイル画像のサイズ比率についても設定することができます。

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

ちなみに、ver. 2.0.1 時点で選べるのは以下の7種類です。

  • 白銀比率 (1:1.414)
  • 黄金比率 (1:1.618)
  • 一眼 (3:2)
  • ワイド (16:9)
  • 横長 (2:1)
  • 超横長 (5:2)
  • 正方形 (1:1)
了のアイコン画像

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

比率による見た目の違い

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

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

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

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

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

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

タブ切り替え設定

トップページやアーカイブページに表示される記事一覧リストは、「人気順」で並び替えたリストやカテゴリーごとにソートされたリストにタブで切り替えることも可能になっています。

こういうやつ!

このタブ切り替え機能については、別記事で詳しく説明していますのでそちらをご覧ください。

記事一覧から除外するカテゴリー・タグの設定

カスタマイザーの「記事一覧リスト」メニューの中の一番下の方に、以下のような設定項目が並んでいます。

記事一覧から除外するカテゴリー・タグの設定

これらによって、トップページやウィジェットに表示される記事一覧リストから除外したいカテゴリーやタグも設定することができます。

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

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

目次
閉じる