フラッシュ素材(Flash Works)

プロのウェブデザイナーが作ったカスタマイズ可能なホームページ素材Flash(フラッシュ)とWordPressテーマを無料配布しています。
フラッシュ素材(Flash Works)
» » 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』で同じクラスの設定を変更すればピンポイントでカラーを変えられます。

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

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


関連記事

ミニバードとドメインを関連付ける作業はどちらの管理画面でも必要ですが、初めにドメイン会社で設定を済ませた方が簡単です。 ムームードメイ...


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


ワードプレスにはSEO対策のために、『All in One SEO Pack』というプラグインが用意されています。 基本的に英語のプラグイ...


ドメインの設定とサーバーの設定が終わったら、ワードプレス(WordPress)をインストールしましょう。 手動インストールもできますが...


ワードプレスのコンテンツ部分は、基本的に『見出しと本文』で組み立てます。 そして、htmlで用意されているhタグ(見出し)は6種類、本文(...



コメントする

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

最新記事

Flash Works

WordPressテーマ『FlashWork-s』で見出しタグが使われている箇...

Flash Works

WordPressテーマ『FlashWork-s』に用意されている装飾コードに...

Flash Works

ワードプレスのヘッダー画像の設定方法について説明いたします。また、簡単な変更で...

Flash Works

WordPressテーマ『FlashWork-s』に組み込まれているGoogl...

Flash Works

WordPressテーマ『FlashWork-s』に組み込まれているサイドバー...

素材ラインナップ

How to ホームページ

インフォメーション

検索