不可視にして貼り付けてアイキャッチ画像として設定する、以上。というだけの話なんですが、これで終わるのも何なのでもう少し丁寧に書きます。
このブログでは、特に画像を貼り付ける必要のないエントリには画像を貼り付けていません。よく、エントリ内に本文とは直接関わりのないアイキャッチみたいな画像を貼り付けているブログがありますが、私はあれ、あまり好きではないので。好きな人は好きにやればいいと思いますが。
ただ、はてなブログでは、エントリ内に貼り付けてある画像をエントリのアイキャッチ画像として選択できるようになっており、ここで画像を選択しておくと、例えばこのブログですと、右カラムの新着記事(Recent)欄にアイキャッチ画像として表示されたり、月別アーカイブページにも表示されたりと、設定しておいたほうが綺麗なのは確か。というより、アイキャッチ画像を設定しておかないと、新着記事欄のデザインが少し崩れるのが嫌。
ということで、エントリ内で画像を非表示にしつつ、アイキャッチとしては画像を利用する方法です。
1. はてなブログの標準機能で画像を貼り付ける
どうせ不可視にしてしまうので、貼り付ける位置はどこでも構いません。私は記事の一番上に貼り付けています。
2. 非表示にしたい画像のクラス名を変更する
標準機能で画像を貼り付けると、class="hatena-fotolife"というクラス名が付きますが、このhatena-fotolifeの部分をわかりやすい、新しいクラス名に変更します。例えば、eyecatchとかでもいいんじゃないでしょうか。
3. デザインCSSに以下の記述を追加する
img.eyecatch{
display:none;
}"
2でeyecatch以外のクラス名を付けていた場合、適宜変更してください。display要素をnoneにすることで、画像は非表示状態になります。
