111 Bloggerにブログカード、とハイドン。

110　Haydn: Symphonies Nos. 31, 70 & 101
ロビン・ティチアーティ（指揮）スコットランド室内管弦楽団
Robin Ticciati（conductor）Scottish Chamber Orchestra

（上記リンクから音源に飛びます。）

～この画面は広告です！～

　このブログはAmazon Music Unlimitedでのお薦めクラシック音楽について書いているブログのはずなんですが、忘備録も兼ね、ブログのカスタマイズについても時折書いています。

　良かったらこの素敵なハイドンでも聴きながらお付き合いください😅

交響曲第31番ニ長調「ホルン信号」（1765年）
交響曲第70番ニ長調（1779年）
交響曲第101番ニ長調「時計」（1794年）

ブログカードへの憧れと注意点

　当方、画像を使ったリッチリンク→ブログカードに憧れておりまして、現在2つのブログを書いていますけどもどちらもBloggerのため、そういった特定の書式がないものですから使えないのかなぁとずっと思っていたのですけども、ふと調べたら色々皆さんお知恵を出しておられまして、それを活用しながら自分の2つのブログにもなんとか採用することが出来ました。

　画像を多用する方のタイプ
　付箋代わりに使えるタイプ

と2通りご紹介していますので、良かったらBlogger使いの方ご参考までにどうぞ。

　ただ必ずプレビュー（PC,タブレット、スマホ3種）や検証、あるいは手元のスマートフォンなどでその都度ご確認しつつ実装してくださいね！

　自分は今回用いた2通り以外にも色々試したのですけども、PCはよく出来ててもスマートフォンでの表示でおお、なんじゃこりゃ😖となったり、実装したらテンプレートそのものの挙動がおかしくなってしまったものもありました。

　ですのでCSSを弄るときは必ず元のテンプレートHTMLをバックアップしてから行ってくださいね！！失敗してももとに戻せますから…。

ブログカードその１（画像を上げるタイプ）

それで今回、まずこちらのブログカードジェネレーターにお世話になりました。

ShareHtmlを、もっと綺麗にしたメーカー
ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。

[ブログカード風リンクタグ作成]

　こちらはCSS、HTMLが分離しているタイプのものです。URLを入力すると、CSS,HTMLが別々にはき出されます。

　Bloggerの場合ですと、最初にCSSについて「テーマ→（テンプレート）カスタマイズ→詳細設定→CSSを追加」でコピペしたCSSを貼ります。

　CSSを貼った時点でブログ内での書式が固定されますから、あとは記事リンクHTMLを作りコピペ、投稿画面のHTMLビュー内に貼り付ければ良いんですが、どうもこちらで用意されているデフォルトCSSが自分に合わない。（サイズが大きすぎる）

　そこで今度はこちらにお世話になりました。

【Blogger】簡単操作で記事内にブログカードを設置する方法
Bloggerなどのブログの記事内にブログカードを設定する方法を説明しています。

[ブログカード風リンクタグ作成]

　こちらには先程上げた「ShareHtmlを、もっと綺麗にしたメーカー」のCSSをカスタマイズしたものが掲載されております。（レスポンシブ対応）こちらをお借りしつつ、サイズや文字の配置、画像の大きさなどを自分なりに調整したものが以下のCSSになります。（恐らく個々のブログで調整が必要かと思われます）

}/*　ブログカード
------------------------------*/

/*　リンクボックス（全体）　*/

.link-box{
border:1px solid #e1e1e1;
padding:10px;
display:flex;
margin:0px 20px;
background:#fafafa;　/*　背景色　*/
}

/*　リンクボックス（ホバー時）　*/

.link-box:hover{
background-color:#eee;
-moz-opacity: 0.8;　/*　Firefoxの透過設定　*/
opacity: 0.8;　/*　透過設定　*/
-webkit-transition: .35s;
transition: .35s
}

/*　画像ボックス　*/

.img-box{
height:25%;
width:25%;
float:left
}

/*　画像　*/

.img-box div{
min-height:120px;　/*　画像の縦幅　*/
min-width:180px;　/*　画像の横幅　*/
background-size:cover;　/*　画像の表示設定　*/
background-position:center center
}

/*　テキストボックス（全体）　*/

.text-box{
width:75%;
float:left;
padding-left:50px;
line-height:1.5;
margin:0
}

/*　記事タイトル　*/

.text-box .title{
font-size:15px;
font-weight:700;
color:#4c582c; /*　タイトル色　*/
padding:0;
margin-top:5px;
margin-bottom:5px;
}

/*　記事の説明文　*/

.text-box .description{
font-size:13px;
color:#333;
padding:0;
height:80px;
}

/*　レスポンシブデザイン　*/

@media only screen and (max-width:780px){
.img-box{
clear:both;
}
.img-box div{
min-height:80px;
min-width:90px;
}
.text-box{
padding-left:25px;
margin-left:10px;
line-height:1.5;
}
.text-box .title{
font-size:13px;
margin:20px 0;
}
.text-box .description{
display:none;　/*　ブログ説明を非表示　*/
}
}

　CSSは1回、使いたいブログテンプレートに貼り付ければOK。

　そうしたら後は元の「ShareHtmlを、もっと綺麗にしたメーカー」の頁に移動し、そこにブログカードを作りたいリンクを記入し、作成された＃HTMLコードをコピペしてBloggerの本文に貼り付ければ完成です。（作成ビューでなく、HTMLビューにして下さいね。）

　そうしてできたのがこちら。（PCとスマホでは見え方が異なります。）

先にも書きましたが、自分は2つブログを持っており、片方のブログは画像を上げているものが多いので、こちらを採用することにしました。しかしこのブログの場合、「画像のほとんどがAmazon広告利用」ですから、画像を引用してくるこのタイプは採用できない😅ということに気が付きました。

　ですので「アイキャッチ画像」位は入れられるもっとシンプルなものを探す必要がありました。そちらが次の項目となります。

　※尚、このブログカードは何も画像がない時はBloggerのロゴが出ます。そこもどうにかしたかったのですが出来ませんでした…💧（画像アップ機会の多いブログは問題ないかと思います。）

ブログカードその２（文章中心タイプ）

それでこのブログではこちらのブログカードジェネレーターを使うことにしました。

ブログカード風の紹介リンクタグ作成
ブログカード風の紹介リンクのタグを簡単に作成できます。

[ブログカード風リンクタグ作成]

　こちらはCSS,HTML一体型のブログカードです。画像がある投稿の場合は一番最初の画が表示されますが、後から任意の画像にも差し替えられるため、私は

URLを読み込んでタグをはき出してもらった後に
画像を自作のアイキャッチに（手動で）変えております。

　また色や囲み枠の指定も可能で、自分の気に入ったようにして保存したり、引用タグを使うことも可能です（その他の設定を表示、にチェックを入れてみてね）

　あとは出来上がったタグをコピペして、記事作成のHTMLビューに貼れば完成です。

　なおこの「ブログカード風の紹介リンクタグ作成」はブックマークレットも採用しております。

　ページの中に記載されている特定リンクをブックマークタグに放り込めば、あら不思議、次回からはブログカードを作りたい頁を表示したら、「リンク作成」をポチッとすれば自動的に記入された頁が出てきます。

　便利ですのでこのブログカードを使う方は実装してみて下さい！

（ブログカード風リンクタグを使う時の注意点）

　このブログカードの文章は（Bloggerの場合）該当記事内右サイドバーにある「検索向け説明」が採用されます（書いていない場合はメタタグのブログ説明になります）タイトル以外の説明文をカットすることも可能です。
　アイキャッチ画像は自分はペイントアプリprocreateでスクエア型のものを自作しました。あとは180px✕180pxのjpgに加工してbloggerのページ内にでもアップロードし（ページは公開する必要はありません。下書きのままでOK）その画像URLをブログジェネレーターに用いております。（画像右クリックすれば画像URLを抽出、コピーできます。）