wordpress

WordPress リボン風見出しのソースとその説明


スポンサーリンク

CSSでリボン風見出しを作る

WordPressの使い始めは、すこし大変です。かっこいい見出しを考えたり、文字の大きさを変えてみたり、いろいろ試してみてください。 簡単なリボン風見出しと、今回のリボン風見出しについて詳しく書いたものがあります。ご参考に。

WordPress スタイルシート編集の基本 見出しを変える
WordPress 見出しを変えたい WordPressの既存テーマの見出しは、文字の大きさが変わるだけで、何の装飾もない、記事を書く前に「見出し」を変えようと、子テーマを作り、ス
before疑似要素・after疑似要素とCSSで三角形を作る
CSSでの三角形の作り方とbefore疑似要素・after疑似要素 前回、CSSの簡単な編集でリボン風見出しを作りましたが、今回は影を付けてみたり応用して行きたいと思います。その前
スポンサーリンク

子テーマでCSS編集する前に重要なこと、クラス名を探す。

私が使っていたテーマTwentyTenのクラス名は「entry-content」です。テーマによってクラス名が違いますので、ソースの中を「h1」や「h2」で検索してみてください。TwentyTenでは「.entry-content h1」と記載されてます。

見出し

リボン風見出しのCSSのソース

リボン風見出し ここで使っているこの見出しのソースは下です。

h2:{
position:relative; /*位置の指定*/
padding:10px; /*上下左右の間隔*/
background:#F7DDFB; /*リボンの色*/
box-shadow: /*影の付け方*/
10px 0 0 0 #F7DDFB, -10px 0 0 0 #F7DDFB, 0 3px 3px 0 rgba(0,0,0,0.1);
}
h2:before{
content:” “; /*挿入するもの*/
position:absolute; /*位置の指定*/
top:100%; /*三角形の位置*/
left:-10px; /*三角形の位置*/
width:0; /*幅*/
height:0; /*高さ*/
content:” “; /*挿入するもの*/
border-width:0 10px 10px 0; /*線の幅*/
border-style:solid; /*実線に指定*/
border-color:transparent; /*線の色は透明に指定*/
border-right-color:#F0DFFA; /*右の線の色を指定*/
}
h2:after{
content:” “; /*挿入するもの*/
position:absolute; /*位置の指定*/
top:100%; /*三角形の位置*/
left:100%; /*三角形の位置*/
width:0; /*幅*/
height:0; /*高さ*/
border-width:10px 10px 0 0; /*線の幅*/
border-style:solid; /*実線に指定*/
border-color:transparent; /*線の色は透明に指定*/
border-right-color:#7bb8d8; /*右の線の色を指定*/
}

h2のスタイルを指定します。{ }の中にいろいろな情報を書いていきます。実際の子テーマのスタイルシートは下です。上のソースに「ピリオド+クラス名」を付けたものです。このブログのクラス名は「entry-content」です。

wordpress wordpress

(上の画像は拡大します)

CSS ソースの説明

h2:{ } リボンの真ん中を作ります。

  1. 位置の指定(positionプロパティ)をrelative(相対的位置)に指定します。
  2. リボンの色 background と文字の色 color を指定します。
  3. padding、marginなどを指定。
  4. 影を付けてみます。box-shadowはボックスに影を付けるプロパティです。

影の付け方

【box-shadow: 横方向のズレ 縦方向のズレ ぼかし 影の色】と記載します。rgbaで透明度を指定します。16進法のカラーコードでは、透明度は指定できません。rgbaを使うことによって、透明度まで指定できるのです。

ソース

h2:{
position:relative; /*位置の指定*/
padding:10px; /*上下左右の間隔*/
background:#F7DDFB; /*リボンの色*/
box-shadow: /*影の付け方*/
10px 0 0 0 #F7DDFB, -10px 0 0 0 #F7DDFB, 0 3px 3px 0 rgba(0,0,0,0.1);
}

h2:before{ } リボンの左端を作ります。

リボンの左端は次の3つの手順で作ります。

  1. 位置の指定(positionプロパティ)をabsoluteに指定する
  2. 三角形部分の位置を指定
  3. 三角形部分を作る

三角形と疑似要素の詳しい内容は、下記のリンクページに記載しています。

before疑似要素・after疑似要素とCSSで三角形を作る
CSSでの三角形の作り方とbefore疑似要素・after疑似要素 前回、CSSの簡単な編集でリボン風見出しを作りましたが、今回は影を付けてみたり応用して行きたいと思います。その前

ソース

h2:before{
content:” “; /*挿入するもの*/
position:absolute; /*位置の指定*/
top:100%; /*三角形の位置*/
left:-10px; /*三角形の位置*/
width:0; /*幅*/
height:0; /*高さ*/
content:” “; /*挿入するもの*/
border-width:0 10px 10px 0; /*線の幅*/
border-style:solid; /*実線に指定*/
border-color:transparent; /*線の色は透明に指定*/
border-right-color:#F0DFFA; /*右の線の色を指定*/
}

before疑似要素

before疑似要素を使います。before疑似要素とafter疑似要素は、指定した要素の前または後に指定した内容を入れるという働きをします。その内容はcontentプロパティで指定します。疑似要素はcontentプロパティがないと働きません。

要素:before{ content:” “; }

コンテンツを挿入する要素 content は ” “ このように空白にします。疑似要素はcontentプロパティがないと働かないので、content:” “;は空要素のまま消さないでください。

h2:after{ } リボンの左端を作ります。

after疑似要素を使います。要領は左側とほぼ同じなので説明は省きます。

まとめ

リボン風見出しのソースと合わせて、そのソースの内容についても記載しています。ソースをコピペすれば出来上がりますが、一応、細かい説明まで記載しておきます。テーマによっては、微調整が必要だと思いますので。