外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。
※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。
外部リンクの場合にも、タイトルや抜粋文をリンク先から持ってきてオリジナル形式のカードで表示する「Pz-LinkCard」を公開しました。
※Pz-HatenaBlogCardは「はてなブログカード」の非公開APIに依存しているため、現在はPz-LinkCardの使用をお勧めしています(^-^)o
機能について
記事中にショートコードでURLを指定するだけで、外部リンクへのリンクを「はてなブログカード」を利用して表示します。
手軽に見栄えの良いリンクが作成できます。
記入例
に囲まれた文字がタイトルになります。この場合も、外部リンクであっても、オリジナル形式のブログカードで表示します。
[blogcard url="https://popozure.info/20150809/8025" description="抜粋文はcontentもしくはdescriptionで指定します。"]ここがショートコードに囲まれた文字です[/blogcard]抜粋文はcontentもしくはdescriptionで指定します。ショートコードを取得するブックマークレット
コメント欄にて、
形式のコードを取得するブックマークレットの要望があったので、用意してみました。ぽぽろんのパソコンつれづれ日記。
以下を全文コピーして、リンク先URLとしてブックマークに登録してください。
javascript:void(window.prompt('Pz-HatenaBlogCard用ショートコード','[blogcard url="'+location.href+'"]'));もしくは、下の枠に囲まれているリンクを「クリックして開くのでは無く」、ブックマークバーへ「ドラッグ」して登録してください。
タイトルと抜粋文も一緒に取得するブックマークレットも用意しました。
外部リンクもオリジナル形式で表示できるメリットがあります。
リンク先のタイトルや内容を修正しても変更されませんので、内部リンクには向かないかも知れません。
詳しいブックマークレットの保存の仕方や使い方は下記リンクを参考にしてください。
タイトルと抜粋文も一緒に引用してくるブックマークレットを追加しました。
設定画面で設定できること
インストールすると、「設定」に「Pz ブログカード」という項目が追加されます。
また、プラグイン一覧のプラグイン名のところからも「設定」画面を開くことができます。
基本設定
ブログカード全般に関する設定を行います。
- 「ショートコード」
使用するショートコードを設定します。標準では「blogcard」が設定されています。- 「ショートコード 2」
複数パターンでショートコードを使用したい場合に設定します。標準では「BLOGCARD」が設定されています。- 「ショートコードで囲んだ文字列」
ショートコードに囲まれた文字列の扱いを設定します。「タイトルとして使用」にした場合で、ショートコードに囲まれた文字列がある場合には、外部リンクであってもオリジナル形式で表示します。標準では「使用しない」です。
定型書式
単体項目の組み合わせでは表現できない効果を設定します。
指定した効果によっては「影を付ける」や「余白」などの一部の設定が無効になる場合があります。（「定型書式」の一部として強制的に適用するため）
＜定型書式の例＞
- 「セロハンテープ（中央）」
カードの上側1か所をセロハンテープで留めているような効果です。
- 「斜め」
カードが少し傾いているような効果です。左余白16px以上、右余白32px以上がお勧めです。- 「3D Rotate」
カードが立体的になっているような効果です。
- 「紙がめくれた効果」
カードの右下がめくれたような効果です。記事を表示する背景に影が隠れてしまうため、ほとんどのテーマで正常に表現できません。
- 「ブルーグリーン」「グリーン」「ブルー」「オレンジ」
背景色が黒系で無いと見づらいです。どこかで見たことがありそうな色合いです。
表示設定／配置設定
カードの配置に関する設定を行います。
- 「上の余白」
- カードの上に余白を設けます。標準では「設定しない」になっています。
- 「右の余白」
カードの右に余白を設けます。標準では「16px」になっています。- 「下の余白」
カードの下に余白を設けます。標準では「16px」が設定されています。- 「左の余白」
カードの左に余白を設けます。標準では「設定しない」になっています。- 「カードの横幅」
ブログカードの最大幅を指定します。単位は「px（ピクセル・省略可能）」と「%」が使用できます。標準では「480px」が設定されています。- 「カードの高さ」
タイトル・記事・サムネイルが表示されている領域の高さを指定します。単位は「px（ピクセル・省略可能）」が使用できます。標準では「108px」が設定されています。- 「中央に寄せる」
チェックを付けると、左右に余白を設けて、行の中央に表示します。表示設定
- 「枠線の太さ」
ブログカードの枠線の色と太さを選びます。標準では「薄い色／細い(1px）」が設定されています。表示設定／外観設定
カード外観に関する設定を行います。
- 「角を丸める」
カードの四隅を丸くします。- 「リンク先の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サービスを利用することに抵抗のある場合には、代替の画像を用意するか、空欄にしておきます。
設定例。
http://favicon.hatena.ne.jp/?url=%DOMAIN_URL%http://www.google.com/s2/favicons?domain=%DOMAIN%http://www.google.com/s2/favicons?domain_url=%DOMAIN_URL%http://favicon.qfor.info/f/%DOMAIN_URL%↓リンク先サイトから「favicon.ico」を直接取得する記述も出来ますが、リンク先サイトの負担を考えると自サイト以外にはお勧めしません。
%DOMAIN_URL%/favicon.ico詳しい人用
通常は設定する必要の無い項目です。
- 「BLOCKQUOTEを使用する」
ブログカードを <blockquote>～</blockquote> で囲んで、「引用文」扱いとします。ブログカードに使うblockquoteのCSSはクリアしてあるので、見た目は変わりません。- 「nofollowを付与する」
外部リンクの場合に、「rel=nofollow”」を付与します。ただし、はてブカードで表示される場合には無効です。- 「CSSリセット（img）」
使用テーマによっては画像に余白を設定してある等、レイアウトがずれることがあります。それらのCSSを上書き設定します。テーマのCSSに合わせたい場合、チェックを外します。- 「指定したCSSを使用」
チェックを付けると、標準のスタイルシートを使わず、自分で用意したCSSファイルを読み込むことができます。- 「CSSファイル名」
指定したCSSファイルを読み込むようになります。テーマ本体のCSSなどに組み込むのであれば、空欄にします。- 「プラグイン名を表示する」
オリジナル形式で表示するとき、右下に「Pz-HatenaBlogCard」と表示させて、この記事へリンクします。現在、無効化してあります。- 「実行時間の表示」
HTMLソース内にタグを生成するのに要した時間を出力します。表示が完了するまでの時間などとは必ずしも一致しません。あくまでもデバグ用です。初期化
設定を全て初期状態に戻します。
書式がうまく反映されない場合等、いったんリセットしてみるとうまくいく場合があります。
- 「設定を初期状態へ戻す」
チェックを付けて「変更を保存」を押すと、設定内容を全て初期状態に戻します。設定のコツなど
当ページが長くなってきたので、別記事にしました。
ギャラリー
設定例です。
- 「ノーマル」…「はてなブログカード」を表示するのが目的なので、内部リンク等もなるべくはてブカードに似せています。
- 「ウィンドウぽい」…「枠：青」「サイト情報：上側」「記事に枠を付ける」「サムネイルをWebAPIで取得」。オシャレ？じゃないかも知れないけど、あまり見かけない形になりました。
- 「やわらかめ」…「角丸」「影付け」「URL表示」「サムネイルをWebAPIで取得」。ぽぽづれで使っている感じです。
- 「斜め」…定形書式の「斜め」「左余白：16px」「右余白：32px」。サイトの雰囲気に合えば…？
- 「シンプル」…「サイト情報なし」「抜粋文なし」「サムネイル：左側、影付き」「サムネイルをWebAPIで取得」「SNSカウント：タイトルの後ろ」。余計な物が要らない方に。「ShareHTMLメーカー」での出力結果に似ている感じです。
- 「ストライプ」…「背景画像」に「repeating-linear-gradient(-45deg,#fef 0px,#fef 10px,#fcd 10px,#fcd 20px)」を入力。「内側に影を付ける」「枠：薄い色／1px」「影あり」。かわいらしい感じです。
過去のバージョン
このプラグインは元々「popo-HatenaBlogCards」として作成したものです。
要望などをいただき修正の対応をしましたが、そもそも設定画面が無かったため、個人ごとの好みに対応できませんでした。
設定画面を付けて、ついでに多言語化対応をしたのが今回の「Pz-HatenaBlogCard」となります。（ver1.0.0）
また、「popo-HatenaBlogCards」ではあった機能で「Pz-HatenaBlogCard」では削除されている機能があります。
- 「bgcolor」パラメータがなくなりました。
設定画面で外部・内部・自記事の背景色を設定できる代わりに、カードごとに背景色を付けるオプションが無くなりました。ある程度のところで「リンクを『はてなブログカード』へ置き換えるプラグイン」は安定版として固めておいて、外部サイトの情報も自前取得する「Pz-LinkCard」に引き継いでいきたいとは思っています。
（まだ公開していません）
でも、なかなかやりたいことが尽きなくてついつい、こっちを直してしまうのでした。外部リンクの場合にも、タイトルや抜粋文をリンク先から持ってきてオリジナル形式のカードで表示する「Pz-LinkCard」を公開しました。
複雑な機能が無く安定した「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を生成している仕組みなどは別記事として書いていけたら良いなぁ、と思っています。関連記事
「見た目を変えたいけど、実際どうしたらいいの？」というときには…
元となるCSSファイルを用意して、設定を押したときに一部を書き換えつつ新しいCSSファイルを作成しています。何かの参考になれば幸いです。
履歴
- 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」として公開した最初のバージョンです。
コメント
ぽぽろんさんさ
ご無沙汰しております。
弁保社長です。
はてなブログカードをCSSをいじってカスタマイズしようと思い、久々に訪問させて頂いたのですが、バージョンアップを繰り返し、管理画面上で色々と簡単に変更できるようになっていて、大変助かりました！
引き続き愛用させて頂きます＾＾
弁保社長さん、おひさしぶりです。コメントありがとうございます。
「Pz-HatenaBlogCard」よりもあれこれいじれる「Pz-LinkCard」もぜひお試しください(^-^)o
これからもよろしくお願いします♪
ぽぽろんさん
Pz-LinkCard、さっそく使ってみました！
その上で2点質問です。
①シェア数が内部リンクの場合、全て1になり、外部リンクの場合、全て0になってしますが、設定がおかしいでしょうか？
②Pz-HatenaBlogCardでは、[blogcard url="URL" content="文章"]と記入することで、抜粋文をコントロールすることができましたが、Pz-LinkCardはそれができないようですが、まだ仕様にないでしょうか？
弁保社長さん、返信ありがとうございます。
さっそく試していただいたということでありがとうございます。
①facebookのシェア数を「x Shares」という形式で表示していますがご指摘のとおり正しく取得できなくなっていました。これは不具合と認識し、原因を調査します。
なお、「設定」→「Pzカード設定」にて「facebook」「はてブ」のシェア数表示を抑制することもできます。
②ブックマークレットなどでタイトルや抜粋文を指定していた場合には同じく設定画面から「ショートコードで囲んだ文字」を「タイトル」などにすることでショートコードにはさまれた文字や抜粋文が有効になります。
なお、Pz-LinkCardでは、「ツール」→「Pzカード管理」というところに入ると、記事側を訂正せずにカードに表示する抜粋文を編集することができます。
②はとくに「はてブカード」を利用するだけのPz-HatenaBlogCardと、自前でリンク先のタイトルと抜粋文をカード形式にするPz-LinkCardでの大きな違いとなります。
使い方によっては今までの方が便利な場合も考えられます。まずは「Pzカード設定」で増えている設定項目や、「Pzカード管理」画面での紹介文編集を見てみて、どちらがよりご自身に合っているか見ていただけると嬉しいです。
紹介のページとして「Pz-LinkCard」も用意しておりますので、追加質問などはぜひそちらでどうぞ♪
Pz-LinkCardでfacebookのシェア数が正しく取得できていませんでした。原因が分かり修正ができたため、テスト完了次第公開します。
はじめまして。こんなプラグインがほしかった！ということでさっそく使用させていただいております。
今後の要望としましては、
★カード全体のpaddingを設定したい
CSSでいうと.linkcard-external-wrapperになりますでしょうか。カードの枠と内部コンテンツの余白がちょっと少ないように感じました。
★スマホ表示時のカードの高さ指定
ちょっと長いタイトルのリンクを貼ると、抜粋がまったく表示されないこともあるので。
ご検討いただけると嬉しいです！
今後も期待しております。
yunosukeさん、ご利用＆コメントありがとうございます。
よくよく自分で見たところ、「はてなブログカード」の余白が12pxなのに対して、オリジナル形式のときには余白が8pxで指定していました。右側も同じ余白ですが、折り返しがあるのでなおさら左だけ狭い印象になっていました。
素の状態で「はてブカード」により似ている方が良いと考え、CSSを修正したVer1.2.8を公開しました。
さて、当プラグイン（Pz-HatenaBlogCard、以下Pz-HBC）は機能性より安定性をとり、大きな不具合が無い場合、修正しない方針になっています。
（サポートはしますので、例えば「自分で修正したい」ということであれば、喜んで修正するポイントなどを助言します。）
（次コメントに続きます。）
モバイルで表示するときなど、横幅が狭い場合、サムネイルとタイトルで表示がいっぱいになってしまって抜粋文が表示されないという現象は当サイトでも起こっているのは認識していました。
さて、当プラグイン（Pz-HatenaBlogCard、以下Pz-HBC）は機能性より安定性をとり、大きな不具合が無い場合、修正しない方針になっています。
（サポートはしますので、例えば「自分で修正したい」ということであれば、喜んで修正するポイントなどを助言します。）
一方、拙作のプラグインで「Pz-LinkCard」（以下、Pz-LkC）というのがあり、こちらは機能追加も前向きに行っているところです。
Pz-LkCも余白は「はてブカード」に比べると「狭め」ですが、外部リンクも内部リンクも「はてブカード」を使わずにオリジナル形式で表示するため、統一感のあるカード表示ができます。
また、タイトル、URL、抜粋文、サイト名称の文字サイズも変更できるのと、次のバージョンアップでは「文字数の変更」も行えるように修正がされているので文字サイズを小さ目、桁数を「100文字」などと制限することで、抜粋文が表示されやすくなります。
「モバイル時の高さ設定項目の追加」については技術的には可能と考えていますが、Pz-HBC、Pz-LkCのいずれも、カードの装飾や高さなどは表示する都度に判断しておらず、プラグインの有効化や設定保存時にCSSを自動生成しているため、「現段階では実現は厳しい」という感じです。
いっそ、「モバイル時はシンプル表示する」みたいな設定を作る方が実現しやすい気がしています。
Pz-HBCをインストールしたまま、Pz-LkCをインストール→有効化、Pz-HBCを停止でお試しいただけます。「Pz-LkCは肌に合わない…」と思ったら、Pz-HBCを有効化してから、Pz-LkCを停止→アンインストールで元に戻ります。
そんなわけで、一度、Pz-LkCもお試しいただけると幸いです(^-^)o
ぽぽろん様
お世話になります、上記コメントをさせていただいたyunosukeです。
私のほうで勘違いをしておりました…。すでに私は「Pz-LinkCard」を使っており、Pz-LinkCardへの要望ということでコメントをさせていただいたのですが、ここは「Pz-HatenaBlogCard」のページだったのですね…。
Pz-LinkCardは今後、バージョンアップもご予定されているということで期待しております！
yunosukeさん、返信ありがとうございます。
Pz-LinkCardの方をお使いだったとのことですね。
ということでPz-LkCの方で「カード内側の余白」について着手いたしました。
近日中に公開できると思います(^-^)o
カード内側の余白を設定できる Pz-LinkCard ver1.6.0 を公開しました。インストール済みの場合、WordPress管理画面のダッシュボードから更新できます。
ぽぽろん様
余白機能を実装いただきありがとうございます！
とてもいい感じにカードを作ることができました。
今後も愛用させていただきます。
yunosukeさん、返信ありがとうございます。
また何かありましたらお気軽にお知らせください。では！
ぽぽろんさん、はじめまして。素晴らしいプラグイン公開ありあとうございます。昨日より使わせて頂いております。
分からないことがありまして質問させて頂きました。
記事を一度公開した後にタイトルを変更した場合、カードのタイトルが変更されないのですが、これはそういう仕様だから仕方ないことなのでしょうか？
それとも、カードのタイトルを変更する方法はあるのでしょうか。
もし分かればお時間のあるときにご教示頂けると嬉しく思います。
ヒライさん、プラグインのご利用、そしてコメントありがとうございます。
当プラグインは外部リンクを「はてなブログカード」が表示されるHTMLにするものなので、反映のタイミングなどはコントロールできません。
自サイト内へのリンク（内部リンク）の場合は常にWordPressから取得を行っているのでリアルタイムに更新されるはずです。内部リンクかどうかは、WordPress設定画面→「設定」→「一般」と入ったところの「サイトアドレス（URL）」と比較しています。
見た目は非常によく似たプラグインではありますが、「Pz-LinkCard」の方を使っていただくと、リンク先の情報を取得したあと、「ツール」→「Pzカード管理」という画面から、現在の記事情報を再取得したり、手動での編集も行えますので、そちらも検討いただければ幸いです。
また疑問点などありましたらどうぞ(^-^)o
ぽぽろんさん
素晴らしいプラグインの開発、ありがとうございます。
内部リンクの場合新しいタブで表示させるのではなく、ページ移動の仕様にされている事を前の記事でしりました。
私は内部リンクでも新しいタブで表示させたいと思っているのですが、方法はありますか？
よろしくお願いいたします。
井野本さん、コメントありがとうございます。
現在、内部リンクのときに新しいタブで開く設定はありませんが、ご希望であれば近日中に設定を追加することはできると考えています。
「内部リンクのときでも、はてなブログカードを使う」という設定と、「内部リンクのときでも、新しいウィンドウで開く」という設定、どちらが便利でしょうか？
あと本日、外部リンクもデータベースにキャッシュしてオリジナル形式で表示できちゃう「Pz-LinkCard」も公開しました。そちらも是非検討ください。
「内部リンク」の設定項目に「新しいウィンドウで開く」を追加した、Pz-HBC ver1.2.6 を公開しました。
このチェックを入れると、自サイト内へのリンクでも新しいウィンドウまたはタブで開くようになります。このとき、自記事へのリンクに対しても新しいウィンドウまたはタブで開いてしまいます。
こんにちは、はじめまして。
プラグインをブログに導入し利用させていただいています。
とても快適に利用中なのですが、 rel=”nofollow” に対応してもらえたら嬉しいなと思いました。
お仕事での開発ではないのに要望をしてしまってごめんなさい。ご検討をお願い致しますm(_ _)m
ぽにかさん、コメントありがとうございます。
当プラグインは外部リンクの場合、「はてなブログカード」をiframeを使用して、そのまま表示しています。
このため、「はてなブログカード」の中身に関しては一切手が加えられません。
せめて設定画面で blockquote にすることで「引用」という扱いには出来るのですが、SEO的にnofollowと同じ扱いをしてくれるかというと微妙なところです。
また、リンク先サイトから見た場合の referer は hatenablog.com となってしまうため、注意が必要です。
今のところ、「手軽に」「見栄えよく」というところまでのプラグインとなります。
自力取得型のものはその辺も何とかできるのですが、キャッシュの管理画面の実装などが出来ていないため、公開できるレベルに達していません。
公開できたときには候補にしていただけると幸いです。
ぽぽろんさん、こんにちは。
お返事ありがとうございました。私のようなトンチンカンでも、このプラグインの仕組みがとてもわかりやすかったです。
他の方がやっているようなはてなブログカードのコード生成（？？）は私にはできない上級テクなので、ぽぽろんさんのプラグイン、やっぱり便利！
プラグインを導入してから記事作成が楽になりました。これからも使い続けていきたいです。本当にありがとうございました！
※Pz-HatenaBlogCardを紹介している記事内で、nofollowに関するぽぽろんさんからのお返事を私のブログで引用させてもらっても良いでしょうか？
「直せる範囲」とかは、実際にプログラムの経験とかが無いと難しいと思いますので、質問とか要望を言っていただくのは全然問題ありません！
というか、今後、自分で作るものに取り込めたりすると思うので「やはり需要あるんだなぁ」と思える今回の質問とかはありがたいです。
ところで、ブックマークレットに比べたときのこのプラグインを利用するメリットは、「他のもっといいプラグインに出会えたらショートコードを置換して差し替えられる」という点です。実は自分も乗り換える気マンマンです！
（もちろん、乗り換え候補には作成途中のPz-LinkCardもありますが♪）
設定画面で「blockquoteを使用する」にチェックを入れることで外部リンクの「はてブカード」がごっそり引用扱いになるのですが、この辺の考察は他サイトさんでされているので検索してみると良さそうです。（そういえば、内部リンクはblockquoteにする意味あるのかな…）
記事内および、ぽにかさんの関わっていただいているこの一連のコメントについて引用は問題ありません。
分かる範囲でお答えしますので、またお気軽にどうぞ(^-^)o
ぽぽろんさん、ご親切に対応いただきありがとうございました。
これからも応援しています！それでは失礼します♪
何かありましたらまたどうぞ(^-^)o
本日、外部リンクもデータベースにキャッシュしてオリジナル形式で表示できちゃう Pz-LinkCard を公開しました。
そちらであれば、外部リンクに nofollow を付けることも可能です。
何かのときに気付かれましたら、是非ご検討ください。
こんにちは。
便利そうなプラグインですね。導入を検討しています！
[blogcard url="http://poporon.poponet.jp/20150809/8025"]
この形式を出力するブックマークレットなどはつくられてはいないでしょうか？
まさきさん、コメント＆検討ありがとうございます。
ブックマークレット作成して、記事にコードは掲載しました。登録の仕方や使い方は近日更新する予定です。
さっそくの対応ありがとうございます！
さっそく導入してみたところ、自分でカスタマイズしたCSSと競合をおこしてしまったので、いろいろ調整して導入していきたいと思います。
これからもがんばってください〜。
いくつかのWordPressテーマをインストールして試してみましたが、CSSによってはずれてしまったりするようです。
対応できそうな内容であればCSSに追加していきたいと思います。