見出しデザインを実装する為のCSS超簡単入門

WEBページの配置、スタイル(表示形式)、デザイン、簡単なアニメーションなど”装飾”を担うスタイルシート言語『CSS』を、Wordpressの記事や固定ページのタイトルや小タイトル、即ち、「見出し」を一律して装飾する為の「見出しデザイン」を自由自在にカスタムしてに役立つ部分を主軸として超簡単入門講座を記事と動画（記事下）で解説します。

☞CSS超簡単入門レクチャー

STEP1：cssとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、WEBページのスタイル（表示）を指定するための言語です。
文書のスタイル（見栄え）など表示を制御するしくみをスタイルシートといいます。
HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSがWordpressでは採用されています。

CSSは、HTMLと組み合わせて使用する言語です。 HTMLがWEBページ内の各要素の意味や情報構造を定義しているのに対して、CSSではそれらをどのように装飾して表示するのかを指定します。簡単なアニメーションも可能です。

WEBページを制作する言語として広く利用されているHTMLだけでウェブページの見栄えを制御することもできなくはありません。
しかしそれでは検索エンジンやコンピュータに対して煩雑で理解されにくい文書構造になってしまうだけでなく、WEBサイトおよびWEBページのスタイル(表示)を一括して変更することが不可能となってしまいます。

現行のHTML5では、 HTML文書からスタイル（表示形式）に関する指定を分離することが望ましいとされています。
HTMLでは文書構造のみを定義して、スタイルについてはスタイルシート(CSS)で指定することが推奨されています。

STEP2：CSSの超基本となる3つの要素

Webページの表示スタイルを決定する時に、CSSでは次の3つの要素を用います。

・セレクタ – どのHTMLタグに対してスタイルを指定するのか
・プロパティ – 何のデザインを指定するのか
・値 – プロパティの具体的数値を指定

STEP3：CSS見出しデザインの構造

h2セレクタとH2:beforeセレクタが指定する位置

HTMLのClass属性で多種類の見出しデザインを使い分ける

WordpressにCSS見出しデザインを実装する

CSS見出しデザインをWordpressのどこに挿入するのか？

・通常のテンプレート(WordPressテーマ)では
ログインした状態でWordpressトップページ上段のメニューバー⇒「カスタマイズ」⇒「追加CSS」をクリックすると下の画像の場所に辿り着きます。後はコードをコピーした状態でマウスを右クリックして「プレーンテキストで貼り付ける」。

・追加CSSが無いテンプレートの場合
ダッシュボード⇒「外観」⇒「CSS編集」をクリックします。

WordPressにCSS見出しデザインを実装した時のHTML記述

最も簡単な見出しデザインを自分で作ろう

自作するH2見出しデザイン

最も基本的なデザインのＣＳＳコードを用意しましたので、読み解いて、実際に自分で書いて習得していきましょう。

h2セレクタとH2:beforeセレクタが指定する位置

PaddingとMarginが指定する間隔の位置を理解しよう

値を1つ指定した場合：例：padding: 0.3em ; /指定した値が[上下左右]の間隔になります。/
値を2つ指定した場合：例：padding: 0.3em 0.5em; /記述した順に[上下][左右]の間隔になります。/
値を3つ指定した場合：例：padding: 0.3em 0.3em 0em;　/記述した順に[上][右左][下]の間隔になります。/
値を4つ指定した場合：例：padding: 0.3em 0.3em 0.3em 0em; /記述した順に[上][右][下][左]の間隔になります。/

さらに細かく知りたい場合……

見出しデザインのCSSコードを読み解き、自分で書いてみよう

/*自作するＨ２デザイン*/
h2{
    position: relative;/*基本配置から相対的に位置を動かすという指令*/
    font-size: 2em;/*文字サイズは本文の文字サイズの２倍*/
    font-weight: bold;/*文字は太字*/
　　margin: 1em 0em 1em;/*前後左右のコンテンツと見出しとの間に設ける間隔*/
    padding: 0.3em 0.3em 0.3em 0.3em;/*h2セレクタで指定する見出し幅と文字との間に設ける間隔*/
    border-bottom: 2px solid #000972;/*下線を追加、太さは2px、solidは普通の線、 #000972は線の色*/
}
h2:before{
    content:'\271F';  /*左端のアイコンマークをＣＳＳで指定*/
    color:#000972;/*左端のアイコンマークの色を指定*/
    font-size: 130%;/*左端のアイコンマークの大きさを指定*/
  padding: 0.3em 0.3em 0.3em 0em;/*左端のアイコンマークと見出し全体幅との間隔*/
}

見出しデザインの色などをサイトに合わせてカスタムしよう。

ボーダーを変更しよう

見出しデザインの自作orカスタムに役立つ参考リンク集

CSSスタイルシートリファレンスはコチラ
CSSでの色のカラーコードは全部で４種類の表現形式がある。
16進数形式例：#2E8B57
RGB形式例：rgb(46,139,87); RGBA形式　例　rgba(46,139,87,1);
カラーネーム例：red
自分の好みの色を探したい場合はGoogleで「色見本」と検索すれば一発⇒コチラ
カラーネームはコチラのサイトでチェック
UTF-8文字コードに対応したテキストアイコン（例：✒）などをCSSで表記する場合⇒コチラ