ブログテーマSnow MonkeyのCSSを追加して吹き出しっぽいH2タグにしてみた!

 

Rickey
สวัสดี ครับ (サワディークラップ)

Rickey(@tg677) and Instagram (rickey9.site)です。

ブログ初心者のRickeyがCSSをいじって、H2タグの見出しを吹き出しっぽいのにしてみた!

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

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

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

 

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

そのままペーストするだけだと、ブログ記事に紹介されているような、黄色い塗りの吹き出しなので、カラーをRickey’s Blogのテーマカラーである#ce429dに合わせて、フォントのカラーも黒字ではなくて、白字になるように、CSSの5行目に 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というものを触ってみた感想

Rickey
コードをゼロから書くのは無理ですが、ある程度テンプレートがあれば、コードをいじっているうちに理想の形になっていくということが分かりました。

少しづつ、CSSにも慣れてRickey’s Blogをもっと理想のデザインにしていきたいと思います。

 

 

この記事を書いた人

Rickey

名前:Rickey(リッキー)

東京在住。

34歳の二次の父親。

サービス業をする傍ら、ライフハック情報や食レポを中心にアップ。

大学からコツコツと独学で英語を学び続け、 現在は国際関係のお仕事。

TOEIC スコア805
タイ語5級

好きなことは

・タイ
・インテリアデザイン
・Mac製品
・鉄道(主に京王線)
・ラジオ(主にJ-WAVE)
・ライフハックス
・IT関係
・サーフィンとボディーボード
・ビジネス書読書
・アロマ
・お掃除

あなたの悩みを少しでも解決出来るブログ記事を用意しています!

自分で撮った写真を集めたポートフォリオサイトはじめました!

https://good-photo.site

Rickey (リッキー)

ブログの中の記事を検索