ブログテーマSnow MonkeyでH２タグを吹き出しっぽくする方法

ブログテーマSnow MonkeyでH２タグを吹き出しっぽくする方法

ブログを初めて１年９ヶ月経過しましたが、ブログテーマだけをカスタマイズしているだけで、CSSとかさっぱり分からないですし、勉強する暇も無いので、CSSはずーっと放置していました。

しかし、先日のSnow MonkeyのブログでCSSを使ってデザインをカスタマイズしてみようというブログ記事が投稿され、それがきっかけで、ちょっとだけCSSをいじってみることにしました。

きっかけとなったSnow Monkeyのブログ▼

 

このブログ記事の一番下に、H２タグを吹き出しっぽいのにするコードが紹介されていたので、コピーペーストして追加CSSに追記してみました▼

そのままペーストするだけだと、ブログ記事に紹介されているような、黄色い塗りの吹き出しなので、カラーをRickey’s Blogのテーマカラーである#ce429dに合わせて、フォントのカラーも黒字ではなくて、白字になるように、CSSの５行目に color: #fffff; と追記してみたところ、理想のデザインに近づきました。

.p-entry-content > h2 {
position: relative;
border-left: none;
background-color: #ce429d;
color: #ffffff;
}

.p-entry-content > h2::after {
position: absolute;
content: “”;
top: 100%;
left: 1em;
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #ce429d;
}

タグの文字の設定については、こちらのサイトも参考になりました

文字を白字にするやり方がなかなか分からなくて、ちょっと苦戦しましたが、無事設定完了▼

 

CSSを追加するBeforeとAfter

Before▼

After▼

少しはブログっぽくなったかな〜と感じます。

Smart Phoneで表示させると、このようになります▼

やっぱり白字で抜いた方が、雰囲気が違いますね。

これにして良かったです。

 

ブログ初心者の私が初めてCSSというものを触ってみた感想

 

【関連記事】