ブログカードの書式をテーマを変えても使えるようにCSSとHTMLを抜き出して独自要素化してみた

当ブログは、現在Simplicity2というテーマを使わせていただいてます。このテーマには「ブログリンク」という機能が搭載されていますが、とある弱点があったので、勝手に対策してみました。

スポンサーリンク




ブログカード

Simplicity2に標準搭載されている機能のひとつで、URLをそのまま貼り付けると、自動的にサムネイル付きで格好良いカードのような見た目のリンクを作成してくれる機能です。

リンクさせたいページのURLを、コピペでそのまま貼るだけで自動的に作成してくれるのですから、とても便利な機能なのですが、ひとつ弱点がありました。

テーマを変えると当然機能しなくなり、ただのURLだけがぽつんと表示されるようになってしまうのです。

WordPressのバージョン4.5.3以降であれば、自サイトのリンクのみ独自にリンクカード化される機能が搭載されています。

独自要素化

テーマの変更やサーバ移設などのときも、HTMLとCSSで独自要素化していれば、CSSの追加だけでカード化したデザインが復元できるので安心です。
デザインを変えたくなったときも、柔軟に対応できますね。

HTML要素

さすがにURLを貼り付けるだけでというのは無理ですが、なんとか簡単にリンク作成したいと思い、Google ChromeのエクステンションCreate Linkを利用して、自動生成できるようにしてみます。

Create Linkのオプション画面から新規テンプレートを作成します。

左下の「+」ボタンを押してテンプレートを追加。

「Name」の欄に任意の名前。今回は「リンクカード」という名称にしました。
「Format」の欄にテンプレート用のコードを入力します。

入力したコードがこちらです。

<div class="link-card">
    <div class="link-card-thumbnail">
        <a href="%url%" class="link-card-thumbnail-link" target="_blank">
            <img class="link-card-thumb-image" src="https://capture.heartrails.com/120x120/shadow?%url%" alt="" />
        </a>
    </div>
    <div class="link-card-content">
        <div class="link-card-title">
            <a href="%url%" target="_blank">%title%</a>
        </div>
        <div class="link-card-excerpt">%htmlEscapedText%</div>
    </div>
    <div class="link-card-footer">
        <div class="link-card-hatebu">
            <a href="https://b.hatena.ne.jp/entry/%url%" target="_blank">
                <img src="https://b.hatena.ne.jp/entry/image/%url%" alt="" />
            </a>
        </div>
    </div>
</div>

当初は、HTMLだけで再現しようとしていましたが、断念しました。PCのみであれば再現出来ますが、スマホ画面などを考えると私には無理でした。

CSS要素

PCサイズからスマホサイズまでをカバーしようとすると、どうしてもCSSを使わないと再現できませんでした。

内容は、Simplicityとなるべく同じデザインを基準にしたかったので、あちらこちらに散らばっていたSimplicityのCSSから必要な部分を抜き出して、クラス名など一部手直しをして、なるべく最小限になるようにまとめたものです。

それでも結構長くなってしまいましたが、まとめたコードが以下です。

/************************************
 リンクカードのスタイル
************************************/
.link-card{
  margin: 20px;
  max-width:100%;
  width: calc(100% - 40px);
  position: relative;
  clear:both;
  min-height:145px;
  min-width: 300px;
  box-sizing: border-box;
  padding:12px;
  padding-bottom: 6px;
  border:1px solid #ddd;
  word-wrap: break-word;
  border-radius: 5px;
}

.link-card:after{
  content: "";
  clear: both;
  display: block;
}

.link-card-thumbnail{
    float: left;
}

.link-card img.link-card-thumb-image{
  border:0;
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  margin-bottom: 10px;
}

.link-card-content{
  margin-left:110px;
  line-height:120%;
  margin-bottom: 0.5em;
}

.link-card-title{
  margin-bottom:5px;
}

.link-card-title a{
  font-weight: bold;
  text-decoration: none;
  color: #111;
}

.link-card-excerpt{
  color: #333;
  font-size: 0.9em;
  max-height: 80px;
  overflow: hidden;
}

.link-card-footer{
  font-size: 0.7em;
  width: 100%;
  color:#777;
  clear:both;
  vertical-align: bottom;
  margin-left: -4px;
}

.link-card-hatebu{
  float: left;
  margin-right: 7px;
  position: relative;
  bottom: -5px;
}

/*リンクカードのスタイル*/
@media screen and (max-width: 560px){
  .article .link-card,
  .article .entry-content .hover-card{
    width: 100%;
  }

  .link-card-content{
    margin-left: 0;
  }

  .link-card-title a{
    font-size: 14px;
    line-height: 120%;
  }

  .link-card-excerpt,
  .link-card-footer{
    font-size: 11px;
    line-height: 120%;
  }

  #main .link-card,
  #main .hover-card{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  img.link-card-thumb-image{
    width: 80px;
    height: 80px;
  }

  .link-card-content {
    margin-left: 90px;
  }
}

WordPressの管理画面からテーマの編集かCSS編集で、スタイルシート(style.css)へ追加してください。

リンクカードの作成

リンクを作成したいページを開きます。

サムネ・タイトルは自動取得します。説明文の部分は、選択式にしました。

まず、説明文として使いたい箇所をコピーします。

つぎにCreate Linkから、登録したテンプレート「リンクカード」をクリックすると、選択した部分が説明文として入力された状態で、リンク用HTMLがクリップボードに生成されます。

選んだ説明文の箇所を選択解除して、Create Linkのテンプレートをクリックしてください。
選択状態のままだと、何故かタイトルまで説明文になってしまいます。

まとめ

もともとSimplicityに搭載されている機能であるブログカードですが、テーマを変更したらただのURLに戻ってしまうという部分がきになって、URLを貼るだけという使い方に少し不安を覚えてしまったので、作ってみました。

コード化しておくと、いつどんなテーマに切り替えても使えるという安心感があって、気兼ねなく使えます。

よく調べてみると、WordPressのプラグインだけでも、カード化できるものがあるみたいですね。