白い平屋の家を建てました

~こだわりの蔵がある家~

【はてなブログ】アイキャッチ画像の選択と大きさの修正

アイキャッチ画像意識していますか? 

アイキャッチ画像とは 読者やユーザーの目(アイ)を引きつける(キャッチ)ための画像です。 

ブログを始めたばかりの頃に、一番上に載せた写真が自動でアイキャッチになってしまい、悩んだことがありました。

今日は、アイキャッチ画像を自分の好きなものに選択する方法と、指定した画像が一覧形式などでブログのトップ画面に出たときにはみ出てしまう問題について書きたいと思います。

f:id:tayorako:20190707203529j:image

 

アイキャッチ画像の選択と指定

記事を書く画面の右側に編集オプションという歯車のマークがあります。

その中にアイキャッチ画像という欄があるので、指定したい写真を選んで選択すればOKです。

f:id:tayorako:20190707210100j:image

知ってしまえば簡単ですね。

 

一覧形式にした時にアイキャッチ画像が見切れる問題

ブログのトップ画面に出てくるアイキャッチ画像が見切れる問題に、最近まで悩んでいました。

f:id:tayorako:20190707193914j:plain

検索して見つけた魔法のHTML✨

これをカスタマイズ→フッタに入れるだけ。

<script>
(function(){
    if(document.body.classList.contains('page-index')){
        var elements = document.getElementsByClassName('entry-thumb');
        var re = /https%3A%2F%2F.+.(jpg|jpeg|gif|png|bmp)/i;
        Array.prototype.forEach.call(elements, function(element) {
            var imageUri = re.exec(element.getAttribute('style'));
            if(imageUri !== null) element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';
        });
    }
}());
</script>  

はてなブログ「一覧形式」の画像をオリジナルのものに変える - IMUZA.comより 

 

before

f:id:tayorako:20190707193914j:plain

 

after

文字が切れて見えなくなることがなくなりました!

f:id:tayorako:20190707193920j:plain

たよらこそだて(保育ブログ)より

 

カスタマイズに相性がある?

ただ、この方法が保育ブログと庭ブログには作用したのですが、このブログには上手く作用しなかったのです。

なぜだ…。

使用しているブログのテーマとの相性があるのかもしれないので、試してみる時には今の状態をコピーしておくなどして元に戻せるようにした上でやってみることをおススメします。

作用しないのに、フッタに入れておくのはブログが重くなる要因になってしまうので。

 

平屋ブログにも使える方法を知っている方がいらっしゃいましたら、教えて下さ~い💦 

 

最後までお読みいただき、どうもありがとうございました。