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です。
ライオンメディアの上位互換『ザ・トール』のご紹介

Webに本気なら、Webに本気のテーマで。
ライオンメディアで少しずつカスタマイズしていくのもいいと思います。しかし、デザインやレイアウトの学習ばかりに時間をかけていては、いつまでたっても肝心のWebコンテンツが完成しません。そして無料版では最終的に必ず限界が来ます。
『ザ・トール』は、デザインの拡張性が抜群でカスタマイズも自由自在。クリック操作だけで簡単に自分好みのオリジナルデザインが完成します。煩わしいHTMLやCSSをいじる必要もないので初心者の方でも安心です。
令和の時代では、もうコードを書く必要はないんです。ライオンメディアを選んだアナタなら、間違いなく同じ会社が提供する『ザ・トール』を気に入ることでしょう。
一流の開発チームが作り上げた国内最高峰のWPテーマで、ぜひスムーズなWeb制作を可能にしてください。