LION MEDIAのピックアップ記事をヘッダー画像にカスタマイズ

WordPressテーマLION MEDIAを使い始めて2か月が過ぎました。

LION MEDIAの使い方も慣れてきたのでLION MEDIAのピックアップ記事をヘッダー画像にしたいと思ってました。

という事は、ヘッダーをカスタマイズするしかないんですねぇ！

カスタマイズを始めると、はまってしまってカスタマズ漬けになってしまう事が多いのでヘッダーに絞ってカスタマイズする事にします。

1. LION MEDIAのピックアップ記事
2. ピックアップ記事をヘッダー画像にカスタマイズ
3. スマホ表示に失敗したCSS記述
4. ピックアップ記事をヘッダー画像にカスタマイズしたCSS
5. ピックアップ記事をカスタマイズするとバランスが良くなる

LION MEDIAのピックアップ記事

LION MEDIAのトップページのヘッダーはピックアップ記事を３個表示することができますが、最近ピックアップ記事を見たときに「しつこすぎる」と思ったので、ピックアップ記事の代わりにヘッダー画像にすることにしました。

LION MEDIAでヘッダーにピックアップ記事を使用する場合、表示させたい記事IDをTOPピックアップ記事設定から入力すれば表示することができます。

LION MEDIAの機能だけで便利に使えて記事のアピールができるので、とても機能的には素晴らしいです。

ピックアップ記事をヘッダー画像にカスタマイズ

トップぺージのヘッダーをピックアップ記事のままにして３記事をカテゴリーっぽく作り、記事内容はリンク集みたくして作ってしまおうかと考えていたのですが、なんか自分の中でしっくりこないので、けっきょくヘッダー画像だけにすることに。

どんなヘッダーにするか同じLION MEDIA使いの人達のヘッダーを見て「これを参考にしたい！」ってサイトがあったので応用させていただきました。

わたくし、真似っ子しました、はい。

LION MEDIAのヘッダーをカスタマイズした完成は上記の画像の感じです。

このヘッダー画像だと目がチカチカする…

詳しくないCSSを使いピックアップ記事の上にヘッダー画像を表示させてみたかったのですが、試してみたところ、ピックアップ記事の下に幅の狭いヘッダー画像しか反映しなかったので、それは諦めることにして後日チャレンジしてみる予定です。

あとは、fixedを使ってスクロールした時にヘッダー画像を固定してみようと遊んでみました。

ヘッダー画像は固定されましたが、ヘッダーを固定する意味がわからなくなったので、これは自分の中でボツに(笑)

固定するならメニューバーに限りますね。

といいながらLION MEDIA カテゴリーのカラーを画像に変更する方法で試しちゃいました。

スマホ表示に失敗したCSS記述

知識不足のため、LION MEDIAのヘッダー画像を固定したカスタマイズはスマホ表示で見たときに画像がスマホ対応にならなかったのでCSSに詳しい人ならできそうですが私にはスマホ表示に対応できませんでした…

/*トップヘッダー画像*/
.key {
display: block;
height: 340px; /*画像の高さに合わせて設定*/
background: fixed,url(https://shu-sait.com/wp-content/uploads/art-1866468_1280.jpg) fixed;
background-size: cover;
opacity: 0.9; /*ここはお好みです*/
}
@media only screen and (max-width: 767px){
.key{
height: 200px; /*モバイル用に、高さを小さめに*/
}
}
.key__list {
display:none;
}

PC表示はできますがスマホ表示に失敗したのが上記の記述です(笑)

ピックアップ記事をヘッダー画像にカスタマイズしたCSS

/*ヘッダー画像*/
.key {
display: block;
height: 340px; /*画像の高さに合わせて設定*/
background: url(https://shu-sait.com/wp-content/uploads/network-3711148_1280.jpg) no-repeat center center;
background-size: cover;
opacity: 0.; /*ここはお好みです*/
}
@media only screen and (max-width: 767px){
.key{
height: 200px; /*モバイル用に、高さを小さめに*/
}
}
.key__list {
display:none;
}

CSSは参考にさせていただきました。

参考にさせていただいて、さらにヘッダーを自分好みにカスタマイズしたかったのですが夢中になると記事を書かなくなるので自分好みはお預け中です(笑)

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

CSSはLION MEDIAの子テーマに記述でもいいし、追加CSSに追加しても大丈夫です。

私は追加CSSに追加してサイトプレビューを見ながら更にいじって遊んでたので、子テーマには記述しないでLION MEDIAの追加CSSを使用です。

LION MEDIAのピックアップ記事をヘッダーに表示させる設定を有効にしていてもピックアップ記事は反映されずにカスタマイズしたヘッダー画像が優先されます。

設定を無効にした場合の子テーマに記述したときは試してないのでわかりませんが、追加CSSに追加する場合はピックアップ記事の設定を無効にするとカスタマイズしたヘッダー画像は表示されないです。