酔いどれ先生のICT備忘録

最近のアクティブラーニング教育事情、最新ガジェットについて綴っています。

はてなブログのスマホ用ページの見出しをカスタマイズする

酔いどれパパです。
今回は、はてなブログスマートフォン用ページで、いわゆる「見出し」のデザインをPC版と同じように適用させる方法を紹介します。

設定方法

1.はてなブログの管理画面から【設定】→【デザイン】【カスタマイズ】を選択。

2.【記事】の【記事下】欄にStyleタグを入力して、PC版と同じCSSコードを入力する。。

/*スマホ用見出し*/
<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
}
</style>

 

3.「スマートフォン用ページの設定」から【記事上下のカスタマイズ】の「PCと同じHTMLを表示する変更を保存する」にチェックを入れて保存する。

4.スマートフォンから表示を確認して、正常に表示されていれば大丈夫です。

 

まとめ

はてなブログスマホ用ページは、なかなかデザインの面で他のユーザーさんのページと差別化が図れないので、なんとかカスタムできないものかなと考えていました。しかし、意外や意外、styleタグを囲むだけで簡単に適用できました。スマホ用ページのほうも徐々にカスタマイズしていこうと思います。