1more!

+1 Lifestyle Blog. Apple、ガジェット、旅 etc. 趣味を多方面に愉しむブログ。

【Ï】はてなブログのスマートフォン用ページでも見出しデザインを変える方法。

スポンサーリンク

IMG_0964

どうも!Hayabusa(@hayabusa_823z)です。今回ははてなブログスマートフォン用ページで、見出しのデザインをPC版同様に適用させる方法をご紹介。

見出しデザインの変更準備

1.以下のサイトを参考にして、気に入ったデザインのCSSをメモ帳などにコピーします。

見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

2.コピーしたCSSにある「.selector02」という項目を「h2」や「h3」などに変更します。

※見出しタグはh1-h3あたりがよく使用されますが、僕の場合、普段h2タグを標準の記事の見出しとして使っています。h1は調べたところ記事のタイトルに既に使われているいるそうなので、個人的なおすすめとしては、h2タグが標準の見出し、h3は小見出しという使い方です。

スマートフォン用ページに適用する

1.はてなブログの「設定」→「デザイン」→「カスタマイズ」へと進みます。
2.「記事」の項目の「記事下」の欄にStyleタグを入力し、タグの間に上の項目で作ったCSSを貼り付けて挟みます。

<style>ここに編集して作った見出しのCSSを貼り付けます</style>

3.「スマートフォン用ページにも表示する」にチェックを入れて、「変更を保存する」をクリックします。
4.スマートフォンから表示を確認して、正常に表示されていれば大丈夫です。

あとがき

スマートフォン向けページがちょっとシンプルすぎたので、アレンジができないものかなと考えていましたが、styleタグでCSSを囲むと適用できました。ただし、調べたところbefore,afterなどの要素が入ってしまうと表示が真っ白になることがあるそうなので、ご注意ください。

スマートフォンページのほうもこれからちょくちょくレイアウトを調整していこうと思います。