ブログ内に関連記事やおすすめの記事などのリンクを入れる際に、画像、題名、要約をまとめてブログカードにすると見栄えがよいですよね。はてなブログにはブログカード作成機能があったりします。WordPressだとプラグインで実現できるのでしょう。
Bloggerでは、「人気の投稿」ガジェットでアクセス数の多い上位数件をブログカードみたいに表示してくれる機能はありますが、特定の記事を自分で選んで作成するには使い勝手が良くありません。外部サービスのEmbedlyを使うとかなりいい感じの見栄えでブログカードを作ってくれますが、外部JavaScriptを読み込んで、Webフォントとかも読み込んだりするので自分でHTML+CSSで作ることにしました。
HTMLはこんなかんじにします。
<article class="blog-card">
<a href="リンク先URI" aria-label="タイトル">
<img src="画像" width="160" height="90" alt="thumbnail" loading="lazy"/>
</a>
<div class="text-contents">
<h3 class="title">
<a href="リンク先URI">
タイトル
</a>
</h3>
<p>
要約(本文の始めの数十文字) ...
</p>
</div>
</article>
下記のCSSをBloggerのテンプレートに追加して体裁を整えます。テーマの「HTMLを編集」で、CSSの最後の方に下記を書き加えます。
display:flex;
でFlexboxを使い画像とタイトル+要約を左右に並べるのと、モバイルでは要約を表示しないのがポイントです。ブレークポイントは適当に500pxとしています。
画像に関しては、16:9で、160px×90pxとして、縦横比の違う画像でもobject-fit:cover;
ではみ出た部分をクロップして使います。
/* Blog Card */
.blog-card {
display: flex;
width: 100%;
padding: 0.5rem 0;
}
.blog-card * {
margin: 0;
padding: 0;
}
.blog-card img {
display: block;
margin: 0;
padding: 0;
width: 160px;
height: 90px;
object-fit: cover;
}
.blog-card .text-contents {
flex: 1;
margin-left: 10px;
}
.blog-card .text-contents h4 {
border: 0;
margin: 0;
padding: 0;
font-weight: bold;
}
.blog-card .text-contents a {
color: rgb(0, 0, 0);
}
.blog-card + .blog-card {
border-top: 1px dashed #cccccc;
}
@media screen and (max-width: 500px) {
.blog-card .text-contents p {
display: none;
}}
これで作ったブログカードの例です。
![thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkP0xLrMXJf1cZ54GE8kE7t_wI2Q9Me2UX0SIa9rcOVkPcaFcjSDgsWTD433aKG3x1rrt2RhvTaiwrIWRwu5yXZY8TrPWk5d6dEw4sl0aWsv35cRLw7LZ-1NjlGHP0Fyb1ESSwhyphenhyphenCcia4/s160/IMG_5709-1.webp)
JR福知山線廃線敷ハイキング
兵庫県西宮市の武庫川沿いにかつて機関車が走っていたJR福知山線の廃線敷がハイキングコースとして一般開放されています。全長4.7kmで線路の枕木が残っていたりトンネルに入ったりとなかなか面白いハイキングコースでした。 ...
ブログカードのテンプレートが準備できました。これを1個1個手作業で作るのは大変ですね。ネットで検索するとJavaScriptでブックマークレットを作りURIを入れて作成する方法があり、便利ですがそれでも1個1個作るのは面倒です。そこで次はフィードから記事一覧を取得し、一気にブログカードを作りコピペできるようにしていきます!
関連記事
![thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PzKyUYt5sC1DiYidaA-RLoDomIpqiOby7MsnYCE6bGUTsX2EF6SP6BVW0LYoWNdLIWTsgnzMu-VyWLYRallzOa_GbPymyZlbOFngJduzbI1s8EyPu4TRV9ebOTOkJ1c2-lQpdHnKVQc/w160/undraw_publish_post_vowb.webp)
Bloggerのフィードからブログカードを一気に作成(2)ーJavaScriptで実装ー
ブログ内に関連記事やおすすめの記事などのリンクを入れる際に、画像、題名、要約をまとめてブ ...
![thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PzKyUYt5sC1DiYidaA-RLoDomIpqiOby7MsnYCE6bGUTsX2EF6SP6BVW0LYoWNdLIWTsgnzMu-VyWLYRallzOa_GbPymyZlbOFngJduzbI1s8EyPu4TRV9ebOTOkJ1c2-lQpdHnKVQc/w160/undraw_publish_post_vowb.webp)
Bloggerのフィードからブログカードを一気に作成(3)ー使い方ー
前回の記事でブログカードを作るJavaScriptについて解説しました。 ...
![thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfrILb_Bf5gwDv6v9k9WQ_e-D8jKxY5NUItMbRDwaWWtHtmpA56cjV6hGtnFraMpooWAoBm6uLwAEa8D7VXkwUUg_C0_PGqldCxbmZhtQqpYaeLYY2wYUTZoAykuH_cUVmbM8nb9jJ58/s0/320x320px-Google_Adsense_logo.webp)
Googleアドセンスで初心者がブログを始めてから収益が出るまで何ヶ月かかったか
このブログは自転車改造をメインテーマに、途中からなんでもありの雑記系ブログとして続けてきました。 ...
![thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWG7EBvMMkgLzkRcd_dl_s8R21xpr3J9QtyAjoVjnNxQp2F3dehjbGDjdFficIfo0SDwfb0BAZ2yxodgqF8DykqYxnYqRjNDEp5Lv2vypGGo_coT6HcENSxwnRDBUcVFN6vt47yV79p28/s0/2021-04-17_15h49_27.webp)
Bloggerを始めよう!-初めてのブログ作成
前回の記事でBloggerでブログを始めるメリット、デメリットなどについて書きました。今回は実際 ...
![thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifrm4fN0k5BDn6-ui3EXHJyTkJ4l7VDa3sBWSFARQ3xrkKB_nxA6EqmJtQEhPFnjtUpFbxLW9JHrgLf3K1pkdmp0Hq6XQqlgU9x4XAs-PXeIszXkiI_Bm11o-SB_kZF0ASdX2UTTfshxg/w160/blogger_hiyoko.png)
Blogger 人気の投稿ガジェットをカスタマイズ
このブログはGoogleのブログサービスであるBloggerで書いています。 ブログサービスと ...
![thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVk4spA2XpWBgSsOCz0hPnQmPEKjZdHt3Oyg2pButkEvPZQSNusCbHKoWk_aB4s1Y3MOsj5Ote1_0yKlQZX5G73qHSv-kB38vp6ItqunQIU4uyapcIOOI9-93L5x7NX2PoyR91dUQov4/s0/chari_logo_static.png)
Bloggerに日本ブログ村のバナーを見映えよく貼る方法
このブログを始めたとき、少しでも多くの人に読んでもらえればと思い 日本ブログ村(以下ブログ村)に ...
0 件のコメント:
コメントを投稿