1.はじめに
こんにちは、Rickyです。
どうですか、最初の記事からだいぶ成長しているでしょう。
見出しの文字を大きくしたり、目次を囲ってみたりするだけでだいぶ印象が変わってきますよね。
この調子でどんどんスキルアップを目指していきしょう。
というかこの記事を書くことで私自身忘備録にもなるのでとてもGOODです。
さあ、今回は見出しを装飾していきましょう。
見出しの文字は確かに大きくして目立つようにしましたが、まだもっとかっこよくしたい。
そう、見出しをかっこよくしたい。
だって、みんな吹き出しにしたりアンダーバー引いたりかっこいいんだもの。
というわけで早速やっていきましょう。
Let`s Try
2.見出しを装飾する
2.1.CSSで装飾する
さて、見出しを装飾したいんですがどうやっていいかさっぱりわかりません。
どうしましょう・・・・そうですねググりましょう。
困ったときはグーグルさんに聞くのが一番です。(いつか検索する側から検索される側を夢見て！)
ということで、ググりました。そして、分かりました。（はやっ）
まず、HTMLの文章に装飾を施すにはCSS表記が必要らしい。（別の方法もあるかもしれませんが、私には分かりませんのでこのままやっていきます。）
調べてみるとほんとに色々ありました。
しかもですよ、コピペするだけで使えますよっていう感じで紹介されているんですよ。もう、目から鱗ですよ。
遠慮なくコピペしましょう。
よーし、早速やってみましょう。
さあ、CSSのコードを・・・・んっ、どこに？
どこにコピペすんのさ！
分かりません。コピペ先が分かりません。
2.2.CSSコードを記述する
コピペ先が分からないので、偉大なるグーグル先生に聞きました。
・・・分かりました。(はやっ)
方法は２つあります。・・・・いや正直もっとあるかもしれませんが分かりません。てへっ
（この方法ははてなブログで検証したものです。）
方法①
ダッシュボードの「デザイン」から「カスタマイズ」のタブまで進み、そこからCSSを記述する場所があります。
そこにCSSをコピペすれば見出しが装飾されます。
但し、この方法は今まで書いてきたすべての記事に反映されます。（反映しないやり方があるかもしれませんが分かりませんでした。）
今回は特定の記事にだけ反映させたいのでこの方法は無しです。
方法②
HTML編集にて以下のように記述します。
<style type="text/css"><!--
ここにCSSをコピペします。
--></style>
このようにすれば記事一つ一つをカスタマイズできます。
それでは試していきましょう。
〇サンプル１
h3{
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}
見出しを「h3」に設定している箇所が装飾されます↓
test
〇サンプル2
h3{
position: relative;
padding: 0.6em;
background: #e0edff;
}
h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}
見出しを「h3」に設定している箇所が装飾されます↓
test
〇サンプル3
h3 {
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}
h3:after {
/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
見出しを「h3」に設定している箇所が装飾されます↓
test
ほかにもいっぱいあります。気になる方は「見出し 装飾 html」でググってみてください。
どうでしょうか。なんか楽しくなってきましたね。
3.まとめ
見出しを装飾することができました。
正直、感無量です。
なんかこじゃれた感を今後出していけそうな気がします。
ほんとにちょっとしたことを勉強しただけなんですが記事を書くのが楽しくなってきました。
まだまだ、いっぱい勉強することがありそうです。カッコいいブログを目指して頑張っていきます。
それでは、失礼します。
