MENU

【Blog】ブログのカスタマイズ履歴

blog-customize-log

はてなブログテーマを「DUDA」から「Naked」に変更することにしました。

拡張性の高い素晴らしいテーマですが、それだけでは物足りず、以前のカスタマイズの移植が必要でした。

そのカスタマイズ履歴です。

テーマを変えた理由

レスポンシブに適用

レスポンシブすれば、CSSやスクリプトの設定が一度で済むからです。

スマホからのアクセスは2割なのですが、専用にカスタマイズする手間を省きたかったです。

もちろんDUDEでも調整したのですが、iPhoneで思うように変化しなかったので、テーマを変更しました。

1からカスタマイズしたい!

はてなブログをはじめて約3年。DUDEのデザインを気に入って、ずっとつかっていましたが、さまざまなコードのコピペで中はぐちゃぐちゃでした。

CSSの勉強も兼ねて一から作り直しました。

www.cg-method.com

バックアップを取りやすい構成に

今回の変更でJSとCSSはGitHubから外部参照しています。

これによりバックアップが常に取れ、いつでも戻せるので安心です。

※HTMLの外部参照も試したのでしが、読み込み順の制御が難しく断念しました。

  • JQuery → Font → HTML →JS

という順番で読み込むようにしています。

www.cg-method.com

ブログのカスタマイズ履歴

ベーステーマ

www.yukihy.com

theme-naked.hatenablog.jp

背景画像

theme-naked.hatenablog.jp

パンくずリスト階層化表示

blog.wackwack.net

サイドバーにカテゴリー階層化表示

blog.wackwack.net

フッターにコピーライト記載

theme-naked.hatenablog.jp

レスポンシブルなナビゲーション表示

www.yukihy.com

目次のON/OFF表示

www.yukihy.com

上に戻るボタン

www.task-notes.com

フッターの作り込み

theme-naked.hatenablog.jp

Twitterの埋め込み

masabochi.net

所要時間の目安表記

uxlayman.hatenablog.com

シェアボタン表示

www.ituore.com

フォローボタン

www.ituore.com

記事中に広告

www.kanamalu.com

関連記事を記事下よりも下に

www.notitle-weblog.com

見た目の調整(CSS)

https://min0124.github.io/naked/hatena-blog.css

  • アイキャッチ画像の角の丸み

  • 強調文字

  • 見出し(h2)

  • 見出し(h3)

  • ユーザーID非表示

  • 投稿日時非表示

  • ブログカード下のURL削除

  • サイドバーのアイキャッチの角の丸み

  • タイトル下のカテゴリラベル色変更

  • カテゴリーについているアイコンを非表示

  • ヨメレバ・カエレバのデザイン