OtoyaLog

おとやさんが好きかって書くログ

続・エントリ内で表示していない画像をアイキャッチに使う方法

f:id:otoya_kyo:20180703123600p:plain

otoyalog.hatenablog.com

昨日、はてなブログにおいてエントリ内で表示させていない画像をアイキャッチとして使う方法について説明しましたが、昨日の方法ではスマートフォン表示にしたときに画像が表示されてしまうことに気づきました。

今回は、スマートフォン表示でも上記の目的を達成するための方法を書いていきます。

基本的に、前回エントリで記した内容は、今回の方法をとる場合でもやっておくべき内容なので、そこに変更はありません。スマートフォン表示でも画像を表示させないために、追加でやるべき内容になります。なお、この方法をとるに当たり、はてなブログProには登録の必要はありません

1. デザイン変更画面のスマートフォンデザイン変更タブに遷移し、「記事上下のカスタマイズ」の「PCと同じHTMLを表示する」にチェックを入れます。

f:id:otoya_kyo:20180703123031p:plain

2. デザイン変更画面のカスタマイズタブに遷移し、「記事」の「記事上下のカスタマイズ」項目の記事上ないし記事下の部分に、以下のソースを記載します。例によってクラス名は適宜読み替えてください。

<style type="text/css">
    img.eyecatch{
    display:none;
}
</style>

以上の作業を行うことで、スマートフォン表示においても、アイキャッチ画像を非表示にすることが可能となります。