Pz-LinkCardではてなブログカードを超えるリンクを実現!

      2016/03/08

 

当サイトはWordPressを利用していますが、デフォルトの状態で記事内に内部であれ外部であれリンクを貼ろうとすると、こんな感じになるだけでした。もちろん、これで目的は十分に達成できているわけですが、やはりどうしても私には味気なく感じてしまいます。何とかもう少し見栄えを良くすることはできないか?

 

そこで、色々と調べた結果、今回は「Pz-LinKCard」というプラグインを導入しました。そして、このプラグインのおかげで、無事にはてなブログ風のブログカードを作成することができました!ですので、今回はこの件について記事にしていこうと思います。

 

スポンサード リンク

 

はてなブログカードとは

 

はてなブログの方の記事を読んでいて、

スクリーンショット 2016-03-01 21.27.57

(※これはただの画像であり、リンクではありません)

 

のようなリンクを見掛けたことはないでしょうか。と言うか、必ずあると思います。当初はよく分かっていなかったのですが、これがはてなブログ独自のブログカードになります。そして、これを見るにつけて、「ああ、WordPressでもこんな感じのブログカードが使えたらな〜」という気持ちは募るばかりでした。だって、やっぱりただのテキストよりもこっちの方がクリックしたくなりますもん。

 

そうは言いつつ、実際にはなかなかそちらに着手する余裕がありませんでした。そして、いつしか忘れかけていた頃、「あ!そういえば!」とふと思い立ち、今度は後回しにしないよう急いであちこち調べ回りました。すると、どうやら「Pz-LinkCard」というプラグインで実現可能なようなのです。詳細はこれから書いていきますが、実際にこれを使って作ったブログカードがこちらです。

 

どうですか?皆さん!本家よりもむしろ上なんじゃないかと思える出来栄えで、非常に満足しています。「お!良いじゃん!」と思われた方がいらっしゃいましたら、導入は非常に簡単ですので、是非とも試してみてくださいね。

 

 

Pz-LinkCard

 

このプラグインを作成された「ぽぽづれ。」様のページは

 

になります。本当に素晴らしいと思います。このページ自体はPz-LinkCardの詳細な取扱説明書となっており、辞書的な感じで使うのが良いかと思います。こちらでは、初心者向けに簡単な導入方法を説明してまいります。

 

インストール

 

まずはダッシュボードの「プラグイン」→「新規追加」を選択します。

スクリーンショット 2016-02-29 20.54.09

 

右側の検索窓に「Pz-LinkCard」と入力し、検索を実行します。

スクリーンショット 2016-02-29 20.54.53

 

そうしますと、目的のPz-LinlkCardが出て来ます。「今すぐインストール」をクリックしてインストールしましょう。

スクリーンショット 2016-02-29 20.52.42

 

インストールが完了したら、プラグインの有効化を忘れずに行いましょう。「プラグインを有効化」をクリックします。

スクリーンショット 2016-02-29 20.55.29

 

これでプラグインが有効化されました。

スクリーンショット 2016-02-29 20.55.45

 

 

設定

 

引き続き、Pz-LinkCardの設定を行います。ただ、正直に言うとデフォルトのままでも十分かも知れません。まずは「設定」に「Pz カード設定」が追加されていますので、これをクリックします。

スクリーンショット 2016-02-29 21.12.27

 

あるいは、「プラグイン」→「インストール済みプラグイン」からPz-LinkCardを探し、ここから設定することもできます。

スクリーンショット 2016-02-29 20.56.22

 

 

ショートコード

 

実際に記事を書く際に使用するショートコードを設定します。大文字・小文字は区別され、デフォルトでは「blogcard」となっています。私はそのまま使っていますが、必要に応じて使い易い・覚えやすいように変更してください。

スクリーンショット 2016-03-01 21.52.51

 

また、ショートコードで囲んだ文字列を設定すると、リンク先から取得したタイトルや抜粋文の代わりに、囲まれた文字列がカードに表示されるようです。デフォルトは「使用しない」になっており、私はそのままにしてあります。なお、この設定はショートコード1にのみ適用されるようです。

スクリーンショット 2016-03-01 21.52.57

 

 

定型書式

 

定型書式は、デフォルトでは「Pz リンクカード 標準書式」になっています。そして、私はやはりデフォルトのままです。実際、それで何も困っていません。ただ、カードの色などを自分で設定したい場合、この定型書式の設定が優先されて反映されなくなってしまうそうなので、「なし」に変更する必要があるようです。

スクリーンショット 2016-02-29 20.59.58

 

 

配置設定

 

文字通り、ブログカードの配置に関する設定です。なお、こういった好みは人それぞれですので、こればっかりは実際に自分で設定してみて、その上でブログカードの表示のされ方を確認してみるしかないでしょう。個人的にはデフォルトの設定で十分気に入っています。

スクリーンショット 2016-02-29 21.16.25

 

※2016年3月8日追記

横幅が狭く感じられるようになったため、「カードの横幅」を当ブログに合わせて680pxに変更いたしました。

 

※2016年3月8日追記 終了

 

 

リンク範囲・枠線

 

チェックが入っている場合は、カードのどこをクリックしてもリンク先が開きます。チェックを外すと、タイトル、URL、サムネイル、サイト名称のみクリック対象となります。私はチェックを入れたままにしてあります。また、枠線の太さも変更できますが、これもそのままです。

スクリーンショット 2016-02-29 21.14.27

 

 

外観設定

 

角を丸めたり、テキストやサムネイルの表示位置を変更したり、表示内容を選んだりすることができます。ちなみに、下がデフォルト状態です。これも実際にいじって表示を確認し、好きなように設定するのが良いかと思われます。影の付け方なんかも選べますね。

スクリーンショット 2016-02-29 21.15.58

 

 

ソーシャルカウント設定

 

そのまんまでして、シェア数表示の設定です。表示する場合は「サイト情報の後ろ」か「タイトルの後ろ」になります。ちなみに、「なし」にもできます。なお、ツイッターに関しては取得を停止しているようです。

スクリーンショット 2016-02-29 21.16.59

 

 

文字設定

 

各パーツの文字色と大きさの設定を行います。これも、実際にいじって表示がどう変わるかを照らし合わせるしかないかと思います。ちなみに、私は相変わらずデフォルトです。と言うか、デフォルトで十分満足しているので、あまりいじる必要が無いというのが正直なところです。

スクリーンショット 2016-02-29 21.19.25

 

 

外部リンク

 

外部サイトのURLを指定した場合のブログカードの設定になります。背景色や背景画像が設定できる他、サムネイルやサイトアイコンの取得を行うかどうかも設定できます。また、ブログカードをクリックした際に、新しいウィンドウで開くかどうかの設定も行えます。

スクリーンショット 2016-02-29 21.20.54

 

 

内部リンク

 

外部リンクとほぼ同様です。ただし、サムネイルやサイトアイコンの取得方法に「直接取得する」が追加されており、デフォルトではこれになっています。

スクリーンショット 2016-02-29 21.21.34

 

 

同ページへのリンク

 

こちらも基本は内部・外部リンクと同様です。そもそも同一ページをリンクするつもりが無いため、ここはほぼスルーです。

スクリーンショット 2016-02-29 21.23.07

 

 

画像取得APIの指定

 

画像取得に使用するWebAPIに関する設定です。これもデフォルトのままで良いと思います。

スクリーンショット 2016-02-29 21.27.03

 

なお、詳しい人用により詳細な設定ができるようになっていますが、私は「詳しい人」では無いのでスルーします。また、初期化もできるようになっていますので、いじくり過ぎてしっちゃかめっちゃかになってしまった方はそちらから初期化してください。

 

 

使用方法

 

Pz-LinkCardの最大の魅力は、とにかく簡単なことです。インストールして有効化し、設定さえ終わってしまえば、あとは何も難しい作業はありません。難しいhtmlやらcssやらの知識は一切不要です。本当に素晴らしいです。

 

実際の使用方法ですが、本当に単純でして、エディタ上ではこんな感じで記事内に記述します。

スクリーンショット 2016-03-01 22.32.29

 

すると、実際の記事ではこんな風に表示されます。

 

いやー、何度見ても良いですね。ということで、ショートコードの構成は以下のようになっていますので、この「リンク先URL」部分に目的のサイトURLを入力してください。同じようなブログカードが表示されるはずです。

スクリーンショット 2016-03-01 22.37.39

 

 

何だかリンクを貼るのが楽しく思えて来ますね。しかも、ここまで全く難しい作業はありません。ですので、気になった方は是非とも試してみてください。というわけで、今回は以上になります。

 

スポンサード リンク

 

 

関連記事

 

 

 




当ブログにお越しいただきありがとうございます。

下記ランキングサイトに登録して勉強中です。

ブログ発展のため、下記クリックにどうかご協力ください。

よろしくお願いします!

 ↓ ↓ ↓   ↓ ↓ ↓

ブログランキング・にほんブログ村へ


ここまでお読みいただきありがとうございます


気に入っていただけましたら
「フォロー」「いいね!」をお願いいたします!

あなたにオススメの記事はこちら!

 - カスタマイズ, ブログ