LION MEDIAのメニューの背景の色を変える方法

LION MEDIAいいですよね。私はブログ初心者なんですけど、らいおんメディアは使いやすくてとても気に入っています。

全体的なデザインがある程度できていて、文字なんですかね？洗練されているようで、カッコいいです。

ただ初心者ながら、「ココこうできたらいいのになぁー」と思うことがあります。備忘録みたいなものではありますが、自分でできるCSSのカスタマイズを記録していきます。

今回は、「LION メディアのメニュー部分の背景を変える方法」です。初期モードじゃ白と黒しか選べませんから、自分でカスタマイズです。

※初心者の備忘録（勉強中なのです）なので、レベル低いです。

それではやり方をどうぞ。

メニュー部分の背景の色をCSSで変更

カスタマイズのデザインスキン設定で、「ベースデザイン→LIGHT」の状態だと、下の画像のようになります。

これのメニュー欄、検索窓欄以外の場所だけをCSSで変更すると

変更後

↓

こんな感じにカルフォルニアの西海岸っぽくなりました。

※青が海、淡いオレンジが夕日のイメージです（笑）

コードは下記の通り

/*メニュー欄（再上部の下の部分）*/
.l-extra {
	background: #f0b775 !important;/*主なメニュー欄の場所の色*/
}
.t-rich .menuNavi__link-current, .t-rich .menuNavi__link.icon-search:hover, .t-rich .menuNavi__link.icon-menu:hover {
	background: #f0b775 !important;/*上の検索アイコンの場所の色*/
}
.t-light .l-extra {
	border-bottom: 1px #f0b775 !important;/*下のボーダーの色*/
}

◆コピペでOK!色は自分で変えてね。

ボーダーの色を変えて、5pxとかにすると、画像のようにトップ部分が分離されたようになりました。

CSSを自分で記述しようとする人なら分かると思いますが、一応自分のためにも言っておきます。

CSSはライオンメディアの子テーマに記述するようにして下さいね。そして、ダッシュボードの「外観」→「テーマエディター」に直接入力していけばOKです。

ライオンメディアの上位互換『ザ・トール』のご紹介