ブログの見出しのデザインを変更してみよう
はじめに
まずははてなブログをかっこよくカスタマイズしてみませんか?
今回はスタイルシートを使って見出しのデザインを変更してみましょう。
見出しって何？
↑これです。
記事を見やすくするためのものですね。
はてなブログの見出しには「大見出し」「中見出し」「小見出し」の３種類があります。
なお今回書く記事はPC向けの設定になります。
スマホ用にも適用する場合はレスポンシブデザインの設定が必要です。
レスポンシブデザインについてはこちらを参考にしてください。
コピペして貼り付けてみよう
まずは実際にやってみましょう。
次の文字列をコピーします。
.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px solid #000080;
}
次にダッシュボード＞デザイン＞スパナのアイコン＞デザインCSSの欄に、コピーした文字列を貼り付けます。
貼り付けたら「変更を保存」を押します。
見出しのデザインがこのようになったかと思います。
色んなデザインのバリエーション
.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px dotted #000080;
}
.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px double #000080;
}
.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-top: 3px solid #000080;
border-bottom: 3px solid #000080;
}
.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-left: 10px solid #000080;
border-bottom: 3px solid #000080;
}
色の指定方法について
コード中に「#3f3f3f」や「#000080」が出てきたかと思います。
これは色の指定を行っているコードになります。
検索するといろいろ出てきますが、参考に下記のカラーコード表もあります。
また、文字の大きさに関しては、
font-size: 24px;
24の部分を好きな数字にする事で大きさが変えられます。
さらに通常見出しは太字になっていますが、次のコードで普通の文字にする事が出来ます。
font-weight: normal;
いかがでしたでしょうか。
是非お試しください。