WordPressブログについて FMテンプレート

簡単?「FMテンプレート」のメニューや見出しなどの色をカスタマイズする方法

投稿日:2016年11月9日 更新日:

FMテンプレート色カスタマイズ-15

当ブログでは、「FMテンプレート」というWordPressのテンプレート(テーマ)を使っています。

「FMテンプレート」は、色やデザイン、配置が異なるものを全部ひっくるめて、全108種類。色は、白、赤、水色、オレンジ、黄緑、黄色の6色の中から好きなのを選べるようになっています。

シンプルなデザインは気に入ってるんですが、この6色の中にはあんまり使いたい色がなかったんですよね。で、知識も全くないくせに、カスタマイズしてしまいました^^;

今回は、「ちょっぴり色を変えてみたいけど、どうやって変えていいかわからない・・・」と思っているあなたのために、「FMテンプレート」の色をカスタマイズする方法をご紹介します。

決して難しくないので、ぜひ挑戦してみてください♪

 

色を変えるには、カラーコードを変更します

今回は、「FMテンプレート」の中でも、「コンテンツナロー2カラム右(黄)」のテンプレートをカスタマイズしていきます。

FMテンプレート色カスタマイズ-0

「コンテンツワイド2カラム右(黄)」は、主に2つの色から成り立っています。

グローバルナビゲーションや見出し、フッターなど、同系色の濃い色、薄い色の2色で構成されているんですね。

FMテンプレート色カスタマイズ-2

なので、その2色のカラーコードを、自分の変えたい色のカラーコードに変更してやれば、色を変えられるという仕組みです。

 

変えたい色のカラーコードを探す

まずは下準備として、変えたい色のカラーコードを探します。

どんな色にするかを選ぶのは、こちらのサイトが便利です。

原色大辞典
http://www.colordic.org/

ものすごーくたくさん色があって迷ってしまいそうですが、お好きな色を1つ選んでください。そして、「#」ではじまる6桁の英数字を、メモしておきます。

ここで選んだ色を、「①濃い色」とします。

この記事では、「アクアマリン(#67b5b7)」を例に説明していきますね。

FMテンプレート色カスタマイズ-3

 

同系色の薄い色のカラーコードを探す

先程選んだカラーコードを元に、自然なグラデーションになるように、同系色の薄い色を探します。

今度はこちらのサイトに行ってください。

color-hex
http://www.color-hex.com/

このサイトでは、同系色の薄い色を段階的に表示させるために使います。

先程メモっておいた、カラーコードを入力して、「Get Info」をクリック。

FMテンプレート色カスタマイズ-4

すると、入力したカラーコードについての情報のページに移動します。
少し下へスクロールして、「Tints of #~」というところを表示させてください。

FMテンプレート色カスタマイズ-5

 

一番左が先程入力したカラーコードになっていて、右に行くにつれて段々と色が薄くなっていってるはずです。

FMテンプレート色カスタマイズ-6

あまり近い色を選ぶと、グラデーションがきれいにならないので、左から5~6番目くらいのカラーコードを選んでください。

このカラーコードを「②薄い色」とします。こちらもメモっておいてくださいね。後で使います。

 

TeraPadを使って、CSSを変更する

それでは、いよいよCSSを編集していきます。

今回のカスタマイズでは、「TeraPad」というテキストエディタを使って編集します。

「TeraPad」を使うのは、wordpressからの直接編集では使えない「置換機能」を使いたいから。

「置換」のできるテキストエディタなら、なんでもいいです。

では、WordPressのダッシュボードにログインし、①外観、②テーマの編集の順にクリックします。

FMテンプレート色カスタマイズ-7

スタイルシート(Style.css)を全選択をしてコピーし、TeraPadに貼り付けます。

編集に失敗したとき用に「CSSバックアップ」などと名前をつけて、バックアップ用のファイルを別に保存しておきます。

もし編集に失敗した場合は、このバックアップしたものを貼り付け直せば、元に戻せます。なので、面倒でも必ずやっておいてくださいね。

バックアップが用意できたら、先ほどのバックアップ用とは異なる名前をつけて保存し、そのファイルを編集していきます。

82行目までスクロールしてください。「#f1e767」と「#feb645」というカラーコードが記載されているので、先程用意したカラーコードに変更します。

FMテンプレート色カスタマイズ-8

「#f1e767」と「#feb645」のカラーコードを変更する箇所は、何カ所もあるので、まとめて変更するために「置換」の機能を使います。

FMテンプレート色カスタマイズ-9

  • 検索する文字列⇒元々のカラーコード
  • 置換する文字列⇒変更したいカラーコード

となるように入力して、「すべて置換」をクリックします。

FMテンプレート色カスタマイズ-10

ちょっとややこしいんですけど、

  • 「#feb645」⇒「#67b5b7(濃い色として設定した色)」
  • 「#f1e767」⇒「#a3d2d3(薄い色として設定した色)」

となるように置換してください。

間違うと、グラデーションが逆になっちゃいます。

「全て置換」をクリックすると、「置き換えますか?」と確認されるので、全て「はい(Yキー)」を押していってください。

FMテンプレート色カスタマイズ-11

全て置換ができたら、TeraPad上のテキストを全選択します。それを、ダッシュボードのCSSファイルに貼り付け直します。

で、ファイルを更新。

ブログを見てみると、うまくいっていれば色が変更されているはずです。FMテンプレート色カスタマイズ-12

ブラウザのキャッシュが残っていて、一見、色が変更されてないようになってしまうことがあります。その場合は、キャッシュを削除してもう一度見てみてください。

 

まとめ

私は、ブログを立ち上げて間もない頃に、知識も全くないくせに我慢できなくて変えてしまいました(笑)

初心者は、ブログの外見よりも、中身を充実させることに力を注ぐべきなんですけどね。

ド素人でもできたので、きっとあなたにもできますよ♪

運営するブログのテーマによって色を変えたり、自分のお好みの色にしたりと、テンプレートの色を変えたい場面もあると思います。

カラーコードさえ決めれば、後は簡単にできちゃいます。他のブログと差別化するためにも、ぜひカスタマイズしてみてくださいね。

最後まで読んでいただきありがとうございました。

-WordPressブログについて, FMテンプレート
-,

Copyright© アフィリエイト初心者でも稼ぐコツを教えます。主婦アフィリエイターまかろんのブログ , 2017 All Rights Reserved Powered by AFFINGER4.