Simplicityの外部リンクブログカードの設定方法

Simplicity2.1.9から、Simplicity独自の外部リンクブログカード機能を追加しました。

以下のような外部リンクのブログカードを手軽に作成できるようになりました。

寝ながら出来るコトや使えるモノを紹介

以下では、外部ブログカード機能設定の説明をしたいと思います。

ブログカードの使い方については、以下を参照してください。

Simplicityでブログカードを使う方法の紹介です。ブログカード利用には、利点と難点がありますので、それらを踏まえてご使用ください。
スポンサーリンク

外部ブログカード機能の設定

外部ブログカード機能は、Wordpress管理画面の「外観→カスタマイズ→ブログカード(外部リンク)」から行えます。

2.1.9でブログカード(外部リンク)項目追加

2.1.9のバージョンアップで、内部リンクのブログカードと外部リンクのものを別にしました。

以下では、それぞれの機能について説明します。

ブログカード有効

まずは、「プログカード有効」がオンになっていないと外部ブログカード機能は利用できません。

外部ブログカードタイプ

今回追加した独自のブログカード機能は「外部ブログカードタイプ」が「ブログカード(独自キャッシュ)」にしないと利用できません。

「はてなカード」は、はてなのブログカードサービスを利用した機能です。

「Embedlyカード」は、Embedlyを利用したカード表示機能です。

「外部ブログカードタイプ」が「ブログカード(独自キャッシュ)」でない場合は、以降の設定は反映されません。

サムネイルを右側にする

「サムネイルを右側にする」を有効にすると、サムネイル位置が右側になります。

サムネイルを右側にする ブログカードのサムネイルを右側に表示するか。

数字はこのように左側に入っているサムネイルが

サムネイル左側のブログカード

以下のように右側に表示されます。

サムネイル右側のブログカード

今回機能追加するときに、内部ブログカードと、外部ブログカードの機能はあえて分けました。内部と外部のブログカードの表示を差別化したいときなどに利用すると良いかもしれません。

新しいタブを開く

「新しいタブを開く」機能が有効になっていると、ブログカード内のリンクがすべて新しいタブで開かれます(※target=”_blank”で開く)。

新しいタブで開く ブログカードのリンクをクリックした時に新しいタブで開くか。

内部ブログカードと、外部ブログカードの機能は分けてあるので、内部と外部のブログカードの開き方を分けたい場合は便利です。

サイトロゴを表示

「サイトロゴを表示」を有効にすると、ブログカード右下のファビコンや、ドメイン名が表示されます。

サイトロゴを表示 サイトのファビコンとドメインを表示するか。(※「その他」設定項目のファビコン設定をしてないとロゴは表示されません。

以下の部分を表示させたくない場合はオフにしてください。

サムネイル左側のブログカード1

サイトロゴリンク有効

「サイトロゴリンク有効」にチェックを入れると、トップドメインに対するリンクが貼られます。

サイトロゴリンク有効 サイトドメインにトップURLへのリンクを貼るかどうか。

「ページへのリンクで外部ブログカードは使いたいけど、トップページまではリンクを貼りたくない」なんて時に利用します。

はてブ数を表示

「はてブ数を表示」を有効にすると、ブログカード右下にはてブ数が表示されます。

はてブ数を表示する

はてなブックマーク数に限ることではありますが、リンク先のある程度の注目度はわかるようになります。

サムネイル左側のブログカード2

カード幅を広げる

「カード幅を広げる」を有効にすると、ブログカードがワイド表示になります。

カード幅を広げる カード幅はデフォルトで500pxですが、横幅をさらに広げます。

ブログ内の文字が少し窮屈だなと思うときは、使うと良いかもしれません。

ブログカードのワイド表示

外部ブログカードキャシュ保存日数

「外部ブログカードキャシュ保存日数」には、OGP情報のキャッシュの保存日数を指定します。

外部ブログカードキャシュ保存日数

あまりに短かすぎると、サイト上のページ表示が遅くなり、負荷もかかる可能性があるのである程度長めに設定しておくことをお勧めします。

キャッシュの初回取得時より、保存日数以上が経過すると再度リンク先からOGP情報を取得します。これにより、一定期間ごとに外部リンク情報を更新します。

リンク先の、タイトルやディスクリプション、サムネイルが変更されたとしても、一定期間ごとに再取得するので自動的に更新されることになります。

キャッシュ更新モード

「キャッシュ更新モード」は、すぐさま外部リンクOGP情報を更新したい時に利用します。

キャッシュ更新モード 「キャッシュ更新モード」を有効にして管理者(ログインユーザー)によって外部ブログカードが表示されているページを閲覧したときに、OGPキャシュが更新されます。更新が済んだら無効などに戻すなどして使用してください。

OGPキャッシュ情報を更新するには、まずはテーマカスタマイザーで「キャッシュ更新モード」を有効にします。

あとは「キャッシュ更新モード」が有効になっている状態で、「目当ての更新したい外部ブログカード」が表示されているページをブラウザで表示させます。

すると、新たにリンク先からOGP情報が取得できるので、OGP情報を更新することができます。

OGP情報更新したら、「キャッシュ更新モード」は無効にしておくことをおすすめします。

詳しい方法は、以下を参照してください。

Simplicityの外部ブログカード機能を使用したとき、取得先がサーバーエラーになっていたりすると、以下のように「This page i...
一般サイトユーザーによるOGP情報の更新を行わないために、サイト管理者(Wordpressのログインユーザー)が表示しないと更新されないようになっています。

キャッシュを全て削除する方法

外部ブログカードのキャッシュを全て削除するには、テーマ(子テーマ)を一旦別のテーマに選択し、元に戻すことで全キャッシュをクリアすることができます。

独自外部ブログカードの利点

一応今回追加した機能の利点は以下になります。

  • Aタグを用いて参考にしたページなどにリンクソースを送ることができる(iframeとかではない)
  • リンク先の相手のアクセス解析に、参照元(リンク元のURL)情報が表示され何処からのリンクか分る
  • 一定期間(キャッシュ保存期間)ごとに情報が更新されるのでリンク先の変更に対応できる
  • キャッシュさえ取得してあればそれなりには表示は早い(はてなののiframeとかEmbedlyよりは)
  • スタイルシートで見た目を変更できる

今回の機能を使うと、iframeを使わず自前のコンテンツになるので、CSSでデザインを変更することもできます。

内部ブログカードと、外部ブログカードそれぞれ見た目を変更しても良いかもしれません。

独自外部ブログカードの難点

反面、以下のような難点もあります。

  • キャッシュ保存期間を短くしすぎるとサイトの規模によっては相手サイトにも負荷が多少かかる
  • 最初に外部ブログカードを表示させるときは、リンク先から情報を取得するので多少ページ表示が重くなる
  • リダイレクトURLのリンク先は正しく表示されないこともある
  • og:imageの画像URLが相対パスだった場合は画像を取得できない
  • og:imageが取得できないページではページキャプチャ画像を表示する(HeartRails Capture利用)
  • 取得したog:imageはテキスト化してデータベースに保存しているので、バックアップの時などにデータベースサイズが増える

とりあえず、キャッシュ保存期間は、デフォルトで90日となっているので、リンク先相手に短期間に何度も何度も負荷がかかることはありません(仕様により7日より短いキャッシュ保存期間には出来ないようになっています)。

そして外部リンクを使用した記事を作成したら、まず最初に投稿者がページ確認をすると思うので、そのときに外部ブログキャッシュが作成されます。なので、訪問者のページ表示が遅くなるということは、そうそう起こらないのではないかと思います。

ただ、1ページ内に大量の外部リンクを貼った場合は、初回表示はかなり重くなると思うので、そこら辺はご了承ください。

「リダイレクトURL」と「相対パスのog:image」だった場合でも、何とかカード表示をちゃんとしたいところですが、今のところは良い解決方法が思いついていないです。

まとめ

今回独自外部ブログカード機能を実装したことにより、「はてなカード」や「Embedlyカード」のような外部プラットフォームに依存する必要が無くなりました。

これで、例えば今後「はてなカード」の仕様変更により、「はてなカードが、急にはてなサービス以外で利用できなくなった」なんてことがあっても、大丈夫になりました(あくまでも仮定の話です)。

「はてなカード」をこれまで通り使いたい場合は、そのまま利用することもできます。

とりあえず、他のサービスを利用しないとが外部ブログカード機能が使えない状態を解消することができたのは、個人的に満足しています。

前々から、この機能をつけたかったので、ようやく機能追加することができました。

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)

コメント

  1. cyapu より:

    こんばんは
    Blogカードについて教えてください。
    以前は、はてなブログのような表示になっていたのですが、最近、Blogカードの表示がかなり大きくなっています。
    例えば、上にタイトルが出てきて、アイキャッチ画像だけの表示になっています。
    http://cyapu.com/2016/10/01/ilepo/
    以前のように、アイキャッチ画像が小さいくて、記事が少し出ている感じがよいのですが
    何か間違ったところをクリックしたかもしれません。

  2. アバター画像 わいひら より:

    以下の設定は試してみられましたでしょうか。
    WordPress4.5.3から投稿にURLを挿入すると大きなブログカードが表示されてしまうのを無効にする方法
    上記の不具合は、Simplicity最新版でも対応されています。

    • cyapu より:

      これは、子テーマに書き込めばいいのでしょうか
      書き込んでも表示は変わりませんでした。

      • アバター画像 わいひら より:

        子テーマのfunctions.phpに書けばOKです。
        ただ、それでもうまくいかない場合は、解説ページ内にある、「その他の対処方法(URLリンク)」の方法を利用するしかないかもしれません。

        <a href="URL">URL</a>
        • cyapu より:

          こんばんは、先日の質問の続きです。
          子テーマに書いた日は何も変化なかったのですが
          先程確認すると、いつの間にか直っていました。
          お手数おかけしました。

  3. kr より:

    はてなブックマーク数に限ることではありますが、リンク先のある程度の注目度はわかるように鳴ります。

    →「な」or「成」ですね!

    •Aタグを用いて参考にしたページなど「にに」リンクソースを送ることができる

    →「に」ですね!

    修正なさったら、コメント削除してください。
    よろしくお願いいたします(他の私の誤字指摘コメも)。

    • アバター画像 わいひら より:

      ご報告ありがとうございます!
      修正させていただきました。
      コメント部分は、今後の戒めとして残しておこうと思います。
      ※もちろんどうしても削除をご希望であれば削除させていただきます。