Market zero

シャドウバースのブログと化しています

はてなブログのカスタマイズ方法②~見出しのデザイン変更~

f:id:marketzero:20161231185837j:plain

ブログの見出しのデザインを変更してみよう 

はじめに

まずははてなブログをかっこよくカスタマイズしてみませんか?

今回はスタイルシートを使って見出しのデザインを変更してみましょう。

 

見出しって何?

↑これです。

記事を見やすくするためのものですね。

はてなブログの見出しには「大見出し」「中見出し」「小見出し」の3種類があります。

なお今回書く記事はPC向けの設定になります。

スマホ用にも適用する場合はレスポンシブデザインの設定が必要です。

レスポンシブデザインについてはこちらを参考にしてください。

www.marketzero0.com

 

コピペして貼り付けてみよう

まずは実際にやってみましょう。

次の文字列をコピーします。

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px solid #000080;
}

 

次にダッシュボード>デザイン>スパナのアイコン>デザインCSSの欄に、コピーした文字列を貼り付けます。 

f:id:marketzero:20161229031421j:plain

 

貼り付けたら「変更を保存」を押します。 

 f:id:marketzero:20161203073819j:plain

見出しのデザインがこのようになったかと思います。

 

色んなデザインのバリエーション

 

f:id:marketzero:20161203074728j:plain

 .entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px dotted #000080;
}

 

f:id:marketzero:20161203074829j:plain

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-bottom: 3px double #000080;
}

 

f:id:marketzero:20161203074922j:plain

.entry-content h3{
color: #3f3f3f;
padding: 10px 15px;
border-top: 3px solid #000080;
border-bottom: 3px solid #000080;
}

 

f:id:marketzero:20161203075015j:plain

.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; 

 

いかがでしたでしょうか。

是非お試しください。

広告を非表示にする
Copyright (C) 2016 Marketzero All Rights Reserved.