旧ManablogCopyでメニューバーの色を変更する手順

ブログ

Manablog Copyを使ってますが、まだアップデート前のバージョンのためテーマのカスタマイズでの色変更に対応していません。

新しいバージョンを購入すればテーマのカスタマイズから色変更できるので、これから購入したいと考えている人は下記のリンクから購入できます。

Brain | 紹介機能付きコンテンツ販売プラットフォーム ブレイン
Brain(ブレイン)は、自分が持っている知識やノウハウを有料販売し、収益化することができるプラットフォームです。レビュー機能により、良いコンテンツが可視化されるため、学ぶ側は質の高い学びを得ることができる仕組みが整っています。

今回は旧バージョンでのManablog Copyのメニューバーの色変更について記事にしていきます。

ManablogCopyでメニューバーの色を変更する手順

新しいバージョンのManablog Copyだとテーマのカスタマイズの欄に『mblogテーマカラー』の項目があります。

しかし旧バージョンの場合はstyle.cssに追加しなくてはならないため、少し入力作業があるんです。

✔︎本記事の概要

  • メニューバーの色を変更する手順
  • おすすめのカラーコードサイト
  • まとめ

今回はこのような流れから考えていきます。

メニューバーの色を変更する手順

メニューバーの色変更はダッシュボードの欄からテーマを選び、カスタマイズから変更します。

テーマのカスタマイズを選択すると下の画像のように表示されます。

追加CSSを開くとstyle.cssに追加できるので、下記のコードをコピペしてください。

header .nav-bg {
background: #●●●●●●;
}
●●●●●●の部分にカラーコードを入力すれば、お好みの色のメニューバーになります。
 

  おすすめのカラーコードサイト

原色大辞典

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

配色の見本長

配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理...

カラーコードは検索すれば調べることができますが、上記のサイトなら初心者にも分かりやすくなっているので便利です。

僕は配色の見本長を使うことの方が多いのですが、理由としてスライダーで自分の好きな色を探れるのが決め手ですね。

自分が使いやすいと思う方を使ってください。

まとめ

Manablog Copyが発売されて間もない頃は、テーマエディターを自分で書き換えたり、加えたりして結構手間が多かったのですが、manablogのファンの方が設定の追加をしてくれたり、アップデートがあったので今のバージョンでも使いやすくなったと思います。

一番新しいバージョンだと、Mblogテーマカラー変更に加えてウィジェットカスタマイズができるようになりました。

今から購入する人は以前より使いやすくなっているので、ブログ作成が簡単にできるようになっています。

Brain | 紹介機能付きコンテンツ販売プラットフォーム ブレイン
Brain(ブレイン)は、自分が持っている知識やノウハウを有料販売し、収益化することができるプラットフォームです。レビュー機能により、良いコンテンツが可視化されるため、学ぶ側は質の高い学びを得ることができる仕組みが整っています。

SEO対策もできているので、興味のある人は是非テーマを変えてみてください。

この記事を書いた人
moto takigawa

ブログ初心者 開始5日で3桁達成 経歴▶︎大学中アメリカ留学で海外に魅力を感じる▶︎一部上場企業へ就職▶︎100万を持ってタイで起業▶︎1年で年商3000万到達▶︎令和元年に日本に本社設立◀︎イマココ
2年以内にブログでも3000万の収益を得る為毎日発信中

moto takigawaをフォローする

コメント

タイトルとURLをコピーしました