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

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

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

という事は、トップページのヘッダーをカスタマイズするしかないんですね。

この記事ではLION MEDIAのピックアップ記事をヘッダー画像にカスタマイズする方法を説明していきながら、別記事のカスタマイズヘッダーについても記事の中で関連紹介させていただいてるので何か1つでも参考になるカスタマイズ方法があれば応用なり活用なりしてみてください。

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

LION MEDIAのピックアップ記事

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

トップページのヘッダーにあるピックアップ記事はWordPressテーマ「LION MEDIA」の主役的役割と言える機能だと思いますがトップページのカスタマイズをすることで変化の違や個性が分かりやすいのがヘッダーです。

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

LION MEDIAのピックアップ記事の機能だけで便利にヘッダーの表現と記事のアピールができるので、とても機能的には素晴らしいです。

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

今回のピックアップ記事をヘッダー画像にカスタマイズはLION MEDIA使いの人達のヘッダーを見て「これを参考にしたい！」ってサイトがあったので基本になるCSSだけは応用させていただきました。

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

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

そしてfixedを使って画面をスクロールした時にヘッダー画像を固定してみようと遊んでみましたが、スマホ表示が上手く表示されずに初回は撃沈。それなのでLION MEDIAのヘッダー画像の固定は失敗の後に完成させました。

カスタマイズヘッダーのスマホ表示に失敗したCSS記述

私のCSS知識不足のため、LION MEDIAのヘッダー画像を固定しようとしたカスタマイズヘッダーはスマホ表示で見たときに画像がスマホ表示だとおかしくなったので、初回はピックアップ記事をヘッダー画像にするカスタマイズは失敗に終わりました。

/*トップヘッダー画像固定*/
.key {
display: block;
height: 340px; 
background: fixed,url(画像url) fixed;
background-size: cover;
opacity: 0.9; 
}
@media only screen and (max-width: 767px){
.key{
height: 200px; 
}
}
.key__list {
display:none;
}

カスタマイズしたLOIN MEDIAのヘッダーはPC表示はできますがスマホ表示に失敗したのが上記のCSSです

CSSをよく調べないでカスタマイズヘッダーを固定させるために、ただfixedをヘッダー画像に使うurlの間に入れとけば良いだろう..めちゃくちゃ単純すぎる理由からの失敗です。

独学だと難しいもんですね…

しかし成功させてるので読み進めてみてください。

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

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

上記のCSSを参考にさせていただきました。

LION MEDIAのピックアップ記事をヘッダー画像にカスタマイズするときは、ピックアップ記事がstyle.cssでキーリストになっています。見たことがあるかもしれませんがfunctions.phpではピックアップ記事のセッティング関係があります。

ピックアップ記事を消すためにdisplay:noneにして、backgroundでヘッダー画像に使うurlを指定してヘッダー画像にしていけばカスタマイズできます。またPCとスマホ表示(@mediaの下)で使用するheightでヘッダー画像の高さを自分のサイト用に調整できるし、opacityの値を変更すればヘッダー画像の透明度の調整ができますね。

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

ヘッダー画像を固定してカスタマイズするCSS

さらにLION MEDIAのヘッダーを自分好みにカスタマイズしたかったので、CSSを使ってピックアップ記事のヘッダー画像に加えてヘッダー画像を固定させます。

/*ヘッダー画像*/
.key
{
    position: relative;
    display: block;
    height: 340px; 
    opacity: .9; 
    background: url(画像urll) no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
.key
    {
        position: relative;
        height: 350px; 
       opacity: .8; 
        background: url(画像url) no-repeat center center;
        background-size: cover; 
    }}
.key__list
{
    display: none;
}

@media only screen and (max-width: 767px)
{
    .key
    {
        position: relative;
        height: 200px; 
        opacity: .8; 
        background: url(https://画像url) no-repeat center center;
        background-size: cover;
     }}
.key__list
{
    display: none;
}

LION MEDIAのピックアップ記事をヘッダー画像にカスタマイズして固定をしたのはPC表示だけです。

独学なので、もっと良いcssの書き方があると思うのですがLION MEDIAのピックアップ記事をヘッダー画像固定して、PCとスマホ表示はされてもタブレット(ipad)で表示確認するとヘッダー画像がうまく表示されなかったので、メディアクエリを追加で書いてmax-width: 1024pxを追加したら完成しました。

ピックアップ記事をヘッダー画像にして固定したCSSにbackground:url(画像url)が3か所ありますがbackground:url(この中)に画像urlを別々にするとPC用とスマホ用とタブレット用で表示した時に使用するヘッダー画像も切り替える使い方もできます。

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

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

そしてピックアップ記事の設定を無効にした場合は、カスタマイズしたヘッダー画像は表示されないのでピックアップ記事の設定だけでカスタマイズしたヘッダー画像を表示、非表示できるので使う人次第では良い使い方ができるカスタマイズです。