フラッシュ素材(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』で同じクラスの設定を変更すればピンポイントでカラーを変えられます。

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

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


関連記事

レンタルサーバーを借りる時にドメインも取得しましょう。 ドメインとはhttp://www~で表示されるインターネット上の住所みたいなもので...


ワードプレス(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 ホームページ

インフォメーション

検索