日記

初心者でも出来たはてなブログのCSSカスタマイズ

htmlもCSSもまったくわからなかった自分でもはてなブログの先輩方の

ブログを見てなんとかやりたいカスタマイズを行う事ができました。

 

僕が役に立ったはてなブログのCSSカスタマイズの記事を今日は紹介していきます。

 

見出しをカスタマイズ 

 

shiromatakumi.hatenablog.com

 

 

見出しのカスタマイズはやっておくとブログを書く上で非常に便利です。

上の記事の中にもありますが、ダッシュボード→デザイン→デザインCSS

に上の記事で紹介されているコードを記述する事で見出しに反映されます。

 

はてなブログの見出しは大見出=h3中見出=h4小見出=h3となっています。

 

例えばこのブログの場合はh4タグは下のように表示されるように

設定されています。

 

CSSのカスタマイズ

 自分は記事を見てデザインCSSにコードを入れても反映されなくて困っていました。

しかしこれは勘違いでちゃんと設定されていても見たままモードでは確認できません。

CSSデザインにしっかりコードが記述されていれば

<h4>見出しをカスタマイズ </h4>←html編集でこのように記述すれば上のオレンジのラインの見出しのように反映されます。

これを確認するにはプレビューで見れば大丈夫です。

 

間違ってもCSSデザインにコードを記述してh3タグやh4タグ使用しても

見出しが変わらないとパニックにならないでください。  (笑)

(こんな勘違いをするのは自分だけだと思いますが・・・)

 

スマホ版にも同じように反映したい場合はそれを設定しなくてはなりません。

 

tsukuruiroiro.hatenablog.com

 

この記事ではスマホデザインCSSをカスタマイズできる方法を紹介してくれているので

この方法で同じように見出しをカスタマイズするコードを入れればPC版でもスマホ版でも同じように見出しを変更できます。

 

自分の説明ではわかりにくいと思いますので詳しくはお二人の記事をご覧ください。

 

スマホ版のデザインを大きくカスタマイズ

 

はてなブログはスマホ版が初期状態だとあまり個性が出せないので

はてなブログだとすぐわかるようなデザインになってしまいます。

別にはてなブログだとわかっても問題ないですが、違いを出す為には

スマホ版のカスタマイズもしたいところです。

こちらの記事を参考にさせて頂いて僕はデザインを変更しました。

とてもわかりやすく完全に初心者だった僕にも一応できたので

とても良い記事です。

スマホデザインを変更したい人にはおすすめの記事です。

 

www.ituore.com