Webページ内に参考サイトや関連する内部のページにリンクを設置する際に多く使われるブログカードはブログサービスやCMSのエディタからだと簡単に設置が可能。
しかし、HTMLで書いたオーソドックスなWebページで、同じようなEmbedカード風の表示をしようとすると少しばかり手間が発生することになります。
ページ内に画像付きリンカードをHTML＆CSSで実装させる
ここでは、そんな少しの手間はかかりますがHTMLとCSSを使ってページ内へ画像付きのリンクを作成してみることにします。
次のリンクは当サイトのトップページを対象にしたリンクカードの設置例。
Webこれだけノート
Webサイトの作成と公開、維持管理に必要な知識について、基本からすべて習得することが難しいHTMLやCSSの戸惑いがちな事例をポイントごとに分かりやすくピックアップしてまとめています。
表示させるページに適応させるスタイルシート（CSS）とHTMLへの記載方法は次の通りになります。
リンクカードのスタイルシート
既存のスタイルシートへ次の通りリンクカードのスタイルを書き加えます。
.linkcard {
border: solid 2px #E6E6FA;
border-radius: 3px;
margin-bottom:10px;
padding: 10px;
position: relative;
}
.linkcard:hover {
background: #eaedf2;
}
.linkcard a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card_img {
margin-right:15px;
width: 150px;
height: 100px;
}
.linkcard_content {
margin:5px;
font-size: 15px;
}
.linkcard_title {
font-size: 16px;
margin-bottom:0px !important;
font-weight: bold;
color: #191970;
}
.linkcard_text {
font-size: 15px;
margin-bottom:-15px !important;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 行数を指定 */
}最初に、表示枠のデザインを定義し、続いて左側に表示する画像、タイトル、ディスクリプションについてそれぞれのサイズや配置を指定しています。
2か所で!importantを使っていますが、これはWordPress内で使ったときの対応ですので、純粋なHTMLページではなくても大丈夫かと思われます。
また最終行の-webkit-line-clamp: 2; では、スマホ画面で表示する際にディスクリプションンに使うテキスト文を省略するため行数を指定して「まるめ」をしています。
カード挿入か所へ記載するHTML
リンクカードのHTMLは次のように記述しています。
<div class="linkcard">
<img class="card_img"src="https://画像のURL.jpg" width="100" height="100" style="float: left;" >
<div class="linkcard_content">
<p class="linkcard_title">タイトル</p>
<p class="linkcard_text">ディスクリプション。</p>
</div>
<div style="clear: left;"></div>
<a href="https://リンク先のURL.html"></a>
</div>赤のマーカー部分をリンク先のページに見合う形に編集して使います。
タイトルとディスクリプションにはpタグを使っていますが、気になる場合は別のタグへ変更しても良いでしょう。
WordPressの標準Embedカードをブラウザの開発者モードでチェックしてみると同じくpタグが使われているようです。
WordPress内で使うとスタイルが崩れる場合
今回作成したリンクカード（ブログカード）は、CMSを使わないHTMLページ向けに用意したものですが、WordPressの投稿ページや固定ページでも利用が可能です。
WordPressでこのリンクカードを表示させると、使用しているテーマやプラグイン、あるいは標準の機能によってデザイン補正のため自動的にカード内にpタグが付加されてしまうことがあります。
この場合、タイトルやテキスト文の表示位置が意図した配置よりずれてしまうため対策が必要です。
このpタグの自動挿入を停止させるには子テーマのfunction.phpへ次のコードを追加します。
remove_filter('the_content', 'wpautop');なお、function.phpは重要なファイルですのでトラブル回避のため、ローカルにバックアップを取り編集前の状態へ回復させる手段を確保してから編集する必要があります。
おすすめ記事
作成したWebページに更新日を表示させるには 
WordPress標準ブログカードのスタイルをカスタムして整える方法 
静的ページへHTMLで目次を挿入する方法