ブログテーマ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(リッキー)
東京出身。33歳の男。

サービス業をしています。 日本語、英語、たまにタイ語でつぶやきます。 大学からコツコツと独学で英語を学び続け、 現在は国際関係のお仕事もさせて頂いています。

1日1回〜2回ブログを更新。 好きなことはタイ、インテリアデザイン、iMac、MacbookPro、 AppleWatch、鉄道(主に京王線)、ラジオ(主にJ-WAVE)、 ライフハックス、IT関係、サーフィン、ボディーボード、 ビジネス書読書、アロマ、お掃除、Wordpress、ブログ等々。

とにかく質を問わず、ブログをアップを続けながら 突き進む成長過程中のブログです。 家では2児の父。

よろしくお願いします。
いろんな方法でシェアできます!

Rickey's Blogのメルマガ登録してね

ブログには書けなかったコト、書けないコトをこっそりとメルマガでお届けします。

ブログの中の記事を検索