MH magazine liteのカスタマイズ 色編

ハンドメイド作家マニュアル

ブログなどで商品やブランドを紹介することはとても大切です。
というわけで ブログのカスタマイズについても時折更新しています。

 

スポンサーリンク

MH magazine lite

私はワードプレスのテーマはMH magazine liteを使用しています。

雑誌のようなレイアウトでとっても気に入っています。
でも、ひとつ好きになれないのがバーのカラーです。
オレンジっぽい色がなんだか好きになれなかったのでライトブルーへ変更しました。

 

メニューバーカラーの変更

まず親テーマのstyle.cssをコピーして、子テーマのstyle.cssへ貼り付けました。
いつ何があってもいいように、そしてアップデートされても触ったものが維持されるように、自分で手を加えるときは必ず「子テーマで」を厳守しています。

 

子テーマに貼り付けたstyle.cssからNavigationを探します。

変更前 .mh-main-nav { text-transform: uppercase; border-bottom: 5px solid #e64946; }
変更後 .mh-main-nav { text-transform: uppercase; border-bottom: 5px solid #87CEFA; }

 

これでナビゲーションバーの直下のラインがオレンジからライトブルーに変わりました。

 

同様にウィジェットのバーも同じ色に変えてみました。

【変更前】
.mh-widget, .mh-footer-widget { margin-bottom: 25px; overflow: hidden; }
.mh-widget-title { position: relative; font-size: 16px; font-size: 1rem; padding-bottom: 5px; margin-bottom: 20px; margin-bottom: 1.25rem; text-transform: uppercase; border-bottom: 3px solid #e64946; }
.mh-footer-widget-title { font-size: 14px; font-size: 0.875rem; color: #fff; }
.mh-footer-widget-title a { color: #fff; }

【変更後】
.mh-widget, .mh-footer-widget { margin-bottom: 25px; overflow: hidden; }
.mh-widget-title { position: relative; font-size: 16px; font-size: 1rem; padding-bottom: 5px; margin-bottom: 20px; margin-bottom: 1.25rem; text-transform: uppercase; border-bottom: 3px solid #87CEFA; }
.mh-footer-widget-title { font-size: 14px; font-size: 0.875rem; color: #fff; }
.mh-footer-widget-title a { color: #fff; }

 

これでブルーに変更完了です。

ちなみに色はカラーサンプルというサイトから好きなものを選びました。

 

カラーサンプルのサイト

 

メニューバーの色を好みのものに変えるとブログ運営も楽しくなりますね。

 

スポンサーリンク

スポンサーリンク

About サカ 78 Articles
ハンドメイド作家としてデビューしたい、売り上げをあげたいという方の参考になるような手芸に関することを発信したいと思います。これから委託販売を始める方、イベントに出展される方の参考になりますように。