当ブログは、現在Simplicity２というテーマを使わせていただいてます。このテーマには「ブログリンク」という機能が搭載されていますが、とある弱点があったので、勝手に対策してみました。
もくじ
ブログカード
Simplicity２に標準搭載されている機能のひとつで、URLをそのまま貼り付けると、自動的にサムネイル付きで格好良いカードのような見た目のリンクを作成してくれる機能です。
リンクさせたいページのURLを、コピペでそのまま貼るだけで自動的に作成してくれるのですから、とても便利な機能なのですが、ひとつ弱点がありました。
テーマを変えると当然機能しなくなり、ただのURLだけがぽつんと表示されるようになってしまうのです。
独自要素化
テーマの変更やサーバ移設などのときも、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がクリップボードに生成されます。
選択状態のままだと、何故かタイトルまで説明文になってしまいます。
まとめ
もともとSimplicityに搭載されている機能であるブログカードですが、テーマを変更したらただのURLに戻ってしまうという部分がきになって、URLを貼るだけという使い方に少し不安を覚えてしまったので、作ってみました。
コード化しておくと、いつどんなテーマに切り替えても使えるという安心感があって、気兼ねなく使えます。
よく調べてみると、WordPressのプラグインだけでも、カード化できるものがあるみたいですね。
