wordpress初心者の為のCSS編集講座〜CSSに追記してみる〜

CSSを編集してみよう〜wordpress初心者の為のCSS編集講座2〜

CSSでのスタイルの指定に関しては、パーツ毎で指定する必要がある。

例えばサイドバー、あるいはh2などの見出しなどだ。

さて、こうは言っても何がなんだか不明だろうし早速、CSSに設定を定義して確認してみよう。

タブブラウザで記事を確認するのと実際にCSSを編集する画面をだすか、ブラウザを複数起動すると反映結果を確認しやすいだろう。

スポンサーリンク



h2の設定

「style.css」を開いて、次の内容をコピー&ペーストして見よう。

/*******記事見出しh2*************************************************/

.article h2 {

border-left: 50px solid rgba(142,174,189,0.8);

margin: 0 -45px 30px -45px;

padding: 25px 30px;

font-size: 26px;

}

.article h2:before {

content: “”;

position: absolute;

top: 100%;

height: 0;

width: 0;

border: 5px solid transparent;

border-top: 5px solid #333;

left: -49px;

border-right: 5px solid #333;

}

そうすると・・・

記事を書く際のエディター上で「段落」というプルダウンメニューから「見出し2」を選んだ際に、先ほどの「見出し」のようにリボン風になる。

前述のCSSへ記述する内容にある「h2」と言う部分が「見出し2」を意味しており、それ(h2)が記事内で使われた時に、どのように表示させるかを定義している。

他にもあるの?

当然、見出し3(h3)や見出し4(h4)も同じように定義してあげる事で、それぞれが使われた際の見た目を変える事が出来る。

サイドバーなども同様に次のようにすると、私のサイトと同じような感じになる。
色々と変更が出来るCSSだが、ここで全てを説明するよりも詳しく説明されたサイトは大量にあるので、勉強がてら調べるのも良いだろう。

今回は、一旦、ここまで!

まだデータがありません。