[Pz-HBC]設定のコツなど

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

ぽぽづれ。

 

12 Posts

13 Shares

9 Users

13 Pockets

2015.08.09

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

https://popozure.info/pz-hatenablogcard

外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。外部リンクの場合にも、タイトルや抜粋文をリンク先から持ってきてオリジナル形式のカードで表示する「Pz-LinkCard」を公開しました。※Pz-HatenaBlogCardは「はてなブログカード」の非公開APIに依存しているため、現在はPz-LinkCardの使用をお勧めしています(^-^)o機能について記事...

上記リンクに設定画面の説明はありますが、もっと具体的な「Tips」的なことを随時追加していきたいと思います。

「blogcard」以外のショートコードにしたい

使用する「ショートコード」を変更することができます。

通常は が設定されているので、b、l、o、g、c、a、r、d、と8文字も入力する必要があります。

ショートコードを「blogcard」のまま使用した例。
[blogcard url="https://popozure.info/20150723/7753"]
[blogcard url="https://popozure.info/20150808/7988"]
[blogcard url="https://popozure.info/20150805/7946"]
[blogcard url="https://popozure.info/20150803/7930"]

「link」など連想しやすい文字にしたり、「bc」や「bm」など短くすることで使い勝手が上がります。

1文字にすることもできるので、例えばAタグにちなんで「a」とすることもできます。

ショートコードを「bc」にした例。
[bc url="https://popozure.info/20150723/7753"]
[bc url="https://popozure.info/20150808/7988"]
[bc url="https://popozure.info/20150805/7946"]
[bc url="https://popozure.info/20150803/7930"]

他プラグインからの移行であれば、今まで使っていたショートコード名を設定すれば、記事内の置き換えが不要です。

（置き換える場合には「Search Regex」が便利です。）

枠線の太さを変えたい

「枠線の太さ」は「はてなブログカード」に準拠して、「薄くて細い線」を標準としています。

背景色などによっては見づらいため、「黒／普通(2px)」などに変更すると見やすくなることがあります。

細かい指定は出来ませんが、「青」「緑」「赤」「二重線」「点線」といった枠も選べます。

「二重線」を設定した例

カードの横幅を変えたい

「カードの横幅」は、「max-width」で指定する値です。

「480px」とすると480pxの幅で表示しますが、表示幅が狭くなるとそれに合わせて小さくなります。

「100%」と設定すると、表示幅いっぱいに表示されます。

「センタリング」の設定と合わせて、小さいカードを真ん中に寄せる、といったことができます。

カードとカードの間隔を変えたい

WordPressテーマによっては、ブログカードの余白がアンバランスになることがあります。

例えば「左側が削れて表示されてしまう」ときは、「左の余白」を設定することで改善されることがあります。

カードを連続で並べたとき、隙間無く配置されてしまうときには「上の余白」「下の余白」を設定することで、自然な間隔に配置できます。

余白を狭くして、影を付けることで、より立体的に見せることもできます。

枠に効果を付けたい

「角を丸める」や「影を付ける」を指定すると、カードが強調されます。

「枠の太さ」設定などと組み合わせることで、オリジナリティーを出せます。

「角を丸める」「影をつける」「二重線」を設定した例

サムネイルの位置を変えたい

サイト内へのリンクのときのサムネイルの位置を左側にすることができます。

「背景色」と組み合わせれば、外部リンクとの差別化が図れます。

「角を丸める」「影をつける」「左寄せ」を設定した例

ver1.2.0で「サイト情報を上側」「記事の枠」「サムネイルの影付け」が追加されました。

ユニークな見た目にしたい

単体の設定項目では行えない「定型書式書式」を追加しました。

（実装が難しいもので無ければ増やしていきたいです）

＜定型書式の例＞

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

ファビコンの取得APIを変更したい

「ファビコンの取得API」は、ファビコンの画像URLを指定します。

特定の文字列を指定すると、URLなどに置き換わります。

「%DOMAIN_URL%」…ドメインのURLに置き換わります。このページであれば「https://popozure.info」になります。

「%DOMAIN%」…ドメインのURLに置き換わります。このページであれば「popozure.info」になります。

「％URL%」…URLに置き換わります。このページであれば「https://popozure.info/pz-hatenablogcard」になります。

このように記述をしておくと、

http://favicon.hatena.ne.jp/?url=%DOMAIN_URL%

%DOMAIN_URL% の部分が置き換わり、

http://favicon.hatena.ne.jp/?url=https://popozure.info

ファビコンが取得されます。

GoogleのAPIを使用するのであれば、次のように記述します。

http://www.google.com/s2/favicons?domain=%DOMAIN%

Favicon Converter Betaを使用するときの記述です。

http://favicon.qfor.info/f/%DOMAIN_URL%

カードをBLOCKQUOTEで囲って引用にしたい

「BLOCKQUOTEを使用する」は、<div>～</div>タグの代わりに<blockquote>～</blockquote>タグで囲います。

「引用文」という扱いになるので、HTML上「ブログカード中に書かれているテキストは自分のサイトのコンテンツでは無い引用文」という扱いになります。

一部の検索エンジンでの検索結果に多少影響があるかも知れませんが、一概にメリットともデメリットとも言えません。

なお、外部リンクだけではなく、内部リンクに対しても有効です。

外部リンクに rel=”nofollow” を付けたい

「nofollowを付与する」にチェックを付けると、外部リンクに対して rel=”nofollow” を付与します。

ただし、titleパラメータなどでタイトルを指定したときのみ有効です。

タイトルを指定しない場合には、「はてなブログカード」がそのまま表示されてしまうためです。

自分で用意したCSSを使用したい

「指定したCSSを使用」にチェックを付けると、設定画面から自動生成したCSSファイルを使用しなくなります。

設定画面で自動生成した「style.css」を別名に変更して指定することで、設定画面から上書きされなくなる、といった使い方ができます。

「CSSファイル名」で指定したファイルを呼び出すようになりますが、空欄の場合、プラグイン側ではCSSファイルを呼び出しません。

サイト全体で一貫したスタイルを使用したい場合などに使用できますが、よく分からない場合はチェックを外した状態のままにしてください。

カードを作成するためにどのくらいの時間がかかっているか確認したい

「実行時間の表示」にチェックを入れると、HTMLソースにコメントとしてカードのHTMLを作成するのにかかった時間が書きだされます。

ソーシャルカウントの取得を行うと非常に時間がかかります。その目安を見ることができます。

そもそもは作成や不具合の調査に使用するためのものなので、通常使用時にはチェックを外しておいてください。

（この機能が有効になっている場合、今後、設定の一部がコメントとして出力されることがあります。）