虹の子育てblog

2児の女の子のパパです。子育ての事、お出かけのことなど書いています。

はてなブログ、スマホ版の見出しをカスタマイズしました。


f:id:gharuto:20190620051320j:image

前回は、はてなブログスマホ版の文字を大きくしたことについて書きましたが、
今回は見出しのカスタマイズです。

 

見出しをカスタマイズするだいぶ印象変わりますよね。

 

やり方を解説していきたいと思います。

 

スマホ版の見出しのカスタマイズも、はてなブログPro(有料)に登録してないとできません。PC版ならできます。

 

 

見出しのデザインを決める。

まず、見出しのデザインを決めます。


私が参考にしたサイトはこちら↓

saruwakakun.com

この中でどれにしようかな~と選びました。

 

まず大見出し。
子育てブログなので、かわいいデザインがいいな~と思い、縫い目のあるステッチ風にしました。そして角がペロッとめくれてるやつ。

中見出しはシンプルなやつに、

小見出しは、私はめったに使うことはないだろうと思い、今回は設定しませんでした。

 

選んだ見出しデザインの下の「コードを表示」を押すとコードが出てくるので、これを後ではてなブログに入力します。

 

はてなブログスマホ版の見出しをカスタマイズするやり方。

それでは選んだ見出しデザインを、はてなブログに設定していきましょう。

 

コードをコピペ

はてなブログ管理画面の
「デザイン」


f:id:gharuto:20190619104029j:image

 

スマホのアイコン→「記事」
※文字サイズの変更は「ヘッダ」でしたが、見出しカスタマイズは「記事」の所です。


f:id:gharuto:20190619104148j:image

 

スマートフォン用にHTMLを設定する」に⚫→「記事上」の下の四角い枠に、先程選んだ見出しコードをコピペします。

f:id:gharuto:20190619104224j:image

 

コードを編集

このままでは反映されません。
少し編集が必要です。

 

まず、コピペしたコードを

 

〈style〉
選んだ見出しコード
〈/style〉

 

このようなタグで挟んで下さい。

※下のタグの「/」忘れないで下さい。

 

さらに、このコードは全てh1になっているので書きかえる必要があります。

 

はてなブログでは、
大見出しがh3
中見出しがh4
小見出しがh5

 

となっているので、コードのh1の所を、
大見出しに使いたいならh3、
中見出しに使いたいならh4
に書き直します。


f:id:gharuto:20190619110829j:image

コード同士は3行くらい開けた方が、どこからどこまでか見やすくていいです。


f:id:gharuto:20190619110842j:image

最後に「変更を保存する」を押して終了です。


f:id:gharuto:20190619110850j:image

 

実際にスマホでみてみると、
おお、反映されてる!
まるで魔法です。

 

割りとすぐに反映されました。

 

実際カスタマイズしてみた感想。

実際には一回ではうまくいかず、何度かやり直しました。

サイトによって、コピペする場所や〈style〉タグについて、書いてる事が違っていたりして試行錯誤でした。

 

なので、この記事は自分へのメモという意味もあります(^_^;)

一回わかってしまえば、簡単にできると思います。