Facebook
RSS Feed
Feb 21, 2014

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」っていう機能拡張も便利です。

カスタマイズの無料サポートは行ってませんので、分からない所はGoogleで調べてくださいね!特にWordPress独自タグやHTML/CSSの記述方法は時代とともに変わるので最新情報を各自見直してください。あと作業する時はバックアップを忘れずに!
Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト