プロのウェブデザイナーが作った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』で同じクラスの設定を変更すればピンポイントでカラーを変えられます。

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

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


関連記事

htmlサイトでメニューを作ろうとした場合、テキストを入れて、それにリンクを張ってと、面倒な作業が必要となります。 もしも修正が必要となっ...


ワードプレスはサイト訪問者のリクエストがあった時に、ページを構成するそれぞれのパーツを組み合わせ、さらにデータベースから取り出したテキストを...


ムームードメインを利用するときのサーバー設定方法について説明いたします。 難しいことはないので、以下を参考に手順通りに進めてください。...


ワードプレスは自分の好みの『テーマ』をインストールして有効化するだけで思い通りのサイトを制作できますが、カスタマイズして自分だけのオリジナル...


『ワードプレス』はウェブサイトを動かすシステムであり、実際に表示されるデザインは『テーマ』と呼ばれるテンプレートで成り立っています。 つま...



コメントする

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

最新記事

ノートパソコン

いらなくなった使用済みパソコンや故障パソコンを無料で手軽に回収・廃棄してもらう...

ソフトバンク光

ソフトバンク光は、SoftBankが提供する光ファイバー回線を利用したインター...

フレッツ光

フレッツ光は、NTT東日本・NTT西日本が提供する光回線です。お得なサービスが...

マウス

一度気にしたら、その後ずっと気になるPCマウスのクリック音。「カチカチ」うるさ...

マウス

パソコンを使っていると、ある日突然、マウスの左クリックの反応が悪くなります。そ...

素材ラインナップ

How to ホームページ

その他

インフォメーション

検索