2015年2月24日火曜日

だれでもできる!テーマCSS編集(Wordpress)

だれでもできる!と書きましたが、先に注意点。

間違えたらサイトに接続できなくなります

なので、バックアップを取るなどして、対策をしてから編集しましょう。style.cssは弄る前に、バックアップをとっておきます。

ここでは、CSSの知識がない状態でもテーマの見栄えとか印象とかを変える方法について説明します。具体的には、配色フォントです。

Wordpressのメニューの外観>テーマの編集、をクリックすると、テーマのstyle.cssをいじることができます。

style.cssはキャッシュに保存されていることが多いので、編集した後にサイトを読み込むときは、ブラウザのキャッシュを削除してから再接続しないと反映されません。

<配色について>

配色、たぶんテーマはいい感じのカラー配分にはしてあります。なので、個人的には、明るさを変えずに色相だけ変えればいいんじゃないかな?と思います。
その場合、
RGBとHSV・HSBの相互変換ツール
が便利です。

もっとこだわる場合、

ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド

で紹介されているスライドを読むと参考になるかとおもいます。

さて、CSSでカラーが指定されてる部分は、#FFFであったり、#1d1d1dであったりする部分です。(カラーコード)

まず、色一覧を書き出します。ブラウザのCtrl + Fで"#"を入力し、検索して次、次、と押していき、知らない値が出たらメモっていきます。
おそらく、同じ色指定がいくつも出てきて、最終的に5色ぐらいになるんじゃないかな?と思います。この内、#FFFや#FFFFFFは白色、#000は黒色を示します。

基本的には、それぞれの色を任意の色に置き換えていく作業になります。色ごとに、検索して置き換え、検索して置き換えを繰り返すと、配色を変えることができます。


<フォントについて>

フォントは、font-family:という項目で指定されています。これも同様に検索して、後ろの""で囲まれた部分を変更していきます。

これもそれぞれ置き換えれば良いです。全部同じフォントにするならそれはそれで楽ですね。

以上です。

0 件のコメント:

コメントを投稿