JIN:Rのこと
PR

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

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

投稿記事を陳列する感じでブログのトップページを作りたいなと思っていて。そうれば、検索で見つけてもらいにくい同ジャンルの記事を目につくように表示できるので。欲を言えば、手間をかけない方法だと嬉しいんですが。

じゅん
じゅん

確かにひとつの記事に関心を持ってもらえたなら、他の記事にも興味ある可能性高いですからね。記事リストを使うと、色々と記事の見せ方を工夫できておすすめですよ。

せっかくブログを訪れてくれたなら、より多くの記事に気づいてもらい、1記事でも多く読んでもらいたいと思いませんか。読者自身もまだ気づいていない関心があると思われる記事のリストを、自然な形で目に入るように表示しておくことが大切です。

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

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

記事リストを使ってサイトを訪れた人へより多くの記事を届けたいと思う方は、ぜひ最後まで読んでいってください。

もし、WordPressテーマを「JIN:R」にしようかと迷っているなら、あなたの決断を後押しする情報になっていると思います。

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

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

image

JIN:Rの記事リストは、公開済みの記事を一覧で表示できるブロックです。

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

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

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

表示する記事の情報を自動的に取得してリストが更新されるので、新規投稿をするだけで設定の手間がかかりません。

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

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

選択できる設定項目

基本設定

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

  1. 新着記事：公開日順に表示
  2. カテゴリー一覧：設定したカテゴリー内で、公開日順に表示
  3. 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にすると消せるという仕様です。

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

デザインパターン一覧

記事リストのデザインパターンをご紹介していきます。スマートフォンでの表示は、カラム数が1です。

まず、記事タイプ：新着記事、表示する投稿数：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公式マニュアルはこちらから読めます。

記事リストの使い方

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

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

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

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

記事タイプを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をコピーしました