WordPressテーマ「LION MEDIA」にヘッダー画像を付けるカスタマイズ
メインのブログである「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のカスタマイズについていくつか書かれています。