【はてなブログカスタマイズ】アイキャッチ画像が見切れる際の対処法

カスタマイズ

おはようございます。落武者です。

はてなブログでは投稿画面の右側にある「編集オプション」からアイキャッチの設定ができることをご存知でしょうか?

アイキャッチ画像を設定すると、TOP画面の記事一覧でその画像が表示される仕組みです。

また記事をシェアしたときもそのアイキャッチ画像が使われます。

f:id:otimusya24:20190328231828p:plain

こんな感じで。

アイキャッチはブログを読む前に、読者をひきつける割と重要な役割なんだそうです!

一見さんはアイキャッチでブログを読むか読まないか決める事も多いそうです。

いろいろ理由はあるそうですが、一般にブログを読む読まないを決めるのにかかる時間が3秒程度な為、文字だけより画像を使ったほうが記事内容の認識度が高まり関心をしめすそうです。

また文字のみの場合よりも目を引き付けておく時間も長くできるそうです(その為に名称がアイキャッチなんですね。)

f:id:otimusya24:20190318062222p:plain

僕も最初こそ設定していませんでしたが、最近は一応1記事ごとにアイキャッチを制作しています。

それを毎度記事の1番上に置き、アイキャッチに設定しているわけですが…

大きな問題があったわけです!

われらがはてなブログは何故かこのアイキャッチ画像を正方形表示を標準にしているのです。

この問題のせいで長方形のアイキャッチは正しく表示されません。

また使っているデザインテーマによっても画像が拡大表示され、せっかくアイキャッチ画像に文字を入れても切れてしまう現象も起こります(僕がそうでした)。

まぁいいや。なんて思っていたのですが

良いわけないよね。(記事見ないと正しく表示されないんじゃ意味ないじゃん)

ってことでとうとうその問題を修正したので、方法について書いていこうと思います。

スポンサーリンク

カスタマイズする前の注意点

これは絶対怠らないでほしいのですが、変更する前にメモ帳などに変更前のコードはコピーしておいてください。

良い感じ!と思って変更した後に、実は重大な問題が起きている場合があります。

以前のコードがないと、最悪の場合すべてコードを消して1からやり直し!なんてことにもなりかねないのでご注意を・・・

あと

自己責任ね(‘ω’)

※僕は素人なので万が一の保証は一切できません。

f:id:otimusya24:20190319155954p:plain

フッタにぶち込むだけで簡単解決

アイキャッチの表示修正は調べてみたら案外簡単だということを思いりました(もっと早くやっていればよかった…)

<script>
(function(){
if(document.body.classList.contains(‘page-archive’)){
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>

これをフッタに入れるだけで修正できました。

before

f:id:otimusya24:20190328234106p:plain

after

f:id:otimusya24:20190328234216p:plain

よく見ると下の方がちょっと切れているのですが、文字は正しく表示されているので問題ないでしょう!満足です。

参考にさせて頂いたのは下記のサイトです。

www.imuza.com

ありがとうございます。

ちなみに上記サイトではCSSに

.page-archive .entry-thumb {
width: 100%;
height: 436px;
}

と入力する必要があるとありましたが、僕の場合は入れたほうがややこしいことになったので消しました。

正しく表示されない場合は上記もコードも入力してみてください。

(それでもうまくいかない場合は数値をいじってみてください)

正方形以外のアイキャッチを正しく表示させる方法まとめ

という訳でいかがだったでしょうか。もしアイキャッチが正しく表示されない時は参考にしてみてください。

ただし、実際にやってみたうえで2点注意することがあります。

1 はてなグループの新着表示は結局正方形で表示される

もっと柔軟にすればいいのにね。なぜか正方形でしか表示されません。

なので上記コードをいれてもはてなグループの新着記事では正方形表示になり、一部見切れる可能性があります。

2 いままで正方形をアイキャッチにしていた場合は正しく表示できない。

実は、はてなが正方形しか認めない態度をとるので一時期正方形のアイキャッチを使っていました。

結果今度はそちらのアイキャッチが切れてしまい、文字が読みにくくなっております…

なんにせよこれ以上はいたちごっこになるので、正方形の記事は諦めました。

いずれアイキャッチを長方形に修正します(多分しない)

いろいろ未解決事件もありますが、とりあえず満足です。不満がでればまたその時考えようと思います。

f:id:otimusya24:20190329010403p:plain

コメント

  1. mamamaccori より:

    いやもう、正直
    落ち武者さんの言ってることがちょっとレベル高くて
    半分も理解できてないんですけど
    とにかく解決できて良かったです(;゚∀゚)=3

  2. otimusya24 より:

    まままっこり様
    すみません、半ば自己満記事になってしまいました(‘ω’)自己慰め記事です
    ありがとうございます!また自己慰め記事はどんどん書いていこうと思います(ぇ!?)

トップへ戻る