黒木ノ水岩

黒木ノ水岩

自分の経験や実体験を元に、商品紹介や様々なHowTo等を紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

【はてなブログ】当ブログで行っているカスタマイズ一覧

主に自分の備忘のためですが、当ブログで行っているカスタマイズをリスト化したいと思います。

まだ未完成ですが、順次内容を追加していく予定です。

はてなブログの無料版を使用しているので、無料版向けのカスタマイズであることにご注意下さい。

当ブログで使用しているテーマ

当ブログで使用させて頂いているテーマは、ゆきひーさん作成の「Naked」です。シンプルながらもポイントで色が使われており、飽きのこないお気に入りのテーマです。

また、レスポンシブルデザインと言って、PC版とスマホ版のデザインが連動するタイプのデザインを採用している点も嬉しいポイントです。

Naked - テーマ ストア

 

Naked専用カスタマイズ

「Naked」は専用ページがあり、公式カスタマイズが掲載されているため、他のモノよりトラブル無くカスタマイズを適用することができます。

Theme Naked Blog

 

トップページにメニューバーを追加する

トップページ上部の黒い部分(メニュー)を追加するカスタマイズです。当ブログでは、扱っている親カテゴリと子カテゴリを表示させています。

サイドバーの設定からもカテゴリ表示はできるのですが、FC2ブログのようにカテゴリの折りたたみができなかったので、こちらの方法を取りました。

theme-naked.hatenablog.jp

!Caution!

スマホ版ではトグルメニューで表示されるはずなのに「何故か動かない!」という方は、下記の記事を参考に修正してみて下さい。

kurokinomizuiwa.hatenablog.com

 

目次を箇条書きリストにする 

「Naked」のテーマでは、目次がデフォルトのままだと番号リストになっていますが、箇条書きの形に変更することができます。

theme-naked.hatenablog.jp

 

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

 

カテゴリの表示をカスタマイズする

記事タイトルの下に表示されるカテゴリの見た目をカスタマイズします。

当ブログでは、背景に色を付ける事でタグのような形で表示しています。

 

「引用」の見た目をカスタマイズ

引用を使用したときの見た目をカスタマイズします。

2つのデザインを組み合わせで使っています。

 

記事の更新日時を表示する

各記事の上部に表示される投稿日時の横に、記事を更新した日時を表示させます。

このブログでは、左上に  のアイコンが表示されていますが、その右隣の日付が記事を最後に更新した日時になっています。

kurokinomizuiwa.hatenablog.com

 

 

現在適用していないが、試したカスタマイズ 

現在のブログには適用していませんが、適用できるか試したカスタマイズがいくつかあるので、そちらも併せて紹介します。 

 

サイドバーを左に表示する

「Naked」テーマでは右にサイドバーがありますが、左に表示させることも可能です。

kurokinomizuiwa.hatenablog.com

 

その他、テンプレートなど

コピペで使えるデザイン集を書きます。