สวัสดี ครับ (サワディークラップ) Rickey(@rickey_blog) and Instagram (rickey_blog)です。
ブログテーマSnow Monkeyで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というものを触ってみた感想
コードをゼロから書くのは無理ですが、ある程度テンプレートがあれば、コードをいじっているうちに理想の形になっていくということが分かりました。
少しづつ、CSSにも慣れてRickey’s Blogをもっと理想のデザインにしていきたいと思います。
【関連記事】
-
ポッドキャスト
新マイク【SM7dB】ぶっちゃけどう?【買う、買わないの判断します】
リッキー こんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャ […] -
ポッドキャスト
【レビュー】RODE NT1 5th Generation【全て揃ったコンデンサ…
リッキー こんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャ […] -
ポッドキャスト
【速報】プライムデー先行セールでSHURE SM8Bが7,780円値引き
リッキー こんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャ […] -
ポッドキャスト
ポッドキャスト家収録でノイズを減らすコツ【まとめ】
リッキー こんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャ […] -
ポッドキャスト
USBマイクはコレ買っておけ!【ポッドキャスターのオススメ4選】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ポッドキャスト
【2022年版】音声配信・ポッドキャスト向けおすすめ機材まとめ
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ポッドキャスト
【レビュー】SHURE BETA58A【ポッドキャスト収録に最適マイク】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ポッドキャスト
【レビュー】SHURE BETA87A【ポッドキャストおすすめマイク】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ポッドキャスト
【レビュー】Electro Voice RE20【最高峰のダイナミックマイク】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ポッドキャスト
【レビュー】神ミキサーMOTU M2/M4【実際の収録比較音あり】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポ […] -
オススメ
ポッドキャストのオススメ本BEST5【開設前に読むべき1冊】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog […] -
オススメ
【レビュー】マイクとPCをつなぐUSBケーブル【ミキサー要らない】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッ […]
-
ポッドキャスト
ラジオ検索Webサービス「moonsick」が便利【無料で使える】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッ […] -
ポッドキャスト
【超カンタン】年賀状に音声付けて送る方法【3分でデキる解説】
リッキーこんにちは。ポッドキャスターのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ポッドキャスト
記事を音声化!Chrome拡張機能「Audioblogs」時間節約インプット術
リッキーこんにちは。ブロガー&ポッドキャスターのリッキー(@rickey_blog) […] -
ポッドキャスト
宅録の防音効果を高める2ステップ【吸音材と窓にタオルで高音質】
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
Mac
Clubhouseのデスクトップアプリ「Clubdeck」が超便利な6つの理由
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ライフハック
ビデオ会議「Around」使い方とメリット【無料✕40分以上Web会議】
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
ポッドキャスト
マルチ動画配信「Restream.io」【1クリックでライブ配信】
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャスト […] -
ライフハック
無料で本を読む裏ワザ3選【まだ3000円も書籍代払ってるの?】
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャストで誰で […] -
Application
zoomアップデート!バージョン5.5新機能3つ【カフェで会議OK!】
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャス […] -
Application
Mac画面収録アプリ「EaseUS RecExperts」製品版のメリット
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャストで誰で […] -
ライフハック
mmhmmのインストールから使い方を解説!【最強プレゼンツール】
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャストで誰で […] -
オススメ
Amazon最大30〜50%オフ!年末に安くなったアイテム5選
リッキーこんにちは。ブロガーのリッキー(@rickey_blog)です。ブログとポッドキャストで誰で […]