このブログはBloggerというGoogleが提供している無料ブログサービスを使用しています。
とても軽くてシンプルで使いやすいブログサービスなのですが、Bloggerには「ブログカード」という機能が付いていません。ブログカードとは
ブログカードというのは「はてなブログ」や「note」をよく読む人なら見慣れているかと思います。関連記事や他社のブログへリンクを貼るときに、カードのようなデザインに整えたものをブログカードと呼びます。
最近ではWordPressでもほとんどのテーマで標準装備していますね。
通常のリンクと比べて目につきやすく、大きいのでスマホでタップしやすいというメリットがあります。
Bloggerでブログカードを使うには
Bloggerでも外部ツールなどを使えばブログカードを表示させることができます。
たとえばはてなブログの機能を利用したり、海外サイトですがEmbedlyやiframelyなどがあります。
これらのうちiframelyを試しに使ってみたので紹介しますね。※当ブログで使用しているのは後で紹介するvanillaice (Akira)様作成のブログカードの方です。
iframely
iframelyは無料でブログカードなどの埋め込みコードを作成できるサイトです。アカウント登録をしなくても使えますが、登録すればデザインのカスタマイズができるようになるそうです。
Embeds codes for today's Internet - Iframely
Iframely gives you simple APIs to have all the Web's best media on your site and on all your users' devices.
メリット
iframelyのメリットは、初期設定の必要なく見栄えの良いブログカードを作成できる点です。
デメリット
iframelyのJavaScriptを呼び出すので、描画速度に懸念があります。またiframeは検索エンジンから適切に評価してもらえない可能性もあるそうです。
vanillaice (Akira)様作成のブログカード
「THE OTHER WAY ROUND」というブログを運営されているvanillaice (Akira)様が作成したブログカードを利用する方法を紹介します。当ブログでも採用しています。
ブログカード作成ブックマークレットをアップデートしました
FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...
使用方法などはリンク先を見ていただければ良いかと思いますが、大まかな設定手順としては次の3点です。
- ブックマークレットを登録する
- cssをコピーしてBloggerのテーマに貼り付ける
- 必要であればcssを好みにカスタマイズ
ブログカードを作る際の手順は次の通りです。
- リンクしたいサイトを開いてブックマークレットをクリック
- 表示されたコードをブログのエディタ（HTMLビュー）に貼り付ける
- タイトルやdescriptionが長すぎる場合はカットする
メリット
このブログカードはJavaScriptやAPIを使用していないため、とても軽いです。
htmlとして取得するので、タイトルや説明文の長さを自由に修正できます。
デメリット
リンク先のタイトルやdescriptionが変更されても自動取得はされません。アイキャッチ画像のURLが変更されて元の画像が削除された場合、画像が表示されなくなります。
当ブログで行っているカスタマイズ
スマホで見たときは縦型になるよう変更
PCやタブレットでは横向きのカード、スマホで見たときは縦型のカードになるように変更しました。
@media screen and (max-width: 500px) {
.blogcard {
max-width: 300px;
}
.blogcard-image {
float: none;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
margin: 0 0 10px;
}
.blogcard-image-wrapper {
width: 100%;
height: 100%;
& img{
width: 100%;
height: 100%;
}
}
}幅などはお好みで変更してください。スマホの横幅は375px〜414pxくらいがボリュームゾーンのようです。
タイトルとdescriptionを1行で表示
閲覧している端末によってデザインが崩れるのが嫌なので、タイトルとdescriptionは1行で表示するようにcssで調整しました。
下記のcssコードをblogcard-titleとblogcard-descriptionに追加すれば1行で表示し、はみ出した部分は三点リーダーで省略してくれます。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;まとめ
Bloggerなど、ブログカードに対応していないブログサービスでもブログカードを使えるようにする方法を2種類紹介しました。
どちらもメリット・デメリットがありますので、好みの方法を使ってみてください。
