注目キーワード

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

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

 

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

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

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

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

 

目次

LION MEDIAのピックアップ記事

 

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

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

 

 

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

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

 

 

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

 

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

 

 

 

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

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

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

 

 

Advertisement

 

 

カスタマイズヘッダーのスマホ表示に失敗した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の間に入れとけば良いだろう..めちゃくちゃ単純すぎる理由からの失敗です。

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

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

 

 

Advertisement

 

 

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

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

 

 

ピックアップ記事をカスタマイズするとバランスが良くなる

 

 

 

LION MEDIAのヘッダーのピックアップ記事をカスタマイズ設定で無効にするとピックアップ記事のkeyにCSSをあててるカスタマイズ方法なのでヘッダー画像もピックアップ記事もなくなるとトップページが寂しい印象を受ける人もいるかもしれません。でもブログとしてのバランスは良いですね。

 

もしLION MEDIAのピックアップ記事も表示させながら、ピックアップ記事の下や上にヘッダー画像を表示するカスタマイズをして印象の強いバランスにしたい場合はWordPressのカスタムヘッダーを使うことでカスタマイズが実現できます。

 

 

カスタマイズした例として上の画像はLION MEDIAのピックアップ記事の上にヘッダー画像をカスタマイズしたパターンです。

 

関連記事  LION MEDIA カスタムヘッダーでトップページをカスタマイズ

 

人それぞれのデザインの好みがあるので、記事を注目させたいならピックアップ記事を使用してみるといいと思いますし、ヘッダー画像にカスタマイズして個性を出したいならLION MEDIAのピックアップ記事をヘッダー画像にカスタマイズしてみるのもおすすめです。

LION MEDIAのピックアップ記事をヘッダー画像にカスタマイズした後はLION MEDIA カテゴリーのカラーを画像に変更する方法を使ってカスタマイズヘッダーにしてみるのもいいかもしれません。

ヘッダー画像つながりということで良ければ読んでみてください。

ではでは。

WordPressテーマカテゴリの最新記事