WordPressテーマ「LION MEDIA」にヘッダー画像を付けるカスタマイズ

2020年1月26日

メインのブログである「masaの食べ歩き記録」では非常に素晴らしい無料のテーマ「LION MEDIA」を使用させて貰っています（※現在はルクセリタスを使用）が、トップページにヘッダー画像を付けてみたいと思いカスタマイズすることにしました。

 

完成イメージはこんな感じで

完成イメージはこんな感じにしました。
 

これをどうやって実現するかなのですが、LION MEDIAには「TOPピックアップ記事」というヘッダーに3つまでの記事を載せられる機能があります。今回はこれを流用します。

 

追加CSSに記入

子テーマのCSSに直接書き込んでも良いのですが、私はこのテーマに限っては「外観」→「カスタマイズ」の一番下にある「追加CSS」に記述することにしているのでそちらに追加しました。

/*ヘッダー画像*/
.key {
　display: block;
　height: 340px; /*画像に合わせて変更する*/
　background: url(背景画像のURL) no-repeat center center;
　background-size: cover;
　opacity: 1.0; /*好みで変更*/
}
@media only screen and (max-width: 767px){
.key{
　height: 200px; /*モバイル用*/
}
}
.key__list {
　display:none;
}

 

この設定も必要かと

TOPピックアップ機能を使用していない方は「無効」になっているので、このままでは画像が表示されません。「外観」→「カスタマイズ」の基本機能設定[LION用]にあるTOPピックアップ機能を「有効」に変更して保存してください。

また、”スマホでは非表示にする”にチェックが入っていても表示されていたので、スマホで表示させたくない場合はスマホの記述部分に「display:none」をぶっこんで消すことは可能でした。

 


スポンサーリンク


スポンサーリンク

 

今回はこちらのサイトを参考にさせて頂きました。他にもLION MEDIAのカスタマイズについていくつか書かれています。

 

カスタマイズLIONMEDIA,ヘッダー

Posted by まさ