LION MEDIAのカテゴリ―のヘッダー部分はカラーを変更できますが、ヘッダー画像に変更したいのでカスタマイズしてみることにしました。
もともとはLION MEDIAの設定にある「デザインスキン設定」のユーザー定義カラーでヘッダーのカラーが変更できる場所です。
はじめにカテゴリーカラーが適用されている場所を「変更する前」と「変更後」を見比べたカテゴリーヘッダーを見てください。
上記の画像は変更前
LION MEDIAの設定でカテゴリーごとにカラーを変更してカテゴリー説明文を表示するだけでも悪くはないと思います。
それにどっかのサイトで読みましたがWordPressテーマでカテゴリ―説明文が使えるテーマは少ないらしいです。ですがLION MEDIAの場合は使えます。
このままでも良いんですが、カテゴリーアーカイブを開いたときにカラーだけの場合と画像があるのでは印象がガラリと変わるんですね。
次にカテゴリーヘッダーをカスタマイズして変更したらどうなったかを見てみます。
カテゴリーヘッダーも、やっぱり画像をつけると良い感じだと思えます。
LION MEDIAのカテゴリーのヘッダーカラーをユーザー定義カラーで変更するだけでは物足りないと思うようになってきた人はヘッダー画像に変更する方法を参考にしてみてください。
LION MEDIA カテゴリTOP説明文を有効にする
カテゴリーのカラーを画像に変更するにはLION MEDIA カスタマイズ設定の「カテゴリTOP説明文」の設定を有効にします。
設定を有効にしないとカテゴリーのヘッダー部分が表示されないので、今回のヘッダー画像のカスタマイズ方法で画像にしても一生変更されません。
なので先に有効にしておきます。
カテゴリーヘッダーを画像に変更するCSS
カテゴリTOP説明文の設定を有効にしてカテゴリーアーカイブで設定が有効になってるのを確認できたら、ヘッダー画像にカスタマイズするCSSを追加CSSにコピペします。
CSSは下記の記述です。
.categoryDescription::before {
background: linear-gradient(-45deg, rgba(180, 193, 238, .8), rgba(166, 193, 238, .8)) fixed, url(画像url) fixed;
background-size: cover;
}
@media only screen and (max-width: 767px) {
.categoryDescription::before {
background: linear-gradient(-45deg, rgba(180, 193, 238, .8), rgba(166, 193, 238, .8)) fixed, url(画像url) fixed;
background-size: auto;
}
}
LION MEDIAでカテゴリーヘッダーを画像にカスタマイズするには「.categoryDescription::before」をいじっていくようです。
そしてbackground-imageはliner-gradientを使いグラデーションにしてあるのでロゴ画像のあるヘッダーカラーと合うようにしてみました。
その他にもカテゴリーヘッダー画像に「fixed」を指定してスクロールしても画像固定するようにしています。
他のサイトでよく見かけるヘッダーメニューを固定する方法をヘッダー画像に応用しただけです。
そして、CSS記述にある「url( )」の()カッコ内に表示させたい画像をメディアライブラリからコピーしてきて貼り付けます。
それが終わったらLION MEDIAの追加CSSにぶち込んで、プレビューで確認するとカテゴリーカラーだった部分がヘッダー画像に変更されてます。
LION MEDIA の追加CSSのあるところは設定記事が参考になります。
ただ最近は私だけなのか「追加CSS」にCSSを入れてもプレビューで表示されない時があるので、似たような人がいるとしたら「公開」をクリックして適用させてから確認するとカテゴリーが変更されてるか確認できます。
ヘッダー画像にカスタマイズするとき苦戦した事
LION MEDIAのカテゴリーのヘッダー画像をカスタマイズする指定場所を探して、CSSの書き方も成功したように思ってたのですが数日してミスしてたことに気づきました。
スマホで見るとヘッダー画像にカスタマイズした画像が「めちゃめちゃデカい」
デカいというか何の画像なんだか分からない状態。
CSSに知識が少ないので、修正するのにけっこう悩みました…
そして苦戦しなが解決しました。
問題はスマホで見たときだけなので「@media only screen and…」に「background: liner-gradient」からの記述をスマホ用に追加します。
それと「background-size」が「cover」だと表示がうまくいかなかったので、「auto」に変えちゃいました。
スマホ表示でも無事にカテゴリヘッダー画像のでっかくなる状態を修正できたけどスマホ表示に対応するカスタマイズをするにはメディアクエリの書き方も覚えないといけないのか…と痛感した瞬間でもありんす。
カテゴリーヘッダーの下(パンくず)もCSSで変更する
LION MEDIAのカテゴリーカラーをヘッダー画像にカスタマイズしたときに「パンくず？」になるのか？よく分かりませんが、カテゴリーで画像に変更したところの下のバーのことです。
メニューバーに合わせたカラーにしたかったので真っ暗なグレーにCSSを使い変更しました。
ヘッダーを画像にカスタマイズするときに、この部分のカラーも変えてからヘッダー画像を挟むと「素敵」だと感じてしまったのです。
自分なりにLION MEDIAのテーマでオリジナル感を出してみた。という感じでしょうか。
/*呼び方分からないヘッダー下*/
.breadcrumb {
background-color: #1c1c1c;
}
LION MEDIAのパンくず部分は「breadcrumb」でカラーを変更するとカテゴリーアーカイブだけではなく投稿ページでも適用されるのでカラー変更したい人は試してみてください。
カテゴリーピックアップ記事を消す方法
カテゴリーのピックアップ記事を消して非表示にするのもお好みで試してみてください。
シンプルなLION MEDIAのヘッダーにしたいならピックアップ記事の表示を消すのも良いと思います。
/*ピックアップ消し去る*/
.categoryDescription__item {
display: none;
}
「categoryDiscription__item」が指定してる場所のようなので、ためらうことなく消し去りましょう！
もし、スマホ表示だけピックアップ記事を非表示にしたいときは次のCSSを使うとできます。
スマホ表示でカテゴリーを見たときにピックアップ記事は「デカい」のが気になったので参考までに。
/*ピックアップスマホ非表示*/
@media only screen and (max-width: 767px) {
.categoryDescription__item {
display: none;
}
}
カテゴリーアーカイブは、関連する記事のまとまる場所なのでカテゴリーを開いたときにカテゴリー説明文を表示するLION MEDIAの機能だけでも情報を伝えやすいので良いと思います。
でもデザインで見せるなら「ヘッダーには画像かなぁ」と思ってのカテゴリーカラーの変更でした。
