ブログカードによる関連ページ紹介

キャプチャ画像

サイト内の関連ページや関連する外部サイトなどを紹介する時、
通常はテキストなどにリンクを貼ります。

 

関連記事はコチラのように。

(※クリックしても何も起きません)

 

しかしながらこの手のリンクだとたまに気づかれないこともあったりするものです。

 

そういった機会損失を防ぐためでもあるんでしょうか、はてなブックマークの「ブログカード」はとっても見やすく、ついクリックしたくなるデザインになってますよね

 

「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式のことです。

 

※こちらが本家はてブのブログカード見本です。

キャプチャ画像

 

これにならってカスタムテンプレート【Volar】でも、
ブログカードの表示を取り入れてみました。


【Volar式】ブログカードの作り方

やり方はブックマークレットという簡易プログラムを使って
リンク先のページURLをコピーするだけのカンタン仕様。

 

なおカスタムテンプレート【Volar】では、同一サイト内の関連ページへのリンクと
外部サイトの関連ページへのリンクの2種類に分けてご用意してみました。

 

2つの違いは

  • 同一サイト内へのリンクは外周がサイトカラーで色付けされた二重枠で表示される
  • 外部ドメインへのリンクは外周がグレー枠固定
  • ブログカード最下段のテキスト(画像)がそれぞれ個別のもので表示される
  • 同一サイト内はページがそのまま切り替わるが、外部サイトは新規タブで開く

 

たとえばこちらが当サイト内の関連ページへのリンクです。

 

独自の装飾機能

カスタムテンプレート【Volar】には独自の装飾機能が追加搭載されてます。

 

そしてこちらが外部サイトへのリンクになります。

 

SIRIUS(シリウス)ってどんなツール?

SIRIUS(シリウス)がどんなツールなのかを詳しくご紹介します。

 

ただし大前提として、OGP設定が済ませてあるサイト(ページ)が対象となります。

 

OGP設定がないサイト(ページ)だと、ページの内容やアイキャッチ画像などの情報が取得できないため、下のブログカードのようにページタイトルのみの表示となってしまいます。

(※リンク先は一時的にOGP設定を外して取得したブログカードで、実際にはOGP設定が付いてるサイトです)

 

 

※【Volar】ではOGP設定もカンタンに付けられます。

 

OGP自動設定 - SIRIUSカスタムテンプレート【Volar】の特長

カスタムテンプレート【Volar】にはOGP設定が標準で搭載されてます。

 

なおこのブログカードはページを表示するたびにリンク先の情報を読みに行くAPI形式ではなく、その時点で取得した情報を表示しているためリンク先の情報が変わっても自動更新とはなりません

 

必要なら新たに取得し直すか、ブログカードの中身をご自身で編集する必要があります。

 

APIというのは「共有可能なプログラム」「ソフトの機能を共有可能にする仕組み」のことで、ウェブの世界では外部から呼び出して利用することが多いです。

 

たとえば当サイトで利用している【Volar式】ブログカードのプログラムは、仮にAPIを利用する設定であったなら訪問者がページを開くたびにリンク先の情報を呼びに行くので常に最新の情報が表示されるはずです。

 

しかしながらそれを実行する際は必ずデータのやり取りが発生するためページの読み込みスピードにも影響してきます。

 

それ以前にAPI利用可能な環境ではないというのもあって、最初に読み込んだデータしか表示できないようになっています。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替