職業:自宅警備員

読者です 読者をやめる 読者になる 読者になる

【職業:自宅警備員】

思うままつらつらと。

カスタマイズしてみた。(レベル低くてゴメン)

はてなブログカスタマイズ

 

f:id:home-security:20160202032250j:plain
 

 

どうもです。

このブログをカスタマイズしてみました。

元々こういった類は得意ではなく、これだけのカスタマイズをするだけでも、

かなり時間がかかってしまいました。

参考にさせてもらったブログの紹介と一緒に

どこを変更したのかメモ代わりに書いていきたいと思います。

 

トップページを記事一覧の仕様に変更

以前ブログを運営していた時から、

トップページが見づらいなーと思っていました。

【続きを読む】を使っていたのですが、

僕は無料版のままなので広告が入ってゴチャゴチャしちゃうんです。

記事一覧だったり、カテゴリ一覧で表示するととてもスッキリして見えるので、

トップページをこの仕様にしたいとずっと思っていました。

 

はてなブログのカスタマイズを調べていたら、

この方のブログにわかりやすく書いてくれていました。

dokuwohaku.hateblo.jp

 

僕は、Javascript?って感じのレベルですが、

かなりわかりやすいので、問題なく反映できました。

このブログのトップページにアクセスすると、

記事一覧ページに飛ぶようにできました。

http://home-security.hatenadiary.jp/archive ←URLの最後に「archive」が付いています。

これがあると記事一覧ページに切り替わるみたいですね。

 

デメリットも書いてあるのでしっかり読んでからの方がいいかもしれません。

僕はあまり気にしないですぐに変更しました。笑

 

記事上部にボタン追加

記事タイトルの上に「はてなブックマーク」ボタンと

「Pocket」ボタンを追加しました。

この方法も上記と同じ方の記事を参考にさせてもらいました。

dokuwohaku.hateblo.jp

 

この方、本当にわかりやすくて助かります。

僕も思っていたんです。

はてなブログはソーシャルボタンの設置は通常の機能に備わっていますが、

大きくてスペースをとるから邪魔だなと思っていました。

そこで、これです。

f:id:home-security:20160202040651j:plain

 

赤線部分の「はてブ」と「Pocket」

これだとコンパクトなのでスペースもとられないしスッキリして見えます。

ブログの記事上のSNSボタンは、あとで記事を読みたい方のために設置する。「あとで読む」ために、はてブボタンを押す方というのは、きっと忙しいからそうする訳で、その忙しい方に、記事下までわざわざ画面をスクロールしてボタンを探してもらうというのは、かなり不親切なブログなのでは。 

引用:http://dokuwohaku.hateblo.jp/entry/SNS-button

 

という理由もあり記事上部にこのボタンを追加しました。

 

見出しのデザイン変更

これはあった方が絶対見やすいと思い追加しました。

はてなブログの見出しカスタマイズで調べると、

わかりやすい記事があったので参考にさせてもらいました。

これも簡単でCSSにコピペするだけで完了する方法です。 

www.yukihy.com

 

10タイプのコードを書いてくれているので、

好きなものを選んでコピペするだけで立派な見出しができます。

更に文字の色・サイズなど、もう少しこだわった

見出しのカスタマイズ方法も書かれているので勉強になります。

僕はまだそこまで辿り着いてませんが。。笑

 

記事ページに目次を表示

タイトル下、記事上部に目次を設置する方法です。

コードをコピーしてデザインCSSに貼り付けてから、

Javascriptの設定をするためのコードをコピペして完了です。

はてなブログの記事ページに目次を表示するためのカスタマイズ - No Hack No Life

この設定をすると、

記事に見出しをつけるだけで自動で目次が作成され、

目次部分から好きな見出しに瞬時に移動できるようになります。

 

最後に

ブログをカスタマイズする理由は色々あると思いますが、

僕が一番大事だと思うのは読者が読みやすいかどうかだと思います。

あまりゴチャゴチャと派手にならないように、

見やすいブログを目指します。

その前に内容が大事ですよね…そこが問題。。。

Twitterの挿入とアクセス解析はまた別記事で書きます。

 

以上。最後までありがとうございました。

広告を非表示にする