はてなブログで見出しの文字に影をつける方法【ブログ初心者向け】
はにわです。
今回は、記事の見出し文字に影をつけたいと思います。
どうです?ついてるでしょう?(・∀・)フフフ
以上です。
冗談ですw
ちゃんと書きます。
※ スマホで確認したら・・・
影、ついてないっスΣ(゚д゚lll)
スマホで見られてる方、すみません(>人<;)
☆ やり方はとっても簡単です。
管理画面
⇩
デザイン
⇩
デザインCSS
⇩
コードをコピペ(もしくは記述)
画像で流れを説明すると・・・
管理画面から「デザイン」クリック。
次に、カスタマイズから「デザインCSS」をクリックして・・・
表示されたテキストをクリック。
テキスト画面が開いたら、↓このコードをコピペしてください。
h3 {
text-shadow:rgba(0,0,0,0.2) 2px 2px 4px;
}
出来ました!
⇩
ちなみに、コピペしたコード(赤枠の中の文字)の
「h3」は大見出しのことを指しています。
中見出しで使いたい場合は、「h4」。
小見出しで使いたい場合は、「h5」に書き換えてください。
※ その他
「rgba」の横の()内の数値で、影の色合いを設定できます。
一番右の「0.2」は、影の透明度を示しており、0.0~1.0の範囲で選択できます。
「2px 2px 4px」は、それぞれ影の「横位置 縦位置 太さ」を指定する数値です。
気になった方は、ぜひ試してみてください(^^)
ではでは~。
-編集後記-
ハァ・・・(TдT)
ほんとうは、今回、デザインCSSの活用例をお見せするはずだったんですよ。
いくつか試したんですが、まともな形に出来たのが「文字に影をつける方法」だけでした。う~ん、くやしい(-.-;
次回は、もう少し見た目が華やかになるような方法を紹介できたらいいなと思います。
もっかいHTMLとCSS、勉強し直してきますm(_ _;)m