主に自分の備忘のためですが、当ブログで行っているカスタマイズをリスト化したいと思います。
まだ未完成ですが、順次内容を追加していく予定です。
はてなブログの無料版を使用しているので、無料版向けのカスタマイズであることにご注意下さい。
- 当ブログで使用しているテーマ
- Naked専用カスタマイズ
- SNSシェアボタンを設置する
- トップページの記事表示をカスタマイズ
- 記事タイトルのデザインを変える
- 現在見ている場所を追従する目次を設定する
- 目次のデザインを変える
- 「上に戻る」ボタンを設置する
- ソースコードを言語名と行番号を付けて表示する
- カテゴリの表示をカスタマイズする
- 「引用」の見た目をカスタマイズ
- 記事の更新日時を表示する
- 現在適用していないが、試したカスタマイズ
- その他、テンプレートなど
当ブログで使用しているテーマ
当ブログで使用させて頂いているテーマは、ゆきひーさん作成の「Naked」です。シンプルながらもポイントで色が使われており、飽きのこないお気に入りのテーマです。
また、レスポンシブルデザインと言って、PC版とスマホ版のデザインが連動するタイプのデザインを採用している点も嬉しいポイントです。
Naked専用カスタマイズ
「Naked」は専用ページがあり、公式カスタマイズが掲載されているため、他のモノよりトラブル無くカスタマイズを適用することができます。
トップページにメニューバーを追加する
トップページ上部の黒い部分（メニュー）を追加するカスタマイズです。当ブログでは、扱っている親カテゴリと子カテゴリを表示させています。
サイドバーの設定からもカテゴリ表示はできるのですが、FC2ブログのようにカテゴリの折りたたみができなかったので、こちらの方法を取りました。
スマホ版ではトグルメニューで表示されるはずなのに「何故か動かない！」という方は、下記の記事を参考に修正してみて下さい。
目次を箇条書きリストにする
「Naked」のテーマでは、目次がデフォルトのままだと番号リストになっていますが、箇条書きの形に変更することができます。
SNSシェアボタンを設置する
記事下にSNSボタンを設置する
追従型のSNSボタンだと、スマホ版で見たときにうまく表示されません。
そんな時は、記事の下に3DチックなSNSボタンを表示させる事ができます。
当ブログでは採用してませんが、試してはみたので参考まで。
追従型のSNSボタンを設置する
PC版のみですが、ブログの左側にスクロールしても追従するSNSボタンを設置しています。
kurokinomizuiwa.hatenablog.com
シェア数を表示する
ボタンを表示する際、シェア数を一緒に表示するカスタマイズです。
トップページの記事表示をカスタマイズ
記事を一覧形式で表示する
通常のままだと、トップページに記事の内容がズラ〜ッと全て表示されてしまうため、記事を一覧形式で表示することでトップページをスッキリ見せる事ができます。
スマホ版では、一覧で表示する記事の数を設定することで、読み込み速度をアップさせる事も可能です。
kurokinomizuiwa.hatenablog.com
一覧形式で表示する場合のデザインを変える
上記の方法で一覧形式にしたときの見た目のデザインを設定します。
記事タイトルのデザインを変える
記事のタイトルの見た目を変えます。
タイトル文の上下に二重線を引き、下の線は点線に変えてます。
現在見ている場所を追従する目次を設定する
PC版のみですが、サイドバーに現在見ている記事の位置が、目次のどこの項目の場所なのかハイライトされる目次を設定します。
目次は追従するので、スクロールしても右側に表示されたままになります。
各項目をクリックすると、その場所に飛ぶこともできます。
kurokinomizuiwa.hatenablog.com
目次のデザインを変える
目次の見た目のデザインを変えています。
PC版のみですが、項目にカーソルを合わせたとき、項目が横にずれるアニメーションを入れてます。
「上に戻る」ボタンを設置する
ある程度スクロールすると、一番上にスルッと戻るためのボタンを表示させます。
kurokinomizuiwa.hatenablog.com
ソースコードを言語名と行番号を付けて表示する
ブログにソースコードを貼り付ける際、その言語名と行番号を一緒に表示させます。
kurokinomizuiwa.hatenablog.com
カテゴリの表示をカスタマイズする
記事タイトルの下に表示されるカテゴリの見た目をカスタマイズします。
当ブログでは、背景に色を付ける事でタグのような形で表示しています。
「引用」の見た目をカスタマイズ
引用を使用したときの見た目をカスタマイズします。
２つのデザインを組み合わせで使っています。
記事の更新日時を表示する
各記事の上部に表示される投稿日時の横に、記事を更新した日時を表示させます。
このブログでは、左上に のアイコンが表示されていますが、その右隣の日付が記事を最後に更新した日時になっています。
kurokinomizuiwa.hatenablog.com
現在適用していないが、試したカスタマイズ
現在のブログには適用していませんが、適用できるか試したカスタマイズがいくつかあるので、そちらも併せて紹介します。
サイドバーを左に表示する
「Naked」テーマでは右にサイドバーがありますが、左に表示させることも可能です。
kurokinomizuiwa.hatenablog.com
その他、テンプレートなど
コピペで使えるデザイン集を書きます。
