[Pz-HBC][1.2.1]更新しました。文字色の設定、背景画像の設定など

Pz-HatenaBlogCard
この記事は約5分で読めます。

前→ver1.2.0 次→ver1.2.2

外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」。

ver1.2.1を公式プラグインディレクトリにて公開しました。

このプラグインは?

外部リンクを「はてなブログカード」で表示させるWordPressプラグインです。

「はてブカード」を表示させつつも、枠などの見た目を変更することが出来ます。

詳しくは下記リンク先にて。

 

リンク先が自サイト内の場合は「はてブカード」を使用せず、オリジナル形式で表示させます。

外部リンクの場合でも、タイトル文字を指定した場合には、オリジナル形式で表示されます。

タイトル文字を指定するには次の2つの方法があります。

  • titleパラメータを指定する。
    [blogcard url="xxx" title="タイトル"]
  • 「ショートコードに囲まれた文字をタイトルとして使用」を有効にしたうえで、ショートコード~閉じの間に文字を記述する。
    [blogcard url="xxx"]タイトル[/blogcard]

変更点

ほとんど前回の予告どおりです。

「背景画像」を指定できるように修正

「背景画像」を指定できるように修正しました。

background-image

画像のURLを記述した際には、背景に画像を設置します。

http://example.com/image/popozure.png

指定された画像が並んで表示されるので、上下左右が繋がっている画像を用意するか、「最大幅×高さ150px」程度の画像を用意すると良いでしょう。

background-image-popozure

 

指定した文字の先頭が「http://」と「https://」以外の場合は、「background-image」に直接渡します。

「画像ファイル」を用意しなくても、次のような指定でグラデーションをかけることができます。

repeating-linear-gradient( 0deg, #8cf, #fff )

gradient

単色よりも見栄えが良いですね。

文字色を指定できるように修正

文字が黒固定だったので、背景色を暗くした場合に見えなくなっていました。

文字色の設定をできるように修正しました。

「タイトル」「URL」「抜粋文」「サイト情報」の4種類が指定できます。

外部リンクに rel=”nofollow” を付与できるように修正

需要がありそうなので、外部リンクに対して nofollow を付けられるように修正しました。

他の設定もそうですが、「はてなブログカード」で表示されている場合には設定は反映されません。

外部リンクに nofollow をしっかり付けたい場合、タイトルを指定するようにしてください。

「サイト情報」を「上側」に表示するように設定しておくと、「はてなブログカード」で表示されているのか、オリジナル形式で表示されているのか判別しやすくなります。

hatenablogcard-and-linkcard

この図では上が「はてなブログカード」。下も外部リンクですが、タイトルを指定しているため、オリジナル形式で表示されています。

SNSシェア数を追加

「はてなブックマーク」のブックマーク数に、画像取得のAPIを使用していましたが、カウントを取得してテキストで表示するように修正しました。

Syncer」さんのページを参考にして実装しました。

過去にコメントで「facebook」の「いいね!」が取得できないか打診があったため、「facebook」の「シェア数」を取得してテキストで表示するように修正しました。(「いいね!」と「シェア数」は別の物のようですが、facebookをしていないのでうまく検証出来ませんでした。)

※facebook APIは凄く動作が重いです。カード1枚に付き、数秒かかる場合があります。

最近、ツイッター上で「Twitter」が取得できないか打診があったため、ツイッターのAPIでツイート数を取得してテキストで表示するように修正しました。

facebookとTwitterは、どこにリンクさせればいいのか分からなかったので表示のみです。

0件のときは非表示、1件のときは「1 user」「1 share」「1 tweet」、2件以上のときは「2 users」「2 shares」「2 tweets」と表示します。

色はそれっぽいのにしたつもりですが、変更したい場合には「pz-hatenablogcard-style.tmp」の「sns-…」というクラス名を見つけて変更して、設定画面で「変更を保存」ボタンを押してください。

(プラグインのバージョンアップをしたときに戻ってしまいますが…)

定型書式

「適当に貼った感じ」の「セロハンテープ(長)」の効果を追加しました。

このセロハンテープの感じが好きで、放っておくとどんどん登録していきそうです…。

cellophane3

立体な感じの「3D 回転」を追加しました。

インパクトはあるかも知れないけど、使いどころが今ひとつ思いつきません(^-^;

3d-rotate

知っている人はよく知っている、「ブルーグリーン(中立っぽい色)」「緑(エンなんとか側)」「青(レジなんとか側)」「オレンジ(インフォメーション的な色)」を追加しました。

外部リンクは「50%透過」しているので、リンクして何とかしたみたいな感じになります。透過なので背景画像との組み合わせで更にそれっぽく見えると思います。

背景色・背景画像が暗くないと文字が全然見えないです。

special-color

その他

当プラグインは「外部リンクを『はてなブログカードで表示する』」目的のWordPressプラグインです。

「シンプルかつ安定」を目指していたのですが、調子に乗って色々詰め込んでしまった感じがあります。

設定画面も長くなってしまったので、タブにしたりもしたいのですが、勉強中です。

本当はある程度のところで「Pz-HatenaBlogCard」の開発はストップして、外部リンクも自前取得してDBにキャッシュする「Pz-LinkCard」の開発を進めたいところだったりもします。

取得&キャッシュはできるものの、プラグイン導入直後にリンク先へのアクセスが発生したり、キャッシュの管理画面を作らないと、変な状態(サーバーエラー等)でキャッシュされてしまったサイトを修正できない等、課題が山積みです。

とりあえず公開しちゃった方が開発が進むというのもあるのですが(^-^;

コメント

  1. […] ぽぽづれ。参考にしました[Pz-HBC][1.2.1]更新しました。文字色の設定、背景画像の設定などhttps://popozure.info/20150917/8939前→ver1.2.0 次→ver1.2.2外部リンクを「はてなブログカード」に置き換 […]

タイトルとURLをコピーしました