ブログのカストマイズ

この記事は、このブログで行っているカストマイズを紹介しています。

本記事は最新ではなくなりました。次の 版はこちらのブログをご覧ください。

そもそも、何でカストマイズが必要なの?

はてなブログは、標準でも十分に使えています。でも、諸先輩方がやっているのを見て、『これカッコいい!!』とマネしたくなったからです。

あと、このブログは通勤電車の中下書きを書くことが多く、使っているiPhone5cでも見やすくしたかったからです。

使っているデザインテンプレートは『 Innocent』です

パソコン用とiPhone用に2カ所でカストマイズを行うのが面倒なこともあり、レシポンシブ対応のテンプレートを探していました。また、利用しているはてなブログは無料版なので、スマホ版のカストマイズがあまりできないです。

いろいろと探していたところ、『Innocent』に出会いました。シンプルでありながら、なかなかセンスも良くて気に入っています。

カストマイズ項目

Innocent』テンプレートに追加したカストマイズ一覧です。

  1. ナビゲーションバーの設置
  2. 目次のデザイン変更(表示/非表示つき)
  3. 見出し行のデザイン変更
  4. 蛍光ペンのように見える強調文字
  5. 投稿日付のデザイン変更
  6. ページTOPへ戻るボタンの設置
  7. ぱんくずリストの設置
  8. 独自ソーシャルボタンの設置
  9. コメントを書くのデザイン変更
  10. サイドバータイトルのデザイン変更
  11. スムーズスクロールの導入
  12. カテゴリのデザイン変更
  13. 記事本文フォント関連の変更
  14. ブログタイトルのデザイン変更
  15. 続きを読むのデザイン変更
  16. DataTables用CSS
  17. 本文中の文章の表示/隠す
  18. グローバルメニューの固定
  19. 微調整
  20. 所要時間の表示(New
  21. 画面下の複合メニューNew

コードはこれです

本来であれば、項目ごとに手順を記載していくところですが、諸先輩方の記事の方が詳しく(読みやすく)紹介されていますので、私の場合は設定個所とコードをそのまま紹介します。

ダッシュボート → 設定 → 詳細設定 → headに要素を追加

ダッシュボード → デザイン → カストマイズ → ヘッダ → タイトル下

青色文字の部分は、私のブログ専用部分です。もし、コピペされる場合には、ご自分のブログにあわせて変更して下さい。そうしないと、メニューから直接私のブログが選べるようになってしまいます。(#^^#)

ダッシュボード → デザイン → カストマイズ → 記事 → 記事上

ダッシュボード → デザイン → カストマイズ → 記事 → 記事下

ダッシュボード → デザイン → カストマイズ → フッタ

ダッシュボード → デザイン → カストマイズ → デザインCSS

まとめ

この手の作業が好きなので、おそらく明日以降、突然変わる可能性があります。そときは、都度、紹介していく予定ですので、よろしくお願いします。


本日の記事は、下記を参考にさせていただきました。ありがとうございます。

本当は他にも参考にさせていただいた記事がたくさんあるのですが、書ききれませんでした。適時追記していきます。ごめんなさい。

■ブログテーマ「Innocent」とナビゲーションバーの設置方法
moonnote.hateblo.jp

目次のデザイン変更(表示/非表示つき)
www.yukihy.com

ぱんくずリストの設置

bulldra.hatenablog.com

■独自ソーシャルボタンの設置
www.yukihy.com

www.ituore.com

■グルーバルメニューの固定

ok723.hatenablog.com

■所要時間の表示

uxlayman.hatenablog.com

■画面下の複合メニュー

www.yukihy.com