プロのウェブデザイナーが作ったカスタマイズ可能なホームページ素材Flash(フラッシュ)とWordPressテーマを無料配布しています。
Flash Works
HOME » ワードプレス無料テーマ FlashWork-s » WordPressカスタムカラーの停止

WordPressカスタムカラーの停止


カスタムカラーはcssファイルに手を加えることなく各部の色を変更できるので、ウェブサイト制作初心者の方にはとても便利な機能ですが、次のような問題があります。

cssファイルでカラー変更できない
『親テーマstyle.css』 < 『子テーマstyle.css』 < 『カスタムカラー』という優先順位であり、カスタムカラーはあらかじめ変更できる箇所が定められているので、『style.cssファイル』を変更しても反映されません。

カスタムカラーの設定がヘッダー情報に出力される
SEO対策や更新のしやすさなどを考慮して、cssは別ファイルにすることが一般的ですが、カスタムカラーは直接phpファイルに出力されます。

これらの問題があるので、ウェブサイト制作経験者の中には、カスタムカラー機能を使わずにcssで色変更したいとお考えの方もいると思います。

そこで、カスタムカラー機能の停止方法について説明いたします。

直接、style.cssで色変更することにより、より自由なカラーリングができるのでおすすめです。

(1)functions.phpをコピーする

改造に失敗して元に戻せなくなるといけないので、必ず『functions.php』をコピーしてください。

phpはプログラムファイルなので、少し間違えただけで真っ白な画面が表示されます。

既にカスタマイズ済みの『functions.php』の改造に失敗した場合、それまでのすべての作業が無駄になってしまうので、どんな小さな作業を行う場合でも保険としてのコピーは徹底しましょう。

(2)functions.phpを開く

ドリームウィーバーやTeraPadで『functions.php』を開いてください。

注意

メモ帳でcssファイルやphpファイルを開いて変更してはいけません。エラーの原因となります。PHPやCSSに最適のテキストエディタを参考にしてください。

(3)カスタムカラーを出力しない

//改造前
add_action('wp_head', 'flashworks_customize_css');
//改造後
//add_action('wp_head', 'flashworks_customize_css');

508行目に上記のコードがあるので、先頭にスラッシュを2つ重ねてコメントアウトしてください。

削除してもいいのですが、これだけでカスタムカラーのcssは出力されませんし、再び使用する場合のことも考慮してこの対応でいいでしょう。

//カスタム背景
add_theme_support('custom-background', $custom_background);

なお、上記は背景色をカスタマイズするためのコードですが、WordPressで使用することが推奨されているので削除しないでください。

(4)部分的にカスタムカラーを使いたくない場合

「便利なのでカスタムカラー機能は使いたいけど、この機能に含まれているパーツひとつの色をcssで設定したい」というときもあるでしょう。

しかし、カスタムカラー(ベースカラー)では複数のパーツの色をまとめて出力するようになっているため、ピンポイントで色を変更できません。

例えば、検索ボタンの色を変えたい場合は、『外観 » カスタマイズ » カスタムカラー » ベースカラー』で設定しますが、望まない『ページトップへ戻るボタン』などの色も変わってしまうのです。

『style.css』 < 『カスタムカラー』の関係のため、『style.css』を変更しても反映されません。

そこで、その場合は、『functions.php』のcss出力部分のコードから、該当するクラスを削除する必要があります。

447行目の//collor outputを見つけてください。

#page-top a ページトップへ戻るボタン
.pagination a:hover ページ送り(マウスオーバー)
.pagination .current ページ送り(現在のページ)
.tagcloud a タグクラウド(ウィジェット)
.searchform input[type=”submit”] 検索ボタン
.searchform input[type=”text”] 検索フォームのフレーム

上記を参考にして、クラス名を削除し、『style.css』で同じクラスの設定を変更すればピンポイントでカラーを変えられます。

その下にはその他のクラスも設定してありますが、追加や削除をして思い通りの仕様に変更することも可能です。

ぜひ、試してみてください。


関連記事

ワードプレスの『投稿』がブログのページを作れる一方、『固定ページ』はウェブサイトのページを作れます。 最初はこの2つのページの使い分けがよ...


エックスサーバーとドメインを用意しただけでは利用できず、これらを結び付ける作業が必要となります。 この作業はエックスサーバー側とドメイ...


ワードプレス(WordPress)は、オープンソースのブログソフトウェアのため無料で利用することができます。 しかも、無料・有料のテーマが...


ワードプレスは『投稿』と『固定ページ』、2種類のページを生成できますが、その内『投稿』とは、アメーバブログやヤフーブログのようにブログのペー...


WordPressテーマ『FlashWork-s』は、初心者の方にも無理なくご利用いただけるように、あらかじめ装飾用のcssを設定してありま...



コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

最新記事

WiFiルーター

WiMAXとWiFiは、どちらも無線通信ですが、全くの別物です。WiMAXとW...

SoftBankAir

テレビでも大々的にCMが放送されているので、SoftBankAirをご存知の方...

ZEUS WiFi

ZEUS WiFiは、通信量無制限に加え、クラウドSIMで最適な回線を利用する...

WiMAX2+

WiMAX2+の契約をする際は、必ず契約期間を確認してください。多くのWiMA...

プリンターインク

キャノンとエプソンのプリンターインクを安く買う方法をいくつか紹介します。メリッ...

パソコン・スマホ

WiMAX2+が固定回線の代わりとして使えるか否か、実際にWiMAX2+オンリ...

パソコン

WiMAX2+を販売している会社は複数あり、「ある会社のWiMAXは遅い!」と...

WiMAXルーター

WiMAX2+のモバイルルーター『Speed Wi-Fi NEXT W06』と...

ギガWi-Fi

ギガWi-Fiは、「1日で3G制限」も「3日で10G制限」もない通信量無制限プ...

WiMAX端末故障

WiMAXの端末が故障した場合の修理や、端末を安く購入する方法をご紹介します。...

素材ラインナップ

How to ホームページ

その他

インフォメーション

検索