WordPressテーマ「LION MEDIA」カスタマイズ。ヘッダー画像をつけたい!


このブログ、WPに移転当初より「LION MEDIA」というテーマを使っています。

前回記事でカスタマイズした部分をほぼ書いていたのですが、今回はヘッダー画像をつけたいな〜と思って、cssの追加でなんとかなりましたのでメモします。

トップページのピックアップ記事エリアを使う

LION MEDIAにはトップページにピックアップ記事を3つ乗せることができます。

このエリアを背景設置エリアにしたというのが今回の内容です。
私の場合はピックアップ記事を使っていなかったので簡単にできましたが、これは残しつつさらにヘッダー画像をとなると、
トップのウィジットエリアか、それともそれ以外の方法か・・になりそうですね。

具体的なCSS

具体的なCSSは以下の通りです。
ピックアップ記事エリアは.keyというクラス名になっていたので、その辺りをCSSに書きます。(子テーマのCSSです!)

/*ヘッダー画像*/
.key {
display: block;
height: 340px; /*画像の高さに合わせて設定*/
background: url(背景画像のURL) no-repeat center center;
background-size: cover;
opacity: 0.8; /*ここはお好みです*/
}
@media only screen and (max-width: 767px){
.key{
height: 200px; /*モバイル用に、高さを小さめに*/
}
}

.key__list {
display:none;
}

こんな感じです。
.key__listがピックアップ記事のそれぞれの内容なのですが、これをあえて非表示(display:none;)にして、あとは.keyエリアそのもののバックグラウンドにヘッダー画像を貼った感じです。
簡単ですがdisplay:none;ってなんか美しくない気がするんですが、とりあえず。

現在のヘッダー画像は手元にあるお気に入りにもの!


今回入れたヘッダー画像は家にあり、手元にあるお気に入りもしくはよく使っているものです。
ブラーバが浮いてる気がしますが気にしません。
本当は、ミラーレスカメラ本体を入れたかったけれど、カメラで撮るからとりあえずレンズを入れています。
スタイリングをもう少し考えてまた撮りたいと思います。

にほんブログ村 子育てブログ ワーキングマザー育児へ
にほんブログ村参加中。 是非応援クリックお願いします!

メモと考察カテゴリの最新記事