WordPress簡単に見出しデザイン変更 その2応用編
こちらの記事の応用編です。
前回は、段落(見出し)が初期のシンプルな表示黒く表示するところから、他のサイトのような分かりやすく、美しい表示に変えることが前回出来ました。
今回はそこからの応用編で、コードを表示貼り付け、色を変える方法の紹介です。
色を変えてサイトのデザインと合ったものにしたり、見出しの中でのデザインの統一できます。
統一できるので、オリジナル要素が高くなり、見ている人に対してもいい印象をあたえることが出来ます。
前回の「Simple Custom Css」を張り付けるところまでは一緒です。
そこから色を変える場合の方法になります。
例として、下のデザインを変えていく方法を実践します。
こちらのデザインをコードを表示させて、「Simple Custom Css」を張り付けると
となります。
colorの所(文字色は)実は黒ではないので、
統一したい人は、黒にするのがおすすめです。
やり方は、
こちらのサイトを使います。
こちらのHTMLカラーピッカーを使います。
画面の赤色になっている#494949というのは色番号になります。
こちらから、自分の変更したい色に画面を移動します。
移動させると、
右下の#□□□□□□□が変わったと思います。
こちちを自分が思う色に変更します。
そして、色を決めた後に、その色番号をコードへ差し替えます。
背景色の場合は、文字色と同じの場合見えなくなるので、
カラーの右か、上に移動して、色を薄くします。
見ている人の設定にもよりますが、コントラストが高い場合、
濃く見える場合があるので、かなり薄めがいいです。
文字色、背景色、左線、下線の色を交換できれば、
自分のオリジナルの見出しを作成することが出来ます。
違う処の見出しのサンプルデーターを置いているサイトも紹介します。
見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)
提供元:賢威カスタマイズ研究所
少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ
提供元:寝ログ