WordPressで「はてなブログカード」を利用する Pz-HatenaBlogCard

シェアする

  • このエントリーをはてなブックマークに追加
  • 60

外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。

※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。

外部リンクの場合にも、タイトルや抜粋文をリンク先から持ってきてオリジナル形式のカードで表示する「Pz-LinkCard」を公開しました。
※Pz-HatenaBlogCardは「はてなブログカード」の非公開APIに依存しているため、現在はPz-LinkCardの使用をお勧めしています(^-^)o

pz-lkc-iconWordPressでリンクをカード形式で表示する Pz-LinkCard
リンクをカード形式で表示させるWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリで公開しています。当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています。はじめにWordPressで記事を書いている...

機能について

記事中にショートコードでURLを指定するだけで、外部リンクへのリンクを「はてなブログカード」を利用して表示します。

手軽に見栄えの良いリンクが作成できます。

記入例

内部リンク(自サイト内へのリンク)の場合には、オリジナル形式のブログカードで表示します。

外部リンクの場合でも、タイトルを指定したときには、オリジナル形式のブログカードで表示します。

また、ショートコードを使用するタイプなので、『他のもっと良いプラグインを見つけたら、乗り換えやすい』という利点(?)があります。

インストール方法について

WordPress公式プラグインディレクトリからダウンロードできます。

  1. WordPress管理画面から、「プラグイン」→「新規追加」と選んでいきます。
  2. 「プラグインの検索」と書かれているところに、「pz」や「hatenablogcard」といったキーワードを入力して検索します。
    プラグイン名:Pz-HatenaBlogCard
    作者:poporon
    search-plugin-pz-hatenablogcard
  3. 「いますぐインストール」を押します。
    install-now
  4. 「インストールが完了しました」と表示されたら「プラグインを有効化」を押します。
    activate-plugin
  5. 「インストール済みプラグイン」の一覧で有効化になっていることを確認します。
    activate-pz-hatenablogcard

あとは、設定画面で見栄えを設定したあと、記事中にショートコードを記述していくだけです。

使い方

記事中にショートコードを記述します。

ここでは標準のショートコード「blogcard」を使用した例を記載します。

urlパラメータにURLを記述します。(ダブルクォートで囲います)

外部URLの場合は、「はてなブログカード」をそのまま使用して表示します。

WordPressの「サイトアドレス(URL)」と先頭一致した場合、内部URLと判断して、オリジナル形式のブログカードで表示します。

titleパラメータを指定した文字列をタイトルとして表示することができます。

この場合、外部リンクであっても、オリジナル形式のブログカードで表示します。

titleパラメータを指定した場合、contentパラメータもしくはdescriptionパラメータで指定した文字列を本文として表示することができます。

紹介したいサイトがあります
WordPressで外部リンクをはてなブログカードとして簡単に表示できるプラグインが公開されています

はてなブログカードはリンクをクリックすると「新しいウィンドウで開く」になりますが、オリジナル形式で表示するときは内部リンクの場合には同じウィンドウに開きます。

ショートコードに囲まれた文字をタイトルにする

設定画面から、ショートコードに囲まれた文字を「タイトル」もしくは「抜粋文」として使用するように設定ができます。

「タイトルとして使用」とした場合、[blogcard url=”…”]~[/blogcard]に囲まれた文字がタイトルになります。

この場合も、外部リンクであっても、オリジナル形式のブログカードで表示します。

ここがショートコードに囲まれた文字です
抜粋文はcontentもしくはdescriptionで指定します。

ショートコードを取得するブックマークレット

コメント欄にて、[blogcard url=”…”] 形式のコードを取得するブックマークレットの要望があったので、用意してみました。

以下を全文コピーして、リンク先URLとしてブックマークに登録してください。

もしくは、下の枠に囲まれているリンクを「クリックして開くのでは無く」、ブックマークバーへ「ドラッグ」して登録してください。

getBlogCard

タイトルと抜粋文も一緒に取得するブックマークレットも用意しました。

外部リンクもオリジナル形式で表示できるメリットがあります。

リンク先のタイトルや内容を修正しても変更されませんので、内部リンクには向かないかも知れません。

getBlogCard2

詳しいブックマークレットの保存の仕方や使い方は下記リンクを参考にしてください。

bookmarklet-drag[Pz-HBC]ショートコードを取得するブックマークレットつくってみた
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。URLが記述されたショートコードを取得するブックマークレットを用意しました。タイトルと抜粋文も取得するブッ...

タイトルと抜粋文も一緒に引用してくるブックマークレットを追加しました。

use-bookmarklet[Pz-HBC]ブックマークレットでタイトルを含めたショートコードを取得する
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。外部リンクでもオリジナル形式で表示させたい需要がありますが、当プラグインには外部リンクの情報を取得する...

設定画面で設定できること

インストールすると、「設定」に「Pz ブログカード」という項目が追加されます。

setting-hatenablogcard

また、プラグイン一覧のプラグイン名のところからも「設定」画面を開くことができます。

plugin-list-menu

基本設定

ブログカード全般に関する設定を行います。

  • 「ショートコード」
    使用するショートコードを設定します。標準では「blogcard」が設定されています。
  • 「ショートコード 2」
    複数パターンでショートコードを使用したい場合に設定します。標準では「BLOGCARD」が設定されています。
  • 「ショートコードで囲んだ文字列」
    ショートコードに囲まれた文字列の扱いを設定します。「タイトルとして使用」にした場合で、ショートコードに囲まれた文字列がある場合には、外部リンクであってもオリジナル形式で表示します。標準では「使用しない」です。
    inlinetext-to-title

定型書式

単体項目の組み合わせでは表現できない効果を設定します。

指定した効果によっては「影を付ける」や「余白」などの一部の設定が無効になる場合があります。(「定型書式」の一部として強制的に適用するため)

<定型書式の例>

  • 「セロハンテープ(中央)」
    カードの上側1か所をセロハンテープで留めているような効果です。
    cellophane1
  • 「斜め」
    カードが少し傾いているような効果です。左余白16px以上、右余白32px以上がお勧めです。
  • 「3D Rotate」
    カードが立体的になっているような効果です。
    3d-rotate
  • 「紙がめくれた効果」
    カードの右下がめくれたような効果です。記事を表示する背景に影が隠れてしまうため、ほとんどのテーマで正常に表現できません。
    curl
  • 「ブルーグリーン」「グリーン」「ブルー」「オレンジ」
    背景色が黒系で無いと見づらいです。どこかで見たことがありそうな色合いです。
    special-color

表示設定/配置設定

カードの配置に関する設定を行います。

position-setting

  • 「上の余白」
  • カードの上に余白を設けます。標準では「設定しない」になっています。
  • 「右の余白」
    カードの右に余白を設けます。標準では「16px」になっています。
  • 「下の余白」
    カードの下に余白を設けます。標準では「16px」が設定されています。
  • 「左の余白」
    カードの左に余白を設けます。標準では「設定しない」になっています。
  • 「カードの横幅」
    ブログカードの最大幅を指定します。単位は「px(ピクセル・省略可能)」と「%」が使用できます。標準では「480px」が設定されています。
  • 「カードの高さ」
    タイトル・記事・サムネイルが表示されている領域の高さを指定します。単位は「px(ピクセル・省略可能)」が使用できます。標準では「108px」が設定されています。
  • 「中央に寄せる」
    チェックを付けると、左右に余白を設けて、行の中央に表示します。

表示設定

  • 「枠線の太さ」
    ブログカードの枠線の色と太さを選びます。標準では「薄い色/細い(1px)」が設定されています。

表示設定/外観設定

カード外観に関する設定を行います。

style-setting

  • 「角を丸める」
    カードの四隅を丸くします。
  • 「リンク先のURLを表示する」
    タイトル下にリンク先URLを表示します。
  • 「記事の情報に枠を付ける」
    タイトル・URL・記事・サムネイルの部分に枠を付けて、内側に影を付けます。「ウィンドウ」のような表示にすることができます。
  • 「抜粋文を表示する」
    チェックを外すと抜粋文が表示されなくなります。
  • 「サイト情報」
    ドメイン名等の表示位置を変更できます。上側、下側、表示しないを設定できます。
  • 「サイト名称を使用」
    ドメイン名の代わりにサイト名を使用します。内部リンクの場合にのみ有効です。
  • 「サムネイル」
    サムネイルの表示位置を変更できます。左側、右側、表示しないを設定できます。
  • 「影を付ける」
    サムネイル画像に影を付けます。
  • 「内側に影を付ける」
    カード内側に影の効果を付けます。へこんで見えたり、紙の影のように見えます。標準ではチェックなしになっています。
  • 「影を付ける」
    カードの右下に影の効果を付けて浮いているように見せます。

表示設定/ソーシャルカウント設定

ソーシャルカウントをWebAPIを利用して取得します。自サイト内であってもWebAPIで取得し直します。非同期取得は行っていないため、非常に時間がかかるものがあります。

  • 「シェア数を表示する」
    「なし」「サイト情報の後ろ」「タイトルの後ろ」が選べます。標準では「サイト情報の後ろ」になっています。
  • 「はてなブックマーク」
    はてブのブックマーク数を取得して、テキストで表示します。
  • 「フェイスブック」
    facebookのシェア数を取得して、テキストで表示します。「いいね!」の数は含まれていません。また、比較的取得に時間がかかります。
  • 「ツイッター」
    Twitterのツイート数を取得して、テキストで表示します。

文字設定

文字色と大きさの設定を行います。

  • 「タイトル」
    リンク先のタイトルを表示する文字色と大きさを設定します。
  • 「URL」
    「リンク先のURLを表示する」にチェックを入れたときに表示されるURLの文字色と大きさを設定します。
  • 「抜粋文」
    「抜粋文を表示する」にチェックを入れたときに表示される抜粋文の文字色と大きさを設定します。
  • 「サイト情報」
    「サイト情報」を「上側」か「下側」に設定したときに表示されるドメイン名等の文字色と大きさを設定します。

外部リンク

外部URLを指定したときの動作に関する設定を行います。

外部リンクの場合には、タイトル指定をしたとき以外は「はてなブログカード」をそのまま利用します。

「はてなブログカード」で表示される場合、外部のサービスのため、以下の設定は適用されません。

  • 「はてなブログカードを利用する」
    外部リンクは「はてなブログカード」を利用して表示するため、チェックは外せません。(タイトルを設定した場合はオリジナル形式で表示します)
    以下の設定は、はてブカードで表示されている場合には無効です。
  • 「背景色」
    カードの背景色を設定します。
  • 「背景画像」
    画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
  • 「サムネイル」
    サムネイルの取得方法として「なし」か「WebAPIを利用する」が設定できます。
  • 「サイトアイコン」
    サイトアイコン(ファビコン)の取得方法として「なし」か「WebAPIを利用する」が設定できます。
  • 「サイト情報」
    ドメイン名の横に表示する文字列を指定します(例.「(外部サイト)」)。

内部リンク

サイト内へのURLを指定したときの動作に関する設定を行います。

  • 「背景色」
    カードの背景色を設定します。
  • 「背景画像」
    画像URLを指定すると背景画像にできます。CSSのbackground-imageに与えられるパラメータがそのまま使用できます。
  • 「サムネイル」
    サムネイルの取得方法として「なし」か「直接取得する」か「WebAPIを利用する」が設定できます。標準は「直接取得する」になっています。
  • 「サイトアイコン」
    サイトアイコン(ファビコン)の取得方法として「なし」か「直接取得する」か「WebAPIを利用する」が設定できます。「直接取得する」はWordPress4.3.0以降で有効です。標準は「WebAPIを利用する」になっています。
  • 「サイト情報」
    内部リンクのときに、ドメイン名の横に表示するテキストを設定します。標準では「(このサイト内)」が設定されています。
  • 「サムネイルの位置」
    サムネイルの位置を指定します。
  • 「新しいウィンドウで開く」
    クリックしたとき、同一ウィンドウでは無く、新しいウィンドウまたはタブで開くようになります。同ページへのリンクにも適用されます。(target=”_blank”指定)
  • 同ページへのリンク/「背景色」
    記事と同一のURLを指定したときのカードの色を設定します。
  • 同ページへのリンク/「サイト情報」
    記事と同一のURLを指定したとき、ドメイン名の横に表示するテキストを設定します。標準では「(このページ)」が設定されています。

画像取得APIの指定

画像取得に使用するWebAPIに関する設定を行います。

次の文字列は、置き換えて使用されます。

  • 「%DOMAIN_URL%」
    「http」から始まるドメイン名に置き換わります。
  • 「%DOMAIN%」
    「http://」を抜いたドメイン名に置き換わります。
  • 「%URL%」
    esc_urlによってURL文字列に変換したリンク先URLに置き換わります。

置き換えルールは「ファビコン取得」「サムネイル取得」のいずれにも有効です。

  • 「ファビコンの取得API」
    ドメイン名の左側に表示する画像URLを指定します。通常は画像取得WebAPIのURLを記述しますが、自分で用意した画像URLを指定することもできます。(標準では「Hatena::Favicon」のURLが設定されています。)
  • 「サムネイル画像の取得API」
    サムネイルの取得方法を「WebAPI」に設定した場合、このURLを使用して画像を取得します。(標準では「HeartRails Capture」のURLが設定されています。)

これらのWebAPIを使用することで、カードを表示するたびに相手サイトへ不要に多量なアクセスをすることを防ぎます。

外部のWebAPIサービスを利用することに抵抗のある場合には、代替の画像を用意するか、空欄にしておきます。

設定例。

↓リンク先サイトから「favicon.ico」を直接取得する記述も出来ますが、リンク先サイトの負担を考えると自サイト以外にはお勧めしません。

詳しい人用

通常は設定する必要の無い項目です。

  • 「BLOCKQUOTEを使用する」
    ブログカードを <blockquote>~</blockquote> で囲んで、「引用文」扱いとします。ブログカードに使うblockquoteのCSSはクリアしてあるので、見た目は変わりません。
  • 「nofollowを付与する」
    外部リンクの場合に、「rel=nofollow”」を付与します。ただし、はてブカードで表示される場合には無効です。
  • 「CSSリセット(img)」
    使用テーマによっては画像に余白を設定してある等、レイアウトがずれることがあります。それらのCSSを上書き設定します。テーマのCSSに合わせたい場合、チェックを外します。
  • 「指定したCSSを使用」
    チェックを付けると、標準のスタイルシートを使わず、自分で用意したCSSファイルを読み込むことができます。
  • 「CSSファイル名」
    指定したCSSファイルを読み込むようになります。テーマ本体のCSSなどに組み込むのであれば、空欄にします。
  • 「プラグイン名を表示する」
    オリジナル形式で表示するとき、右下に「Pz-HatenaBlogCard」と表示させて、この記事へリンクします。現在、無効化してあります。
  • 「実行時間の表示」
    HTMLソース内にタグを生成するのに要した時間を出力します。表示が完了するまでの時間などとは必ずしも一致しません。あくまでもデバグ用です。

初期化

設定を全て初期状態に戻します。

書式がうまく反映されない場合等、いったんリセットしてみるとうまくいく場合があります。

  • 「設定を初期状態へ戻す」
    チェックを付けて「変更を保存」を押すと、設定内容を全て初期状態に戻します。

設定のコツなど

当ページが長くなってきたので、別記事にしました。

[Pz-HBC]設定のコツなど
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。上記リンクに設定画面の説明はありますが、もっと具体的な「Tips」的なことを随時追加していきたいと思います...

ギャラリー

設定例です。

  • 「ノーマル」…「はてなブログカード」を表示するのが目的なので、内部リンク等もなるべくはてブカードに似せています。
    normal
  • 「ウィンドウぽい」…「枠:青」「サイト情報:上側」「記事に枠を付ける」「サムネイルをWebAPIで取得」。オシャレ?じゃないかも知れないけど、あまり見かけない形になりました。
    blue-inset-thumbnail
  • 「やわらかめ」…「角丸」「影付け」「URL表示」「サムネイルをWebAPIで取得」。ぽぽづれで使っている感じです。
    radius-yellow-inset-thumbnail-left
  • 「斜め」…定形書式の「斜め」「左余白:16px」「右余白:32px」。サイトの雰囲気に合えば…?
    slanting
  • 「シンプル」…「サイト情報なし」「抜粋文なし」「サムネイル:左側、影付き」「サムネイルをWebAPIで取得」「SNSカウント:タイトルの後ろ」。余計な物が要らない方に。「ShareHTMLメーカー」での出力結果に似ている感じです。
    thumbnail-and-title
  • 「ストライプ」…「背景画像」に「repeating-linear-gradient(-45deg,#fef 0px,#fef 10px,#fcd 10px,#fcd 20px)」を入力。「内側に影を付ける」「枠:薄い色/1px」「影あり」。かわいらしい感じです。
    gradient-pink

過去のバージョン

このプラグインは元々「popo-HatenaBlogCards」として作成したものです。

要望などをいただき修正の対応をしましたが、そもそも設定画面が無かったため、個人ごとの好みに対応できませんでした。

設定画面を付けて、ついでに多言語化対応をしたのが今回の「Pz-HatenaBlogCard」となります。(ver1.0.0)

また、「popo-HatenaBlogCards」ではあった機能で「Pz-HatenaBlogCard」では削除されている機能があります。

  • 「bgcolor」パラメータがなくなりました。
    設定画面で外部・内部・自記事の背景色を設定できる代わりに、カードごとに背景色を付けるオプションが無くなりました。

ある程度のところで「リンクを『はてなブログカード』へ置き換えるプラグイン」は安定版として固めておいて、外部サイトの情報も自前取得する「Pz-LinkCard」に引き継いでいきたいとは思っています。(まだ公開していません)

でも、なかなかやりたいことが尽きなくてついつい、こっちを直してしまうのでした。

外部リンクの場合にも、タイトルや抜粋文をリンク先から持ってきてオリジナル形式のカードで表示する「Pz-LinkCard」を公開しました。

pz-lkc-iconWordPressでリンクをカード形式で表示する Pz-LinkCard
リンクをカード形式で表示させるWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリで公開しています。当ページは「Pz-LinkCard」の説明書のようなもので、プラグインのバージョンアップとともに更新しています。はじめにWordPressで記事を書いている...

複雑な機能が無く安定した「Pz-HBC」と、外部リンクでも装飾したカードが簡単に利用できる「Pz-LkC」、お好みでお使いください。

同じショートコードを使用すれば、お互いに乗り換え可能です。

表示を確認したテーマ

ちゃんと表示されることを保証するものではありませんが、想定どおりに表示されたテーマを記載します。

(コメントなどで報告いただいたものも記載します。)

プラグインやカスタマイズによって表示が崩れる場合がありますので、ご了承ください。

正しく表示がされていると思われるWordPressテーマ

  • Twenty Thirteen 1.5
  • Twenty Twelve 1.7 … サムネイル画像の角が丸まります。
  • STINGER5 20141227
  • Brasserie 1.4
  • Customizr 3.4.6
  • Twenty Fourteen 1.4 … オリジナル形式のとき、ドメイン名とはてな数の間が改行される(1.1.6で対応)
  • Twenty Fifteen 1.2 … オリジナル形式のとき、ファビコン、ドメイン名+サイト情報、はてな数の間がそれぞれ改行されます(1.1.6で対応)
  • Responsive Brix 1.6 … オリジナル形式のとき、はてな数の直前で改行されてしまいます(1.1.6で対応)
  • STINGER3 … 画像の周りに枠が表示されてしまうため、内部リンクの場合にサムネイルとファビコンがズレて表示されます(1.0.2で対応)
  • DeepJaggy-threeColumn … STINGER3と同様(1.0.2で対応済)
  • Simplicity 1.8.0、1.8.2、1.8.4 … オリジナル形式のとき、サイト情報の位置で改行されてしまいます(1.1.6で対応)

表示に不具合が確認されているテーマ

  • 賢威 … サムネイルがはみ出して表示される不具合が報告されています(1.1.6で対応)(未検証)

既知の不具合など

  • 同一記事内で、「閉め」があるショートコードと、無いショートコードを同時に使用すると、記事の一部が表示されない。
    • WordPressショートコードの仕様です。興味のある方はこちらの記事を参照ください。
  • WordPressテーマによっては、スタイルが上書きされて崩れる。
    • 比較的多くのテーマに対して良い表示結果になりそうなものは、CSSのテンプレートに加えていく予定です。その結果、テーマによっては表示が崩れる場合があります。
    • 「リセットCSS」にチェックをすることで、画像まわりのズレが改善します。(標準ではチェックされた状態になっています)
    • リセットCSSの設定を有効にしている場合でも、後から読みだされたスタイルに上書きされる場合があります。特にレスポンシブなテーマや、!important 指定を積極的にしているテーマでのズレを修正することは無理そうです。
    • jQueryを使って強制的にスタイルを上書きされる場合があります。なるべく競合しづらいクラス名を使用していますが、部分一致等については全てに対応することは厳しいです。
  •  外部リンクの表示に「はてなブログカード」を使用している。
    • 当プラグインの目的なので、これは当プラグインの仕様です。
    • はてなブログカードの仕様により、リンク先をクリックした場合の referer は hatena.ne.jp になります。(リンク元が相手には分かりません。)
    • 上と同じ理由で、WordPressの特徴の一つであるピンバックが飛びません。
    • そもそも「はてなブログカード」はブログパーツとして自由に使用できるように公開されているものでは無いため、問題があれば公開を中止する可能性もあります。
    • はてなブログカードの仕様変更によってうまく表示されなくなる可能性があります。
    • 外部リンクの場合でも、タイトル指定をした場合にはオリジナル形式での表示になるため、これらの問題は発生しません。
  • カードそのものが表示されないサイトがある。
    • 404 Not Foundを返すサイトや、SSLを使用したサイト(https://で始まるサイト)の場合、サイトの取得そのものがエラーとなり、カードそのものが表示されない場合があります。
    • ブラウザのアクセスで無い場合、ロボットからのアクセスやスクレイピングと見なして、内容を返さないように設計してるサイトがあります。
    • 外部リンクで上記のように表示されないのは「はてなブログカード」の仕様となります。
  • レスポンシブ対応のWordPressテーマを使用していると、サムネイルやファビコンなどの画像部分がずれたりする。
    • テーマのスタイルシートに「@media」が指定されており、そちらが優先して適用されるため、「CSSリセット」にチェックを入れた場合でも、タブレットやスマートフォンで見た場合に正しく表示されない場合があります。
  • 文字色が選べない。
    • タイトルや抜粋文、サイト名の文字色が選べないため、暗い色にしたときに見づらくなってしまう。(要望があれば文字色が変更できるようにしようと思います。)(ver1.2.1で対応しました)
  • 内部リンクのサイト情報に設定したテキストが消えてしまう。(ver1.2.4で修正しました)
  • 幅を狭くしたときにソーシャルカウントの文字が途中で改行されてしまう。(ver1.2.4で修正しました)
  • サムネイル画像の縦幅が小さい場合、上に寄ってしまってバランスが悪い。(CSSをどうすれば良いのか分からないので、現在放置中。)

その他

表示のズレ、不具合などありましたら、この記事のコメント欄などで報告していただけると、可能な限り対応いたします。

(趣味でやっているものなので、申し訳ありませんが、サポートは最低限となってしまいます。極力対応したい気持ちはありますが、知識にも限界がありまして…。)

報告の際には、テーマ名やスクリーンショット、もしくは実際に不具合を起こしている状態のURLなどを教えていただけると対応できる可能性があがります。

ツイッターアカウント「@popozure」を用意したので、そちらでも大丈夫かも知れませんが、不慣れなため反応がにぶい場合があります。

「設定の詳細(コツ)」や、CSSを生成している仕組みなどは別記事として書いていけたら良いなぁ、と思っています。

関連記事

「見た目を変えたいけど、実際どうしたらいいの?」というときには…

[Pz-HBC]設定のコツなど
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。上記リンクに設定画面の説明はありますが、もっと具体的な「Tips」的なことを随時追加していきたいと思います...

元となるCSSファイルを用意して、設定を押したときに一部を書き換えつつ新しいCSSファイルを作成しています。何かの参考になれば幸いです。

pz-hatenablogcard-thumbnail[Pz-HBC]スタイルシートを自動生成する仕組み
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公開しています。このプラグインで使っているスタイルシートを自動生成する仕組みについて。公式プラグインディレクトリにて公開しました。ダッシュボードから...

履歴

  • 2015.11.17 ver1.2.8
    • CSS微調整。(Thanks yunosuke)
  • 2015.10.15 ver1.2.7
    • readme.txtの修正、スクリーンショットの更新。
    • 設定画面に入ると、Pz-LkCへの移行案内を表示(「これ、いつも出て!イヤン!Σ(゚ロ゚)o゙」って思われるヤツですね(^-^;)します。設定の下の方の「お知らせを表示しない」にチェックを入れると表示されなくなります。
    • スタイルシートの指定に失敗していたのを修正。
    • サムネイル取得APIを「HeartRails Capture」から「WordPress.orgの(非公開)API」に変更しました。
  • 2015.10.04 ver1.2.6
    • 内部リンクをクリックしたとき「新しいウィンドウで開く」設定を追加しました。自記事の場合でも適用されてしまいます。(Thanks 井野本)
    • 致命的でないエラーをいくつか修正しました。
  • 2015.09.28 ver1.2.5
    • カード全体をアンカーで囲って、どこをクリックしてもリンク先へ飛べる設定を追加。(はてブカードには無効)
    • ソーシャルカウントのタイムアウトを設定しました。特にツイッターやフェイスブックの取得が遅いようです。
  • 2015.09.23 ver1.2.4
    • ver1.2.3で発生した、内部リンクのサイト情報が、設定画面を開いたときに空欄になってしまう不具合を修正。
    • 内部リンクの場合、サイトアイコンを直接取得できるように設定を追加。(WordPress4.3.0以降)(Thanks @misoji_13)
    • 「タイトル」「URL」「抜粋文」「サイト情報」の文字サイズが変更できるように設定を追加。
    • 横幅を狭くしたときにソーシャルカウントが途中で改行されてしまうのを修正。
  • 2015.09.19 ver1.2.3
    • 設定画面を整理しました。(いくつかの項目の分類を変更しました。慣れたと思ったら位置が変わってしまいすいません。)
    • 「カードの高さ」の設定を追加。
    • ソーシャルカウントの位置を「サイト情報」もしくは「タイトル」の後ろを選択できるように変更。
  • 2015.09.18 ver1.2.2
    • ソーシャルカウントの取得に使用していた命令を変更。(Thanks @misoji_13)
    • ファビコンの位置を微調整。(Thanks @misoji_13)
    • その他スタイルシートの微調整。
  • 2015.09.17 ver1.2.1
    • WordPress 4.3.1 での動作確認。
    • 文字色が指定できるように修正。
    • 外部リンクにnofollowを付与できるように修正。(Thanks ぽにか)
    • カードの背景画像を指定できるように修正。
    • 定型書式に新しい書式を追加。
    • ソーシャルカウントを画像では無くテキストで表示するように修正。
    • ソーシャルカウントにfacebookのシェア数を追加。(Thanks 弁保社長)
    • ソーシャルカウントにTwitterのツイート数を追加。(Thanks @misoji_13)
  • 2015.09.17 ver1.2.0
    • アンインストール時にオプション設定やCSSファイルを削除するように修正。
    • 設定画面を大幅に修正。
    • 「上下左右の余白」「枠:なし」「内側に影を付ける」「リンク先URL表示」「抜粋文非表示」「サイト情報の位置」等を追加。
    • ユニークな外観を設定できるオマケ機能「定型書式」を追加。「セロハンテープ」等。
    • 「リセットCSS」で適用する項目を追加。(Simplicity+DboxSliderの組み合わせではてブカードが関係無いところに表示されるのに対応)(Thanks @okaerinasainet)
  • 2015.08.25 ver1.1.7b
    • 以前のバージョンから更新した場合、CSSを作成するように修正。
  • 2015.08.25 ver1.1.7
    • ダッシュボードからプラグインを更新した場合、スタイルシートが消えてしまう不具合を修正。
  • 2015.08.25 ver1.1.6
    • 特定のWordPressテーマもしくはjQueryを使用している場合で要素名に「site」等の文字が入っている場合、強制的にスタイルが適用されてしまうことがあったため、一部のクラス名を変更。
  • 2015.08.25 ver1.1.5
    • WordPress 4.3.0での動作確認。
    • 「作成にかかった時間を表示する」機能を「作成にかかった時間をコメントとしてHTMLへ出力する」機能へ変更しました。
  • 2015.08.22 ver1.1.4
    • プラグインメニューの画面に「設定」を追加する際、ver1.1.2での実装に誤りがあったのを修正。
  • 2015.08.22 ver1.1.1、ver1.1.2
    • Readmeを修正。(公式プラグインページ対応)
    • プラグインメニューの画面に「設定」を追加。
  • 2015.08.22 ver1.1.0
    • 公式プラグインディレクトリで公開しました。
  • 2015.08.17 ver1.0.3
    • WordPressテーマによって、上下の余白が極端に狭くなるのを防ぐため、余白設定を設けました。
    • 未定義の配列参照の警告が出ていたのを修正しました。
  • 2015.08.10 ver1.0.2
    • WordPressテーマによって、サムネイル、ファビコン、はてな数などの画像がずれて表示される場合にpadding、margin、borderをリセットできる設定を追加しました。(Thanks @okaerinasainet)
  • 2015.08.10 ver1.0.1
    • サムネイル画像がはみ出すことがあるのを修正しました。(Thanks 弁保社長)
    • サムネイル位置が左右逆だったのを修正しました。
  • 2015.08.09 ver1.0.0
    • 当サイトにて「Pz-HatenaBlogCard」として公開した最初のバージョンです。

広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする