WordPressプラグイン「Pz-LinkCard」ではてなカード風のリンクを作ろう！

はてなカード風にいい感じのリンクが作れるWordPressプラグイン「Pz-LinkCard」を紹介します。

できる限りはてなカードにデザインを寄せたので、ぜひお試しを！

1 「Pz-LinkCard」ってなに？
2 ダウンロード & インストール
3 設定
4 デザイン設定
- 4.1 CSS追記
5 リンクを埋め込む

「Pz-LinkCard」ってなに？

はてなカードのように、リンクを入れたら自動で画像やタイトル、抜粋等を引っ張ってきてくれるWordPressのプラグインです。

今回の完成図としては以下のようなリンクです。なんとなくカッコいいリンクが作れます。

※ 画像

ダウンロード & インストール

WordPress管理画面 > プラグイン > 新規追加 > 検索「Pz-LinkCard」 > 有効化

設定

WordPress管理画面 > 設定 > Pzカード設定

基本設定

ここの設定は基本的には変更不要です。

表示設定

配置設定で意識するのは、横幅くらいですかね。今回は縦幅はautoで無理やり書き換えてしまってますので、値は何でもOKです。ただし、横幅は反映されますので、任意の値を選んでください。

カード全体をリンク・・・チェックしてもしなくてもOK
枠線の太さ・・・なんでもOK

外観設定

「角を丸める」にチェック（どちらでもいい）
サイト情報・・・「上側」選択。「サイト名称を使用」にチェック
「区切り線」はチェック不要
「リンク先のURLを表示する」はチェック不要
「記事の情報に枠を付ける」はチェック不要
「抜粋文を表示する」はチェック！
「内側に影を付ける」はチェック不要
サムネイル・・・「右側」を選択。「影を付ける」はチェック不要。「幅に合わせて縮小」はチェック不要

シェア数を表示するは「なし」を選択。

文字設定

ここで意識したいのは、表示の桁数です。今回は縦の長さに制限をかけていないので、タイトルや抜粋が長すぎると、縦に長いあまりカッコよくないカードリンクになってしまいます。個人的にオススメなのは、

サイト情報・・・桁数「50」
タイトル・・・桁数「100」
抜粋文・・・桁数「200」

色や大きさも好みで良いのですが、全体的なバランスを考えながら選ぶといいでしょう。

外部リンク

外部リンクで意識するのはサムネイルの部分ですね。外部リンクを設置して画像を表示させたい場合は、「WebAPIを利用する」を選択してください。

内部リンク

こちらも外部リンクと同様にサムネイル部分だけ意識すればOKです。WebAPIを使用すると少しサイトが重くなるので、内部リンクの場合は「直接取得できない場合、WebAPIを利用する」を選択しましょう。

設定に関しては以上です。

デザイン設定

設定は完了しましたが、現時点では、プラグイン独自のデザインが適応されています。

ちなみに今はこんな感じです。

別にそんな悪くもないです。が、今回の目的ははてなカードっぽいデザインにすることですからCSSに追記していきます。

CSS追記

style.css の末尾に以下を追加してください。

.lkc-external-wrap, .lkc-internal-wrap, .lkc-this-wrap {
  background-image: none !important;
  border-radius: 3px !important;
  padding: 8px !important;
}
.lkc-card {
  margin: 0 !important;
}
.lkc-domain {
  font-weight: bold;
  color: #4eacd1 !important;
}
.lkc-content {
    margin-top: 6px !important;
    word-break: break-all !important;
    white-space: normal !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 100px !important;
    height: auto !important;
    padding-right: 110px !important; 
}
.lkc-title {
  line-height: 1.4em !important;
}
.lkc-excerpt {
  line-height: 1.5em !important;
}
.lkc-thumbnail {
  margin: 0 !important;
}

.lkc-thumbnail img {
  border-radius: 0px !important;
}

.lkc-thumbnail img {
  width:100px !important;
  height:100px !important;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
}

@media screen and (max-width: 500px) {
  .lkc-title {
    font-size: 14px;!important;
  }
  .lkc-content {
    padding-right: 90px !important; 
  }
  .lkc-thumbnail img {
    width:80px !important;
    height:80px !important;
  }
}

ちょっとカッコつけて横幅500pxで画像のサイズや文字サイズを変更しています。この設定が必要なければ、@media screen and (max-width: 500px)のカッコ内を全部削除していただければいつでも画像サイズも文字サイズも同じになります。