はてなブログのスマホ用ページの見出しをカスタマイズする
酔いどれパパです。
今回は、はてなブログのスマートフォン用ページで、いわゆる「見出し」のデザインをPC版と同じように適用させる方法を紹介します。
設定方法
1.はてなブログの管理画面から【設定】→【デザイン】→【カスタマイズ】を選択。
2.【記事】の【記事下】欄にStyleタグを入力して、PC版と同じCSSコードを入力する。。
/*スマホ用見出し*/
<style>
<style>
.entry-content h3 {
background:#eee;
border-left: 5px solid #09f;
border-bottom: 1px solid#09f;
padding: 2px 2px 2px 5px;
margin: 2px 2px 2px 5px
}
.entry-content h4 {
background:#eee;
border-left: 3px solid #09f;
padding: 2px 2px 2px 5px;
margin: 2px 2px 2px 5px
}
background:#eee;
border-left: 5px solid #09f;
border-bottom: 1px solid#09f;
padding: 2px 2px 2px 5px;
margin: 2px 2px 2px 5px
}
.entry-content h4 {
background:#eee;
border-left: 3px solid #09f;
padding: 2px 2px 2px 5px;
margin: 2px 2px 2px 5px
}
</style>
3.「スマートフォン用ページの設定」から【記事上下のカスタマイズ】の「PCと同じHTMLを表示する変更を保存する」にチェックを入れて保存する。
4.スマートフォンから表示を確認して、正常に表示されていれば大丈夫です。
まとめ
はてなブログのスマホ用ページは、なかなかデザインの面で他のユーザーさんのページと差別化が図れないので、なんとかカスタムできないものかなと考えていました。しかし、意外や意外、styleタグを囲むだけで簡単に適用できました。スマホ用ページのほうも徐々にカスタマイズしていこうと思います。