Bloggerで見出し画像を2枚目以降にする

ブログサービスの中には記事の見出し画像…サムネイル・アイキャッチ画像を指定できるものもありますが、Bloggerなどのサービスでは一番最初に貼り付けた画像がブログの見出し画像になってしまいます。

例えば、装飾として使いたい画像を一番最初に貼り付けてしまうとそれが見出し画像になってしまうという問題が起きて、記事の内容に合わせた画像で閲覧者を誘導することができないという問題が起きます。

SilverLetterでも記事の内容を画像でわかるようにしたかったのでここにメモしておきます。

解決方法としては、cssで「background-image」を使うこと。

……昔ホームページ作りにhtmlいじってた頃さんざん使ってたから懐かしい。

.class-name {
   width: 表示横幅;
   height: 表示縦幅;
   background-size: 100px 100px;
   background-image: url('画像url');
   background-repeat: no-repeat;
}

使用例

<div class="class-name"></div>

background-sizeで画像の大きさ、widthとheightで表示する範囲を指定します。
テンプレで挿入する場合はcssで割り当ててしまえばclass指定するだけで使えるので便利ですが、もし一回きりならタグにstyleを書けばok。

↓これはdivを使った例。

<div style="width: 表示横幅; height: 表示縦幅; background-size: 100px 100px; background-image: url('画像url'); background-repeat: no-repeat;"></div>

背景画像あつかいになるため、ドラッグアンドドロップや右クリックメニューからのコピーはできなくなる点は注意。
背景扱いだとimgタグの画像に比べて検索にも拾われにくくなると思います。
ってことは…コピペ防止にも使える？（とは言い切れない）

これで汎用できる装飾画像や見出し画像防止が作れます。以上！