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

2018年9月22日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;
}