JIN:R「ブログカード」一歩先ゆくアレンジのアイディア

アシスタントさん

関係する記事を紹介するに、簡単な良い方法はないのかなと思いまして。

じゅん

ブログカードを使うと、画像と記事タイトルが表示できて、読者の人も分かりやすいと思いますよ。

ひとつの記事だと説明しきれないときや他に関連する記事をぜひ読んでもらいたいと思うことも多いと思います。そんな時に役に立つのが、ブログカードブロックです。

そこでこの記事では、JIN:R オリジナルブロックのブログカードについて、使い方と設定のアレンジ方法を豊富なサンプルとともに紹介します。

この記事を読めば、関連記事の内部リンクや参考になるサイトの外部リンクが簡単に設定できるようになります。

サイトを訪れてくれた方の動線を整えて、もっとたくさんのブログ記事を読んでほしい方は、ぜひ最後まで読んでいってください。

もし「JIN:R」にしようか迷っている方には、あなたの決断を後押しする情報を提供できると思います。

ブログカードブロックのクイックガイド

JIN:Rの「ブログカード」ブロックを使えば、内部リンクも外部リンクも簡単にブログカード形式で表示できます。

ただ、ブログカードは内部リンクに使われることが多く、外部リンクにはアンカーテキストなど他のリンク方法を使う場合が多いです。

内部リンクは、自分のブログで公開している関連記事へのリンクを指します。一方、外部リンクは、他のサイトにある参照や引用の記事へリンクを設定することです。

内部リンクと外部リンクが適切に設定されていることで、読者の動線が改善され必要な情報にアクセスしやすくなる効果があります。

選択できる設定項目

ブログカードのデザインは、ベーシックかコンパクトの2種類から選べます。コンパクトでは、ラベルとボックスの表示がなく、アイキャッチ画像と記事タイトルだけの表示になります。

内部リンクか外部リンクかのリンクの種類を選びます。リンクの種類により設定項目が変わります。

内部リンク先のURLは、記事タイトルで検索するかURLを直接入力して設定します。関連記事へのリンクの他、カテゴリーページへの内部リンクも可能です。

ラベルのテキストは、「合わせて読みたい」と左上に表示されている部分のテキストです。このテキストは自由に変更できます。

ブログカードをクリックした際に、別タブ（別ウインドウ）で開くかON/OFFで選択します。

外部リンク先のURLは検索できないので、直接URLを入力してリンクを設定します。

外部リンクには記事タイトルとアイキャッチの自動取得が実装されてないので、自分で入力する必要があります。その他の項目は内部リンクと一緒です。

デザインパターン一覧

JIN:Rのブログカードボックスで設定項目を変更した、デザインパターンをご紹介していきます。

合わせて読みたい

WordPressテーマ JIN:Rの全貌を紹介【ハンパない機能性】

まず、デザイン選択：ベーシック、リンクの種類：内部リンク、ラベルのテキスト：デフォルト、別タブで開く：OFF です。

記事URLを設定しただけの、デフォルトのブログカード形式です。

ラベルテキストは変更できます

知っておくべきWordPressでページ内リンクの簡単な作り方

次は、デザイン選択：ベーシック、リンクの種類：内部リンク、ラベルのテキスト：変更、別タブで開く：OFF です。

JIN:Rのデモサイトを深掘ります。初心者向けでも機能満載！

次は、デザイン選択：コンパクト、リンクの種類：内部リンク、ラベルのテキスト：なし、別タブで開く：OFF です。コンパクトにすると「ラベルのテキスト」はなくなります。

JIN:Rのこと カテゴリー

次は、デザイン選択：コンパクト、リンクの種類：内部リンク、ラベルのテキスト：なし、別タブで開く：ON です。

外部リンクのサンプルです

WordPressテーマ 「JIN:R」公式マニュアルへ

今度は、デザイン選択：ベーシック、リンクの種類：外部リンク、ラベルのテキスト：変更、別タブで開く：ON です。

BLOG CAMPのご紹介ページへ（公式）

最後は、デザイン選択：コンパクト、リンクの種類：外部リンク、ラベルのテキスト：なし、別タブで開く：ON です。

ブログカードのさまざまな設定項目を変更したサンプルでした。表示イメージを膨らませるサポートになりましたでしょうか。

ブログカードブロックをアレンジした使い方

私が思う「ブログカード」のおすすめの使い方をご紹介します。

合わせて読みたい

JIN:R「デザイン見出し」の一歩先ゆくカスタマイズ術を紹介します。

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

JIN:R「アイコンボックス」一歩先ゆくアレンジのアイディア

JIN:R オリジナルブロックのアイコンボックスに、ブログカードのブロックを並べています。

ブログカードのベーシックのデザインをもとに、内部リンク先を増やすイメージです。

アイコンボックスはタイトル付を使っているので、「合わせて読みたい」となっているタイトルを自由に変更可能です。

合わせて読みたい（PCのみ）

ConoHa WINGは高次元でバランスした速さとコストが特徴

ConoHa WINGは高次元でバランスした速さとコストが特徴

上記は、PCのみはベーシックでスマホのみはコンパクトと、PCとスマホで見えるボックスが異なるように設定しています。

JIN:Rのブロックは基本的にPCとスマホの全ての端末で表示されますが、それをPCのみ表示とスマホのみ表示に設定も可能です。スクロール量を減らすことになり、スマホユーザーの読みやすさ向上を狙っています。

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

ブログカードブロックの基本的な使い方

「ブログカード」ブロックの使い方を内部リンクの場合で説明していきます。設定項目は、右サイドバーに表示される内容を選択するだけで完了です。

ブログカードのブロックを設置する

「/ブログカード」と入力します。

ブログカードのデザインとリンクの種類を選ぶ

ブログカード形式のデザインをベーシックかコンパクトか選びます。

リンクの種類を内部リンクか外部リンクかをクリックで選びます。

内部リンク先URLを設定する

内部リンクしたい記事のURLを文字検索するか、URLを直接入力します。

ブログカードのカスタマイズをする

ラベルのテキストを変更する場合は、入力します。

ブログカードに設定されたリンク先の開き方を別タブにするか選択します。

まとめ：画像とタイトルで関連記事を案内しよう

WordPress テーマ JIN:R のオリジナルブロック「ブログカード」の使い方を紹介しました。

ブログカードのブロック1種類で、内部リンクも外部リンクも設定可能です。そして、アイキャッチ画像と記事タイトルが表示されることで、読者の注目を集めやすいです。

ひとつの記事では収まりきらない情報や関連する情報などを内部リンクで表示するのに、ブログカードはとても効果的です。

ビジュアル要素を取り入れてサイトを訪れた人が、情報にアクセスしやすいリンク構築をしていきましょう。

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

簡単に内部リンクが設定できてしまう！

JIN:R 公式

じゅん

ブロガー

Contact

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