WordPressの使い始めは、すこし大変です。かっこいい見出しを考えたり、文字の大きさを変えてみたり、いろいろ試してみてください。 簡単なリボン風見出しと、今回のリボン風見出しについて詳しく書いたものがあります。ご参考に。
私が使っていたテーマTwentyTenのクラス名は「entry-content」です。テーマによってクラス名が違いますので、ソースの中を「h1」や「h2」で検索してみてください。TwentyTenでは「.entry-content h1」と記載されてます。
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」です。
(上の画像は拡大します)
【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); } |
リボンの左端は次の3つの手順で作ります。
三角形と疑似要素の詳しい内容は、下記のリンクページに記載しています。
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疑似要素とafter疑似要素は、指定した要素の前または後に指定した内容を入れるという働きをします。その内容はcontentプロパティで指定します。疑似要素はcontentプロパティがないと働きません。
要素:before{ content:” “; } |
コンテンツを挿入する要素 content は ” “ このように空白にします。疑似要素はcontentプロパティがないと働かないので、content:” “;は空要素のまま消さないでください。
after疑似要素を使います。要領は左側とほぼ同じなので説明は省きます。
リボン風見出しのソースと合わせて、そのソースの内容についても記載しています。ソースをコピペすれば出来上がりますが、一応、細かい説明まで記載しておきます。テーマによっては、微調整が必要だと思いますので。
This post was last modified on 05/07/2022 3:22 PM