はてなブログ・見出しのカスタマイズ

2019年11月17日はてなブログ

はじめに

*当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

見出しの設定

「見出し」にしたい文字を選択して「見出し」から「大見出し」「中見出し」「小見出し」をクリックするだけです。

hタグ

「hタグ」を覚えておいてください。

見出しのデザインの設定をするときに必要になりますので。

はてなブログでは

ブログ名    h1
ブログの説明  h2
記事タイトル  h1
大見出し    h3
中見出し    h4
小見出し    h5

になります。
 

デザインCSS

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「デザインCSS」に下記サイトの、お好きなデザインのコードを貼り付けてください。

hタグの変更

コードの中のh1を「大見出し」にしたいものはh3に、「中見出し」にしたいものはh4に、「小見出し」にしたいものはh5にそれぞれ変更してください。(複数h1があるコードは全て変更してください)

例えば、以下のコードの

h1 {
position: relative;
padding: 0.35em 0.5em;
background: #b6e9ff;
color: #393939;
}
h1:before {
content: " “;
position: absolute;
top: -16px;
left: 0;
width: -webkit-calc(100% – 16px);
width: calc(100% – 16px);
height: 0;
border: solid 8px transparent;
border-bottom-color: #b2ddf0;
}

 h1h3h4に変えてください。

カラーは「color」や「background」のカラーコードを、変えることによって変更できます。(上記サイトの全てのコードではありません)

カラーコードは下記サイトを参考にしてください。

うまく表示できない場合はコードの下に

旧VerのFontAwesomeを使っているときはfont-family: FontAwesome;に変えてください。

とあるものはコードの中の{font-family}を{FontAwesome}に変更してください。

Posted by aurora3