はてなブログは知識ゼロでも手軽に整ったブログサイトを作れる優秀なプラットフォーム。
それでいて、コードを追加することでカスタマイズできるという自由度の高さ。
自分好みに機能を追加したりデザインを変えたり、超楽しい!!
このサイトをカスタマイズするのに参考にさせていただいたサイトをまとめました。
カスタマイズたち
エセトップページ
最新記事が並んでいるだけの無料版はてなブログのトップページを、それっぽくする方法。
私は上の記事の方法で固定しいらない要素を消した記事に、カテゴリごとに過去記事を貼って整えています。
このサイトのトップページ→ 雲呑春雨鶏ガラスープ
載せる記事を変えたいときは手動なのがちょっと面倒。
グローバルメニュー
このサイトの上部にも表示されているカテゴリのバーです。(スマホでは非表示)
回遊率が上がるといいな〜。
色だけいじりました。
目次デザインカスタマイズ
↓こんな感じにしました。
デフォルトのよりずっといいですよね。
色とかをいじりました。
目次開閉
目次があるのはいいけれど縦長になって邪魔なことも多いので、開閉機能をつけました。
「[開ける]」を「目次を表示▼」にすることでそれっぽくしました。
上に戻るボタン
このサイトの右下にあるやつです。
上に戻るの楽しい。
色だけ変えました。
記事埋め込みカスタマイズ
これで中途半端な幅といらない左下のリンクとおさらば!
かんたんリンクのカスタマイズ
もしもアフィリエイトのかんたんリンクの見た目を整えました。
↓こういうやつ
ブログカード変更
埋め込みリンクを別で作成。
少し手間がかかるけれど、一気に洗練された感じ!
もはや無料とは思えない。
検索欄
PCは右上、スマホは下部にあるサイドバーの記事検索欄。
- はてなブログの検索ボックスを目立たせる、3ステップの簡単手順を紹介!
- はてなブログの検索窓をカスタマイズ┃表示位置とデザインを変更する方法(コピペで実装!) - yunico's fluffy life
表をスクロール可能に
スマホなどで表の横が切れるとき、スクロールできるようにする方法。
まとめ
コピペまで許してくださるカスタマイズの先輩方には頭が上がりません!
どんなふうにコードをアレンジしたかも記事にできたらなと思っています。
これからも楽しいカスタマイズライフを!