【期間限定 1/7(水) まで】エックスサーバー最大30%OFFキャンペーン実施中!

【SWELL非公式マニュアル】記事一覧リストのデザイン設定

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

目次

\ 初心者におすすめ /

以下の3つを利用すると
最短最速でブログ収益化ができます

【レンタルサーバー】

エックスサーバー

【WordPressテーマ】

SWELL

【SEOツール】

ラッコキーワード

上記のリンクを選択すると、各サービスの詳しい記事に移動します。

カスタマイザーの起動

記事一覧リストに関する設定はカスタマイザー内の「記事一覧リスト」にあります。

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

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

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

記事一覧リストのレイアウト設定
SWELL公式サイト:記事一覧リストのレイアウト設定

リストレイアウト」という項目で、好きなレイアウトを選択することができます。

カード型やリスト型など複数の種類があるので、実際に設定してみて、気に入ったものを使用してください。

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

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

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

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

各レイアウトでの表示例

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

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

投稿情報の表示設定

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

投稿情報の表示設定
SWELL公式サイト:投稿情報の表示設定

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

カテゴリーの表示設定

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

カテゴリーの表示設定
SWELL公式サイト:カテゴリーの表示設定

表示位置の違い

カテゴリー位置の違い
SWELL公式サイト:カテゴリー位置の違い

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

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

サムネイル画像の比率設定
SWELL公式サイト:サムネイル画像の比率設定

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

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

比率による見た目の違い

サイズ比率
SWELL公式サイト:上から、ワイド・黄金比率・正方形

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

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

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

グラデーションカラーの設定
SWELL公式サイト

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

タブ切り替え設定

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

このタブ切り替え機能については、別記事で詳しく説明されているのでこちらを確認してください。

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

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

記事一覧から除外するカテゴリー・タグの設定
SWELL公式サイト

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

SWELL公式マニュアル:記事一覧リスト(投稿リスト)のデザイン・レイアウト設定

この記事を書いた「ブルー」です。
プログラマー×ブロガー
へなちょこシステムエンジニアが副業ブログで月収10万円を達成。エックスサーバー、SWELL、ラッコキーワードを使った稼げるブログを作る方法を解説します。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次