CSSでリボン風見出しを作る
WordPressの使い始めは、すこし大変です。かっこいい見出しを考えたり、文字の大きさを変えてみたり、いろいろ試してみてください。 簡単なリボン風見出しと、今回のリボン風見出しについて詳しく書いたものがあります。ご参考に。
- WordPress リボン風見出しを作ってみる
- 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」です。
（上の画像は拡大します）
CSS ソースの説明
h2:{ } リボンの真ん中を作ります。
- 位置の指定（positionプロパティ）をrelative（相対的位置）に指定します。
- リボンの色 background と文字の色 color を指定します。
- padding、marginなどを指定。
- 影を付けてみます。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つの手順で作ります。
- 位置の指定（positionプロパティ）をabsoluteに指定する
- 三角形部分の位置を指定
- 三角形部分を作る
三角形と疑似要素の詳しい内容は、下記のリンクページに記載しています。
ソース
| 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疑似要素を使います。要領は左側とほぼ同じなので説明は省きます。
まとめ
リボン風見出しのソースと合わせて、そのソースの内容についても記載しています。ソースをコピペすれば出来上がりますが、一応、細かい説明まで記載しておきます。テーマによっては、微調整が必要だと思いますので。