きゅうりの王様

塞翁が馬な日々

Life is a box of chocolates ブログ

はてなブログ 大見出し CSSカスタマイズ スマホにも対応

広告

参考記事

www.yukihy.com

shiromatakumi.hatenablog.com

www.pojihiguma.com

上記3つのサイト記事を参考にさせてもらいました。

上2つは大見出しのカスタマイズ。

ポジ熊さんの記事は見たまま記法で「大見出し」を使用すると、「h3」が使われるということで、すべて「h2」に変更しちゃいました。

なので上記2つのサイトを参考にして見出しの良さそうなのを選び、h2に書き直しました。

コードを貼る場所

デスクトップPC

はてなブログの管理画面のデザイン→デザインCSSに書き込む。

f:id:cucumberking231:20170404201924j:plain

スマートフォン

PCと同じ管理画面のデスクトップのカスタム画面横のスマホマークからヘッダの部分に書き込む。

f:id:cucumberking231:20170404201944j:plain

使用した大見出し

f:id:cucumberking231:20170404202646j:plain

上記の見出しを使わせてもらいました。
最初の説明どおり、「h3」の部分を「h2」に変更しました。

あと、見出しの文字の大きさも変更しました。

/*1行目をh2に変更しました*/
.entry-content h2 {
  padding: 4px 10px;
  color: #111;
 font-size: 26px; /*見出しのフォントサイズを大きくした*/
  background-color: #f0f0f0;
  border-left: 8px solid #1056a2;
  border-bottom: 1px solid #1056a2;
}

スマホのカスタマイズは<style type=“text/css">と<style>で囲みます。

<style type="text/css">
.entry-content h2 {
  padding: 4px 10px; /*h2をh3に変更*/
  color: #111;
 font-size: 26px; /*フォントサイズ大きくする*/
  background-color: #f0f0f0;
  border-left: 8px solid #1056a2;
  border-bottom: 1px solid #1056a2;
}

</style>

まとめ

以上、ゆきひーさん、シロマティーさん、ポジ熊さんを参考に、"自分なり"にカスタマイズしました。

自分なりにしたのでもしかしたらもろ間違っているかもわかりません。
その時は教えてくれるとありがたいです。