はてなブログで見出しの文字に影をつける方法【ブログ初心者向け】

f:id:haniwapark:20180217010431j:plain

はにわです。

 

今回は、記事の見出し文字に影をつけたいと思います。

 

どうです?ついてるでしょう?(・∀・)フフフ

 

以上です。

 

 

 

冗談ですw

ちゃんと書きます。

スマホで確認したら・・・

影、ついてないっスΣ(゚д゚lll)

スマホで見られてる方、すみません(>人<;)

 

 

☆ やり方はとっても簡単です。

 

管理画面

デザイン

デザインCSS

コードをコピペ(もしくは記述)

  

画像で流れを説明すると・・・

 

管理画面から「デザイン」クリック。

f:id:haniwapark:20180215003409j:plain

 

次に、カスタマイズから「デザインCSS」をクリックして・・・

f:id:haniwapark:20180217000010p:plain

 

表示されたテキストをクリック。

f:id:haniwapark:20180217000746p:plain

 

テキスト画面が開いたら、↓このコードをコピペしてください。

h3 {

text-shadow:rgba(0,0,0,0.2) 2px 2px 4px;

}

 

f:id:haniwapark:20180217002428p:plain

 

出来ました!

f:id:haniwapark:20180217002555p:plain

f:id:haniwapark:20180217002621p:plain

 

ちなみに、コピペしたコード(赤枠の中の文字)の

「h3」は大見出しのことを指しています。

中見出しで使いたい場合は、「h4」。

小見出しで使いたい場合は、「h5」に書き換えてください。 

※ その他

「rgba」の横の()内の数値で、影の色合いを設定できます。

一番右の「0.2」は、影の透明度を示しており、0.0~1.0の範囲で選択できます。

「2px 2px 4px」は、それぞれ影の「横位置 縦位置 太さ」を指定する数値です。

 

気になった方は、ぜひ試してみてください(^^) 

ではでは~。

 

 

-編集後記-

 

ハァ・・・(TдT)

ほんとうは、今回、デザインCSSの活用例をお見せするはずだったんですよ。

 

いくつか試したんですが、まともな形に出来たのが「文字に影をつける方法」だけでした。う~ん、くやしい(-.-;

 

次回は、もう少し見た目が華やかになるような方法を紹介できたらいいなと思います。

もっかいHTMLとCSS、勉強し直してきますm(_ _;)m