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. 2020.07.10 | windows10, ファイル編集

    Windows 10対応のマウスジェスチャーソフト『StrokesPlus』
    右クリックしながらマウスで予め決められた軌跡を描くことをきっ…
  2. WordPress

    2020.05.24 | WordPress

    サイトの収益化を狙う時に必要な『Goolgeアドセンスの審査の申請方法』
    サイトの収益化を狙う時に必要な『Goolgeアドセン…
  3. 2020.05.05 | 画像編集

    Youtubeのサムネイルなど、WEB上で簡単ロゴ・バナー作成なサイト紹介
    今回オススメしたいサイトは、Canvaというサイトです。…
  4. hjsplit

    2020.04.05 | freesoft, ファイル編集

    圧縮・解凍ソフトの新定番!『CubeICE』
    RAR 解凍ソフト Lhaplusですが圧縮・解凍ソフトの新…
  5. WordPress

    2020.03.22 | WordPress, サイト作成

    WordPressデーターを丸ごと移動できる「All-in-One WP Migration」
    WordPressのデーターを丸ごと移動できる「All-in…

カテゴリー