JIN:Rのこと
PR

JIN:R「記事リスト」一歩先ゆくアレンジメントのヒント

JIN:R 記事リスト
web-kumitatekoubou
記事内に商品プロモーションを含む場合があります
アシスタントさん
アシスタントさん

読んでほしい記事がいろいろあるのでずっと表示しておけないかな。奥まってしまうと、検索してまで読んでもらえないんですよね

じゅん
じゅん

「記事リスト」を使うと色々な方法で記事を見せれるので、悩みが解決するかもしれないですね

サイト運営をしていると、まず読んでほしい記事やきっと役に立つ内容の記事が、あまり読んでもらえないと思う方も多いと思います。このような記事はサイトを訪れた人も気が付いていないニーズなので、自然と目に入るようにしておくことが大切です。

そこでこの記事では、WordPressテーマ 「JIN:R」の記事リストというオリジナルブロックの使い方とアレンジメントのヒントをご紹介します。

記事リストブロックで選べる設定項目やデザインパターン、他のブロックとのイチオシの組み合わせ方などが、たくさんのサンプルを見ながら分かります。

記事リストを使ってサイトを訪れた人へ狙った記事を届けたいと思う方や、JIN:Rを検討している方はぜひ最後まで読んでいってください。

Contents
  1. 記事リストブロックのクイックガイド
  2. 記事リストの賢い使い方
  3. 記事リストの使い方
  4. まとめ：目的に合わせた「記事の見える化」をしよう

記事リストブロックのクイックガイド

オリジナルブロックの記事リストは、公開済みの記事を一覧で表示できるブロックです。

サイトを訪れた人の目に触れやすい任意のところに記事の一覧が表示できるので、

  • ついでに記事を読んでもらえる可能性が高まる
  • 狙った記事を訪問者の検索に頼らずアピールできる

というメリットがあります。

新着やランキングなどの自動とピックアップの表示方法があり、トップページやカテゴリーページなどで役に立ちます。

たくさん設定項目があってややこしいように思いますが、基本設定だけすれば細かく選ばなくても初期設定が実用レベルになっているので安心してください。アレンジしたいなと思えば、上から順番に設定していくとよりオリジナル感が高まります。

選択できる設定項目

基本設定

リストにする記事の選び方を決めるのが記事タイプで、4パターンあります。

  1. 新着記事／公開日順に表示されます。
  2. カテゴリー一覧／設定したカテゴリー内で、公開日順に表示されます。
  3. PV順／サイト全体のPV（記事が読まれた回数）が多い順番に表示されます。
  4. ピックアップ／直接入力したURLの記事を表示します。

表示する投稿数は、初期設定が6記事で1~12記事の間で変更できます。表示する投稿数以上の記事は、「もっと見るボタン」を表示して展開するようにできます。

カテゴリー一覧は、カテゴリーの一覧ではなくてカテゴリー内の記事一覧なので気をつけましょう。また、ピックアップだけは、好きなテキストをラベル表示が可能です。テキストサイズが小さいのはご愛嬌です。

  • PV数はJIN:RのVer 1.20以降でカウントされています。

デザイン設定

リストにする記事の見せ方を選ぶのがデザイン設定で、4パターンあります。PCとスマホそれぞれで、デザインを設定できます。つまり、PCが縦長カードで、スマホがテキストでも良いということです。

  • 縦長カード／上から、アイキャッチ画像、記事タイトルの順番で、一番下に公開日とカテゴリ名が並んで表示されます。
  • 横長カード／左にアイキャッチ画像、右の上に記事タイトル、その下に公開日とカテゴリ名が並んで表示されます。
  • スライド／縦長カードのデザインで、横スライドができます。
  • テキスト／先頭に記事公開日をつけて、記事タイトルだけが表示されます。

カラム数を変えると記事リストの横並びの数を選べます。デザインによって選べるカラム数が決まっています。もちろんカラム数もそれぞれで設定できます。

  • 縦長カード／PCは1〜4カラム、スマホは1か2カラムです。
  • 横長カード／PCは1カラムか2カラム、スマホは1カラムです。
  • スライド／カラムの選択はできないです。
  • テキスト／PCもスマホも1カラムだけです。

表示設定

リストで表示する記事のさまざまな情報の表示をON、OFFで切り替えできます。

まず、記事タイプで、新着記事かカテゴリー一覧を選んだ場合です。

縦長と横長のカードでは、公開日、カテゴリー、もっと見るボタンが設定できます。スライドでは、公開日、カテゴリーが設定できます。テキストでは、公開日、もっと見るボタンが設定できます。

次は、記事タイプで、PV順を選んだ場合です。

ランキングラベル、記事のPV数、有料記事の金額を表示が設定できます。ランキングラベルは、1位〜3位までです。

最後に、記事タイプで、ピックアップを選んだ場合は有料記事の金額表示が設定できます。設定できることが少ないですが、ピックアップの場合だけラベルの設定ができて、自由なテキストを表示が可能です。

日付とカテゴリーは表示がデフォルトなので、非表示をONにすると消すことができるという仕様です。

記事タイプでピックアップを選んだときと、デザイン設定でスライドを選んだときは、「もっと見るボタン」を表示できないです。記事をたくさん表示したいときには注意しましょう。

デザインパターン一覧

記事リストのデザインパターンをご紹介していきます。PCは設定項目を変更しますが、スマホは初期設定のままになっています。

まず、記事タイプ：新着記事、表示する投稿数：6、デザイン：縦長カード、カラム数：3、公開日とカテゴリー非表示：OFF、もっと見るボタン：OFFです。これが記事タイプだけ選んだ記事リストブロックの初期設定です。

次は、記事タイプ：新着記事、表示する投稿数：8、デザイン：縦長カード、カラム数：4、公開日とカテゴリー非表示：ON、もっと見るボタン：ON です。

もっと見る

次に、記事タイプ：カテゴリー一覧、表示する投稿数：4、デザイン：横長カード、カラム数：2、公開日とカテゴリー非表示：OFF、もっと見るボタン：OFFです。

次に、記事タイプ：PV順、表示する投稿数：6、デザイン：スライド、ランキングラベル：ON、記事のPV数：ON、有料記事の金額を表示：OFFです。

次に、記事タイプ：PV順、表示する投稿数：12、デザイン：テキスト、ランキングラベル：OFF、記事のPV数：ON、有料記事の金額を表示：OFF です。

最後に、記事タイプ：ピックアップ、ラベル：一部表示、表示する投稿数：3、デザイン：横長カード、カラム数：1、有料記事の金額を表示：OFF です。

記事リストブロックの表示イメージを膨らませるサポートになりましたでしょうか。

記事リストの賢い使い方

私が思う記事リストのおすすめの使い方を紹介します。

オリジナルブロック単独の設定

このブロックの設定は、記事タイプ：PV順、表示する投稿数：6、デザイン：テキスト、ランキングラベル：ON、記事のPV数：OFF、有料記事の金額を表示：OFFです。

人気記事をシンプルな表示でサイトを訪れた人にアピールできる設定です。サイト運営者が望むように、まんべんなくPV数を稼ぐのは難しいので、よく読まれている記事を伸ばし切る作戦が取れます。

ブロックを組み合わせて使う場合

記事リストのブロックは他のブロックと組み合わせて使い、何の記事リストなのかを紹介するとPR効果が上がります。

デザイン見出しと記事リストは、相性が良いオリジナルブロックのひとつです。

記事リストは、ピックアップを最初に置き、カテゴリー一覧を2つ続け、PV順を最後に並べています。そして、デザイン見出しで何のリストなのかを伝えるようにペアにしている場合のサンプルを作りました。

デザイン見出しです
初めに読んでほしい
1
デザイン見出しです
WordPressの始め方
もっと見る
2
デザイン見出しです
JIN:Rのこと（PCのみ表示です）
もっと見る
デザイン見出しです
人気記事

JIN:Rのブロックは基本的にPCとスマホの全ての端末で表示されますが、それをPCのみ表示とスマホのみ表示に設定も可能です。スマホで表示したときは文字数を減らして、情報をすっきりとさせるためにブロックを非表示する方法が取れます。

先ほどのデザイン見出しと記事リストのブロックを並べて作ったサンプルも、PCとスマホでは表示内容が異なります。スマホの表示では、カテゴリー一覧の記事リストを1つに減らしています。そして残った1つのカテゴリー一覧もテキスト表示です。

文字数を減らして情報をすっきりし、スクロール量を減らすことができます。

JIN:RにはこのWordPressテーマを開発した方々がデザインしたコードをコピーするだけで使えるデザイン見本帳があります。こちらも超助かる便利メニューなので活用してくださいね。

「デザイン見本帳」のJIN:R公式マニュアルはこちらから読めます。

記事リストの使い方

記事リストブロックの使い方を説明していきます。設定項目は、右サイドバーに表示される内容を選択するだけで完了です。

記事リストのブロックを設置

「/記事リスト」と入力して、オリジナルブロックを呼び出します。

記事リストのブロックを呼び出す
基本設定をする

記事タイプを4パターンから選び、表示する投稿数を設定します。

記事リストの記事タイプを選択する

カテゴリー一覧は表示するカテゴリーを、

記事タイプをカテゴリー一覧にしたら、カテゴリーを選ぶ

ピックアップは記事のURLを入力か検索で設定します。

記事タイプをピックアップにしたら、ピックアップするURLを指定する
デザイン設定をする

PCとスマホで表示するデザインを4パターンから選びます。

用途に合わせてカラム数も変更できます。

デザイン設定をPCとスマホでそれぞれ選ぶ
細かな表示設定をする

この設定は必要な人だけで大丈夫です。

公開日やカテゴリー、もっと見るボタン、ランキングラベル、記事のPV数など表示のON、OFFを設定します。

表示設定で細かな表示、非表示を選ぶ

基本設定とデザイン設定により設定できることは変わります。

JIN:R公式の記事リストのマニュアルはこちらから読めます。
サイト訪問者の潜在ニーズにもアプローチできる
JIN:R 公式を見る

まとめ：目的に合わせた「記事の見える化」をしよう

WordPressテーマ JIN:Rのオリジナルブロック 記事リストの使い方とアレンジ方法を紹介してきました。

記事リストを使えば、新着記事、PV順、カテゴリー一覧、ピックアップといった方法で、記事の一覧を表示できます。さらに、表示方法も4パターンから選べて、情報のボリュームを細かく調整できます。

サイトを訪れた人にいろいろな方法で記事を届けることができて、とても便利なオリジナルブロックです。

もっと記事を読んでほしい、もっと情報を届けたいと思ったら、サイトに来てくれた人に記事に気付いてもらう、記事の見える化が大切です。それができるのがこの記事リストブロックです。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

ABOUT ME
じゅん
じゅん
ブロガー
Contact
2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
Recommend
こんな記事も読まれています！
記事URLをコピーしました