※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

ブログカード機能

キャプチャ画像

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

 

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

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

 

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

 

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

 

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

 

※こちらが本家はてブのブログカード・サンプルです。

キャプチャ画像

 

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


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

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

 

なお【Volar】では同一サイト内の関連ページへのリンクと外部サイトの関連ページへのリンクの2種類をご用意してあります。

 

2つの違いは

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

 

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

【Volar】独自の装飾機能

SIRIUSテンプレート【Volar】には独自の装飾機能が搭載されてます。

 

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

SIRIUSとはどんなツール?

SIRIUSってどんなツールなのかを詳しくご紹介します。

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

 

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

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

 

 

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

SIRIUSにOGP&Twitterカード自動設定機能

SIRIUSテンプレート【Volar】ではOGPとTwitterカードが自動設定できます。

 

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

 

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

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

 

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

 

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

 

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

なお今回のブログカードは「ブログカードのブックマークレットを作成しました」をカスタマイズして使わせていただいてます。

SIRIUSテンプレート【Volar】

キャプチャ画像

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

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像