3歩進んで2歩更に進む。

筋トレで克己心を高め投資に活かしたい。平成生まれのアスリート系エンジニアのブログ


簡単!はてなブログのカスタマイズ(初級編)

AD

まずなにをするかを決める

漠然となんだか凝ったことをして玄人感をだしたいというのがあるのだけれど、まずはやりたいことを挙げてみる。

  • 目次を自動生成したい
  • グローバルナビゲーションをつけたい
  • 見出しとか文字とかを いい感じにしてオシャレにしたい

Google Adsenseとか,Analyticsは設置してしまったけど、以下の記事は参考になりそう。

http://hacogaki.hatenablog.com/entry/2015/07/16/120506

それではカスタマイズしていきたいと思います。

目次の自動生成

WordPressだったらプラグインでさくっとできる、あれです。 見出しごとに、目次を自動生成する方法がはてなブログでもできないかなぁと調べてみた。

staff.hatenablog.com

……えっ。タグがあるなんて! ということでやってみた。方法は簡単、マークダウン形式で[:contents]と入れればできちゃいます。

f:id:ktkooon:20160707140543p:plain

おっ。できたけどなんかイメージと違う。 もっとこう囲み枠とかつけてオシャレにしたい。ということでググった所

demacassette2.hateblo.jp

さっそくやってみた。 デザイン > カスタマイズより上記ブログを参考にCSSを入れてみます。 f:id:ktkooon:20160707141251p:plain

すると… f:id:ktkooon:20160707141311p:plain

おおっ。オシャレな目次が完成! もっとカスタマイズしたら自動で記事文頭に目次生成とかもできそうだけど今回はこの辺で。

グローバルナビゲーションの設置

早速下記サイトを参考にメニューを作っていきます。 maroom.hateblo.jp

色は後で変えるとして、いい感じにできました(^o^)/

f:id:ktkooon:20160707232332p:plain

見出しと文字を変える

オリジナル感を出すために、見出しと文字を変えていきたいとおもいます!参考にしたサイトは以下。

www.yukihy.com

LIGっぽい感じを参考に、h2タグを変えてみます。 こちらも、CSS欄にサクッと入れて… f:id:ktkooon:20160707233037p:plain

完成!! f:id:ktkooon:20160707233049p:plain

まとめ

今回は、はてなブログにちょっとしたカスタマイズを施してみました。 ネットで調べるとまだまだ色々できそう&方法も調べれば出てくるので、探求してシャレオツなブログにしていきたいと思いますっ。

AD