「SWELL」でwebサイトの記事一覧リストを設定してみた!

WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「記事投稿ページの設定方法」について。

その細かい手順を画像付きで、ゼロから丁寧に解説していきます!

WordPressの人気テーマ「SWELL」についての関連記事はこちら。

あわせて読みたい
「SWELL」Webサイトの記事投稿ページ設定方法  #2
「SWELL」Webサイトの記事投稿ページ設定方法 #2WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「記事投稿ページの設定方法」に...
TOC

まずは、SWELLの超便利機能「カスタマイザー」から

「SWELL」では、WordPress管理画面にある「カスタマイザー」からサイトのビジュアルやデザインに関するあらゆる設定をここから行えます!

「カスタマイズ」をクリック。
(呼称は「カスタマイザー」なのに表示は「カスタマイズ」。。)

カスタマイザーでは、左側の設定項目で変更した設定を、右画面のプレビューでその都度確認しながら作業ができるのです!とても便利!

記事一覧リストとは

今回は、SWELLの「記事一覧リスト」の項目を設定していきます。

記事一覧リストとは、以下のような、記事の一覧をホーム画面上で見ることができる箇所のことです。

このリストのデザインについて
カスタマイザーで設定可能な項目が7つあります。

本記事では、その中から

リストのレイアウト設定
投稿情報の表示設定
「サムネイル画像の比率設定
マウスホバー時の設定

の4項目について紹介していきます。

リストのレイアウト設定」を設定する

「リストのレイアウト設定」の項目では、主に
・リストのレイアウト(PC・Tab・スマホそれぞれのデザイン)
・最大カラム数(PC・Tab・スマホそれぞれのデザイン)
を設定できました。

↓リストのレイアウト(PC・Tab)の設定

最大カラム数(PC・Tab)の設定
https://gfycat.com/tenseincompletecrane

投稿情報の表示設定」を設定する

投稿情報の表示設定」では、
・各記事の公開日、更新日の表示の有無
抜粋文の文字数(PC・Tab・スマホそれぞれ)
を設定できます。

↓各記事の公開日、更新日の表示の有無の設定

抜粋文の文字数(PC・Tab)の設定

「サムネイル画像の比率設定」を設定する

「サムネイル画像の比率設定」では、
それぞれのリストレイアウト(カード型・リスト型・サムネイル型・ブログ型)
で表示される画像部分の比率
設定できます。

↓カード型の画像比率設定

↓リスト型のの画像比率設定

マウスホバー時の設定」を設定する

マウスホバー時の設定」では、
リスト内の記事にカーソルを合わせた際、画像に着色されるグラデーションを設定できました。
この項目は、着色自体が薄いため、かなり微妙な変化になります。色々試してみるのが良いですね。

↓記事にカーソルを合わせた時の着色とはこのような表示のこと

↓グラデーションの設定

もしも設定をリセットしたくなったら!

ここで、設定項目が多く一つ一つ手作業で元に戻すのが面倒くさくなってしまった時の最後の手段として、「カスタマイザーのリセット」をご紹介しておきます。

「カスタマイザーのリセット」では「カスタマイザー」内で行われた全ての設定が削除され、初期化されます。カラー以外の設定をしている場合は、使用する時に十分注意してください!

カスタマイザーのリセットは、WordPress管理画面の「SWELL設定」→「リセット」→「カスタマイザーのリセット」→「デフォルトに戻す」

記事リストは奥が深い

記事リストの項目では、他にも
「タブ切り替え設定」や「投稿一覧から除外するカテゴリー・タグ」などを設定できます。

自身のサイトやHPに最適な記事リストを設定して、読者が見やすいホーム画面にしていきましょう!

【無料Webサイト診断実施中】

現在運営しているWebサイトでのSEOやマーケティング戦略でお悩みの方に、無料のサイト診断を実施中です。

  • SEO対策や広告戦略で思うように成果が上がらない
  • これからコンテンツマーケティングを実施したいけど、何をすれば良いかわからない
  • 検索順位が思うように上がらない or 急激に下がってしまった

といった方のお悩みを、Webマーケティングに精通したスタッフが無料で診断し、アドバイスします。

無料診断は下記LINE公式アカウントからお申し込みください。

※申し込み状況によっては、無料診断の実施が遅くなる、または実施できない可能性があることをご了承ください。

 

Let's share this post!
TOC
閉じる