リッキー

สวัสดี ครับ (サワディークラップ) Rickey(@rickey_blog) and Instagram (rickey_blog)です。

ブログ初心者の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をもっと理想のデザインにしていきたいと思います。

 

 

  • ブックマーク
  • Feedly
  • -
    コピー

この記事を書いた人

Rickey

サービス業海外事業部所属11年目 英語、タイ語を使いながら
奮闘するグローバルパーソン🌐ブログでグローバルな世界で生きるために必要なエッセンスを凝縮して毎日発信中🉐ライフハック、語学術、有益なWebツールを紹介!Macユーザー歴12年、ラジオ好き➡stand.fmで音声毎日配信中💦イケハヤサロンとマナブログで勉強中