WordPress

WordPress簡単に見出しデザイン変更 その2応用編

スポンサーリンク




WordPress簡単に見出しデザイン変更

こちらの記事の応用編です。

前回は、段落(見出し)が初期のシンプルな表示黒く表示するところから、他のサイトのような分かりやすく、美しい表示に変えることが前回出来ました。

今回はそこからの応用編で、コードを表示貼り付け、色を変える方法の紹介です。

色を変えてサイトのデザインと合ったものにしたり、見出しの中でのデザインの統一できます。
統一できるので、オリジナル要素が高くなり、見ている人に対してもいい印象をあたえることが出来ます。

スポンサーリンク

前回の「Simple Custom Css」を張り付けるところまでは一緒です。

そこから色を変える場合の方法になります。

例として、下のデザインを変えていく方法を実践します。

Simple_Cutom_CSS05

こちらのデザインをコードを表示させて、「Simple Custom Css」を張り付けると

Simple_Cutom_CSS06

となります。

colorの所(文字色は)実はではないので、

統一したい人は、黒にするのがおすすめです。

やり方は、

こちらのサイトを使います。

HTMLカラーコード

こちらのHTMLカラーピッカーを使います。

画面の赤色になっている#494949というのは色番号になります。

こちらから、自分の変更したい色に画面を移動します。

移動させると、

Simple_Cutom_CSS08

右下の#□□□□□□□が変わったと思います。

こちちを自分が思う色に変更します。

そして、色を決めた後に、その色番号をコードへ差し替えます。

背景色の場合は、文字色と同じの場合見えなくなるので、

Simple_Cutom_CSS08

カラーの右か、上に移動して、色を薄くします。

見ている人の設定にもよりますが、コントラストが高い場合、

濃く見える場合があるので、かなり薄めがいいです。

文字色、背景色、左線、下線の色を交換できれば、

自分のオリジナルの見出しを作成することが出来ます。

違う処の見出しのサンプルデーターを置いているサイトも紹介します。

見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)
提供元:賢威カスタマイズ研究所
少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ
提供元:寝ログ

スポンサーリンク





関連記事


人気サーバーランキング


おすすめ記事

自己紹介

フリーソフト好きな管理人が、自分のオススメするフリーソフトを勝手に乗せるサイトです。 ワードプレスについてはまだまだ勉強中です~。

最近の記事

  1. 2019.09.05 | windows10, 動画編集

    動画フォーマットの一括相互変換『BatchWOO!』がオススメ
    『BatchWOO!』は、動画フォーマットの一括相互変換でき…
  2. サイトカスタマイズ

    2019.02.26 | ファイル編集, 画像編集

    縮小専用の使えなくなった時におすすめしたいフリーソフト
    縮小専用と同じように、画像を簡単に小さくしたい時に使えるソフ…
  3. 2019.02.25 | freesoft

    ファイナライズしていないDVDのデーターを読めるソフト 『ReadDVDR』
    未ファイナライズのDVD-RからVTSを取り出すハードデ…
  4. 2019.02.25 | WordPress, サイト作成

    WordPressでhttpからhttpsにしたい時にする手順(エックスサーバーSSL化)
    WordPressでhttpからhttpsにしたい時にする手…
  5. 2019.02.24 | WordPress

    WordPressでサムネイル付き、新着投稿を表示するのにおすすめ
    新着投稿をしたときに、サムネイル付きで表示されたほうが、…

カテゴリー