外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。
上記リンクに設定画面の説明はありますが、もっと具体的な「Tips」的なことを随時追加していきたいと思います。
「blogcard」以外のショートコードにしたい
使用する「ショートコード」を変更することができます。
通常は
ショートコードを「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」になります。
このように記述をしておくと、
%DOMAIN_URL% の部分が置き換わり、
ファビコンが取得されます。
GoogleのAPIを使用するのであれば、次のように記述します。
Favicon Converter Betaを使用するときの記述です。
カードをBLOCKQUOTEで囲って引用にしたい
「BLOCKQUOTEを使用する」は、<div>～</div>タグの代わりに<blockquote>～</blockquote>タグで囲います。
「引用文」という扱いになるので、HTML上「ブログカード中に書かれているテキストは自分のサイトのコンテンツでは無い引用文」という扱いになります。
一部の検索エンジンでの検索結果に多少影響があるかも知れませんが、一概にメリットともデメリットとも言えません。
なお、外部リンクだけではなく、内部リンクに対しても有効です。
外部リンクに rel=”nofollow” を付けたい
「nofollowを付与する」にチェックを付けると、外部リンクに対して rel=”nofollow” を付与します。
ただし、titleパラメータなどでタイトルを指定したときのみ有効です。
タイトルを指定しない場合には、「はてなブログカード」がそのまま表示されてしまうためです。
自分で用意したCSSを使用したい
「指定したCSSを使用」にチェックを付けると、設定画面から自動生成したCSSファイルを使用しなくなります。
設定画面で自動生成した「style.css」を別名に変更して指定することで、設定画面から上書きされなくなる、といった使い方ができます。
「CSSファイル名」で指定したファイルを呼び出すようになりますが、空欄の場合、プラグイン側ではCSSファイルを呼び出しません。
サイト全体で一貫したスタイルを使用したい場合などに使用できますが、よく分からない場合はチェックを外した状態のままにしてください。
カードを作成するためにどのくらいの時間がかかっているか確認したい
「実行時間の表示」にチェックを入れると、HTMLソースにコメントとしてカードのHTMLを作成するのにかかった時間が書きだされます。
ソーシャルカウントの取得を行うと非常に時間がかかります。その目安を見ることができます。
そもそもは作成や不具合の調査に使用するためのものなので、通常使用時にはチェックを外しておいてください。
（この機能が有効になっている場合、今後、設定の一部がコメントとして出力されることがあります。）
コメント
初めまして。
Pz-HatenaBlogCardの設定に関してご質問です。
スマホ表示の際、抜粋記事が表示されず、サムネイルと記事タイトルのみ表示になります。
スマホの際でも抜粋記事を表示したいのですがどうすればよいでしょうか？
当方の状況は下記になります。
・内部リンクのみ抜粋が表示されず、外部リンクの場合は表示される
・スマホのブラウザはchrome、safariのどちらでも同様の現象
・PCでは問題なく抜粋が表示される
・ワードプレスのverはWordPress 4.3.1 。テーマはGorgeous1 TCD013
・Pz-HatenaBlogCardのverは1.2.7
上記の状況です。色々と調べてみたのですが方法が分からず問い合わせさせて頂きました。
お手数ですが教えて頂けますと幸いです。
よろしくお願いします。
佐藤さん、ご利用ありがとうございます。そして、コメントありがとうございます。
まず内部リンクについては、WordPressのget_postという機能でタイトル・抜粋文を取得しています。また、オプション画面にて「抜粋文を表示する／しない」の設定を行うことができます。
ただし、モバイルかどうかの判定は内部で行っておらず、当方のテストサイトで確認したところ、モバイルでも抜粋が表示されているようです。
WordPressテーマを別の物にしても同じ現象が出るか確認することは出来ますでしょうか。有償テーマのようですので、こちらで同じ環境が作成できません。
もしサイトを直接見せていただけるならば、コメント欄か、公開を控えたい場合にはツイッターのDMなどで教えていただけるとありがたいです。
1回目の回答で解決できずすいません。
どうやら、横幅が狭いモバイル端末で見たところ、タイトルとURLの表示が精いっぱいで抜粋文の表示がされていないようでした。
URL表示は自分も好きなのですが、表示をしないことで少しでも抜粋文の表示部分を確保できると思います。
外部リンクも自前で表示させる「Pz-LinkCard」プラグインはタイトルや抜粋文の文字サイズが変更できるようになっています。
それぞれ「クセ」は違いますが、どちらも同じショートコードのまま使用できるので、両方をインストールして片方を有効化したらもう片方を停止状態にして、両方試してみて、自分に合った方を使っていただけると幸いです(^-^)o