オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログ。

オークニズム

オークニのイズム満載ブログカスタマイズ

はてなブログ「一覧形式」のアイキャッチ画像を自由なサイズで表示する方法

はてなブログ「一覧形式」のアイキャッチ画像を自由なサイズで表示する方法 アイキャッチ

どうも、オークニです。

はてなブログあるあるの1つ、アイキャッチ画像が正方形でトリミングされて(強制的に)この上なくダサくなってしまう件について。

とくに「一覧形式」の場合、無理やりCSSでいじっているカスタマイズ等も特に見当たらず、もはや為す術もなくダサいまま私も諦めていた。

がしかし

そんなアイキャッチを、ついに…ついに自由なサイズで表示できる方法を発見してしまったので、本日はシェアしたいと思う。

今までのダサいアイキャッチ

はてなブログ「一覧形式」のアイキャッチ画像を自由なサイズで表示する方法 今までのダサいアイキャッチ

今となってはアイキャッチのカスタマイズを施してしまっているのでわからないが、こちらが既存のアイキャッチの見栄えだ。

一見なんら問題が無いように見えるが、ちょっと待ってほしい。本来の画像はこんな見栄えではない。

たとえば、右下の人の顔面らしき背景のアイキャッチ。

この画像の本来の姿はこうだ。

説明するまでもない。

もう、目の飛び出し具合から首から下の映り込みから、圧倒的に切り取られている。

だいたい、こうやって無理やり文字を真ん中に集中させているのも、この仕様のせいで泣く泣くそうせざるを得ない、という状況だ。

いや、別にこの画像を引きで元画像のサイズで表示したところでコンバージョン(ここではクリック率)が変化するとも思えない

がしかし

アイキャッチ画像というのは、ユーザーとのファーストコンタクトであり、ブロガーが一番こだわりたい部分でもある。

アイキャッチを制する者はブログを制する、と言っても過言ではない。

いや、一番大事なのはタイトルだ。

正しくは、タイトルとアイキャッチを制する者はブログを制する、だ。

あなたがどれだけブログをオシャレにカスタマイズしようと、タイトルとアイキャッチがクソであれば、本末転倒である。

なんせ、まずクリックがされないのだから。

話がアイキャッチ論に逸れそうになったが、とにかく、大事なアイキャッチ画像を自分が意図する形で表示できないはてなブログ、クソだよね!ってこと。

カスタマイズ後のアイキャッチ

はてなブログ「一覧形式」のアイキャッチ画像を自由なサイズで表示する方法 カスタマイズ後のアイキャッチ

一方、こちらがカスタマイズ後のアイキャッチ画像である。

改めて右下の顔面背景のアイキャッチを、先ほどの上記の画像と比べてほしい。

素晴らしい。

元画像をほぼ完全に再現できている。これだ。これこそが本来あるべき姿である。

既存のアイキャッチが今までの仕様に合わせて作られていたので、中央に小ぢんまりとなっているのが残念だが、それを差し引いても、今後アイキャッチが意図する形で表示されることを思うと、感無量だ。

アイキャッチを自由にする方法

さて、いよいよ実際の作業部分へ取り掛かろう。ところで、今回の感動的なある種の裏技?に関して、私の知恵は皆無である。

たまたまとある人が、javaScriptを駆使して作っていたのだ。

つまり、私はパクっただけ。実際にそれを自分のブログで試験してみて、その余りにも簡単さ、素晴らしさゆえこの度の記事となった。

その記事というのがこちらである。

是非ブログをご覧いただきたい。私なんて足元にも及ばないくらい、ゴリゴリにカスタマイズしている系ブロガーである。

てゆーか、2015年からはてなブログでカスタマイズとかしてて、テーマの作成もしているくらいベテラン

たまたま発見しちゃいました的なノリでご紹介する人ではない。

もはや、ここで私がダラダラ話していることに関して、全ては上記の記事さえ読んで頂ければ事足りる話である。

まだリンク先へ飛んでいない人は今スグにでも飛ぶべし。一切の無駄話もなく、淡々と要点だけを解説してくれており、実に分かりやすい。今スグ飛べ!イサミ

。。。

それでも尚この記事を読み進めようとするあなた。本来なら私の役目は上記記事の紹介で終了のはずだが、特別に究極の要点だけお伝えしよう。

とにかくこのCSSとjavaScriptをコピペ

やることは2つ。

まずこのCSSをコピーする。

これを

管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」

の最後に貼り付け。

次にjavaScriptだ。

これを

管理画面より、「デザイン」→「カスタマイズ」→「フッタ」

の最後に貼り付ける。

以上。

これだけだ。たったこの2ステップで、あなたのブログのアイキャッチが、正方形でも拡大でもなく、自分が思う通り作った形で表示することが出来る!

最高かよ

さいごに

誤解を恐れずに言うと、私は全く何もしていない。たまたま記事を発見しただけにすぎず、その余りにも素晴らしさ故ここでシェアしただけにすぎない。

この記事が参考になった方は、是非IMUZA.comさんにコメントなりで「最高かよ」と贈って差し上げてあげてほしい。

かくゆう私は、本件に関して本人へは何のアクションも起こしていない。(←最低かよ)

私はこのアイキャッチ問題で本当に頭を抱えた。その結果、軽くやる気がなくなったくらいである。

それを、最高のタイミングで救ってくれたIMUZA.com様、この場をお借りして感謝申し上げます。助かりました。ありがとうございます。

- 特に人気のカスタマイズ -