ワードプレステンプレート「Ruby Tuesday」の赤色のヘッダーの背景色を変更する方法

企業サイトからオシャレショップまで大変ご好評いただいているテーマ「Ruby Tuesday」ですが、
ヘッダーの背景の赤色を違う色に変更したい！という場合があると思います。
ここのカラーを変えるとイメージがガラッと変わるので、
カスタマイズの第一歩に挑戦と言うことで、簡単にやり方を解説します。

スタイルシートのカラー指定を変更するだけなので、初心者でも簡単です。

スタイルシートで背景色を変更する方法

スタイルシート（ダッシュボード＞外観＞テーマエディター（テーマの編集））の234行目の以下の部分を探します。

#top-slide{
width:100%;
background: #ED6267;
padding: 0px;
margin: 0px;
}


この「background: #ED6267;」という部分が、
背景の色が赤色（#ED6267）ですよ、という意味です。
なので、この色の部分を好きなカラーコードに変更すればOKです。

カラーコード表はネットで色々出てくるので参考にどうぞ。
とりあえず以下のサイトは実際の色を見ながら探せるので簡単です。

HTMLカラーコード一覧表 ＞

おまけ：スタイルシートを簡単に変更する手順

例えば文字とか背景とか全部含めて、A色をB色に一括で変換したい！なんてことあると思います。
そんな場合は、スタイルシートの中身を全部コピーして、テキストアプリに貼付けて、
A色のカラーコード⇒B色のカラーコードに一括検索＆置換すれば簡単です。

元の色のカラーコードはどうやって取得するんだ？という話になりますが、
ブラウザ画面をキャプチャーして画像編集アプリのカラーピッカーで色を調べるか、
ブラウザの機能拡張でカラーピッカーを入れておくとスーパー簡単です。
Google Chromeだったら「ColorPick Eyedropper」とか便利です。

ということは、カラーコードさえ取得出来れば、
スタイルシートの中をカラーコードで検索すればいいので、
どこを変更したら色が変えられるのか、なんてのは簡単に分かりますね！

そして色に限らずこの部分を変えるには？っていうのを簡単に教えてくれるのが、
ブラウザに最初っから入ってるデベロッパーツールってやつなんですけど、
これの使い方はまたややこしいので、気になる方はGoogleさんで調べてみてください。
ちなみにChromeの「CSSViewer」っていう機能拡張も便利です。

★