kabkabsunshine’s blog

読書メモ、投資のこと、日々の学び

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

 

はてなブログで書き始めて三週間くらい経ちますが、やろうやろうと思って調べていなかった見出しのカスタマイズ。

記事を各画面で見出しをつけて目次を作るところまではわかりました。

見出しに色をつけたい!

 

はてなブログの見出しをコピペでおしゃれにカスタマイズ - つなろっく

上記サイトでわかりやすい説明がありました。

①使いたい見出しデザインを見つけたら「コードを表示」をクリックして、コードを開きます。

 

②コードをコピーします。

 

ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」をクリックします。

f:id:pea-nut:20180506165926p:plain

④そこに、コピーしたコードを貼り付けます。

 

⑤見出しに合わせてコードの「数字」を書き換えます。

サルワカさんのコードはすべて「h1」タグで書かれていますので、この数字を使いたい見出しタグの番号に変えてください。

見出し2のタグに使いたい時は「h1」→「h2」とか

見出し3のタグに使いたい時は「h1」→「h3」など。

 

⑥色を変更したいときは、カラーコードを書き換えます。

デザインによって変えるところが多少違いますが…

背景色を変えたいときは→「background」 
文字色を変えたいときは→「color」

あたりを変えてみるといいかと思います。←けっこういい加減なので、必ずバックアップを取ってから自己責任で書き換えしてくださいね。大変なことになっても責任取れませんので(>_<)

 

⑦「変更を保存する」をクリックします。

上記ブログを見ると

はてなブログで見出しに色をつけたりデザインを変更するにはCSSのソースを挿入する必要があるとのこと。

 

CSSを表示してコピーするのも面倒なのでどこかでデザインまとめてくれてないか探したところありました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

上記サイトで選んだCSSのコードは下記です。

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

上記の記述だとh1となっているので私がよく見出しで使用する"h3"に記述を変えて使用して見ました。

こんな風になりました!!

 ページごとではなく全てのページに反映される様ですね。

過去に遡って更新されました。

すごく見やすくなりました。

ただ見出しに設定されているが文字のない空行まで見出しになっちゃいましたw

 

 

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook