ハンドメイド作家マニュアル
ブログなどで商品やブランドを紹介することはとても大切です。
というわけで ブログのカスタマイズについても時折更新しています。
ワードプレスのテーマ 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; }
これでブルーに変更完了です。
ちなみに色はカラーサンプルというサイトから好きなものを選びました。
メニューバーの色を好みのものに変えるとブログ運営も楽しくなりますね。
MH magazine liteというワードプレスのテーマはタグのSEOも強く、雑誌のようにディスプレイが出来たり、ウィジェットを使ってアドセンスやアフィリエイトを表示させることが出来てとても便利です。
無料のテーマなのにカスタマイズ性に優れているのでおすすめのテーマです。
今日はMH magazine liteのカラー変更のカスタマイズをご紹介しました。
自分好みに変えて楽しくブログの運営が出来ると良いですね。
