コピペOK！記事上部にアイキャッチ画像を簡単に表示する方法【はてなブログカスタマイズ】

今回はブログのカスタマイズについて。

記事上部にアイキャッチ画像を表示する方法をご紹介します。

このページも画像入ってますよね。これです↑

実はとても簡単に実装できます。

ブログのテーマ

早速ちょっと脱線しますが、このブログでは「Minimalism」というテーマを使ってます。

言わずと知れたはてなブログでは人気のテーマ。

そのまま使ってもおしゃれですが、シンプルなのでカスタマイズもしやすいです。

私がやっているもうひとつのブログ「初めて猫と暮らしてみたら。」も同じくMinimalismを使っています。こちらはほぼカスタマイズなし。

PCのトップページを比べるとこんな感じです。

同じテーマでもカスタマイズで印象が変わりますよね。

今回のカスタマイズもこのMinimalismをベースにしていますが、基本的には他のテーマでも使えると思います。

今回のカスタマイズ内容

さて、本題のカスタマイズ内容に戻ります。

記事ページ上部のタイトルの背景にアイキャッチ画像を設定します。

完成形

先に完成形をお見せします。

左が元の状態、右がカスタマイズ後です。

一度デザインに反映すれば過去の記事や今後追加する記事も自動で画像が表示されるようになりますよ。

カスタマイズ方法

変更するのは２箇所だけ。

1. 記事ページのタイトル部分に背景を設定する（記事上）
2. 画像にマスクを掛けて文字を見やすくする（デザインcss）

それではそれぞれの手順をご紹介。

１、記事ページのタイトル部分に背景を設定する

「記事ページをプレビュー」に切り替える 

記事ページをカスタマイズするので、まずは記事ページのプレビューモードにしましょう。

「デザイン」→「カスタマイズ」→「記事」で「記事ページをプレビュー」を選択

「記事上」にコード追加

画像はmetaタグに設定されている「og:image」を使用しています。

「デザイン」→「カスタマイズ」→「記事」→「記事上」に以下のコードをコピペしてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
    $('.entry-header').css({
        background:
        'url("' + $('meta[property="og:image"]').attr('content') + '")',
        'background-size':'100% auto',
        'background-position':'50% 50%',
        'z-index': '0',
        'overflow': 'hidden',
        'padding':'25px'
    });
});
</script>

※すでに他のカスタマイズなどでJQueryを使っている方は１行目のJQueryの読み込み部分は不要です

これでプレビュー画面に画像が表示できたと思います。

左が設定前、右が設定後

簡単ですね♪

ただ、これだとタイトルの文字が見にくいので、もうひと工夫します。

２、画像にマスクを掛けて文字を見やすくする

「デザイン」→「カスタマイズ」→「デザインCSS」に 以下のコードを追加します。

.entry-header:after{
	background-color: rgba(255,255,255,0.8);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	z-index: -1;
}

 左が設定前、右が設定後

これでタイトルの文字が見やすくなりました。

デザインを調整する

あとはブログに合ったデザインに調整しましょう。

参考になりそうな方法を２つご紹介。 

変更例）背景を黒、画像を大きく表示

padding: 90px 25px;
background-color: rgba(0, 0, 0, 0.5);

各文字は白に(#FFF)

だいぶ印象が変わりますね。

文字を見やすくするにはさらにこちら↓

変更例）背景の画像をぼかして文字を見やすくする

ぼかしの方法はこちらの記事を参考にさせていただきました。

CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法 | Design Color

アイデア次第で色んなカスタマイズができます。

理想のデザインに挑戦してみてはいかがでしょう！

最後に 

これまで、ブログの運営とかカスタマイズについて書くことはなかったのですが、たまにはこういう内容も書いていけたらなーと思ってます。

（ニーズがあったらですけどね笑）

改めてですが、読者登録やスター本当にありがとうございます！

とても励みになります！！

これからもどうぞよろしくお願いします！