はてなブログ 大見出し CSSカスタマイズ スマホにも対応
参考記事
上記3つのサイト記事を参考にさせてもらいました。
上2つは大見出しのカスタマイズ。
ポジ熊さんの記事は見たまま記法で「大見出し」を使用すると、「h3」が使われるということで、すべて「h2」に変更しちゃいました。
なので上記2つのサイトを参考にして見出しの良さそうなのを選び、h2に書き直しました。
コードを貼る場所
デスクトップPC
はてなブログの管理画面のデザイン→デザインCSSに書き込む。
スマートフォン
PCと同じ管理画面のデスクトップのカスタム画面横のスマホマークからヘッダの部分に書き込む。
使用した大見出し
上記の見出しを使わせてもらいました。
最初の説明どおり、「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>
まとめ
以上、ゆきひーさん、シロマティーさん、ポジ熊さんを参考に、"自分なり"にカスタマイズしました。
自分なりにしたのでもしかしたらもろ間違っているかもわかりません。
その時は教えてくれるとありがたいです。