うしごや ~さとり男子の考察牧場~

現実世界でのストレスを糧に、好き放題白黒ハッキリした映画レビューをしていきます(笑)感想&妄想寄りの考察(゜-゜)?他雑記!

うしごや ~さとり男子の考察牧場~

おすすめ記事

【はてなブログ】カスタマイズ!読了時間、目次開閉、上へ戻る…長い記事におすすめのコピペ集♪

【はてなブログ】カスタマイズ!読了時間、目次開閉、上へ戻る…長い記事におすすめのコピペ集♪

 

こんばんは、うしぞうです!

 

今回は一記事が長くなってしまったときに、事前に行っておきたいブログカスタマイズ集です♪

 

やはり読者目線だと、必要な情報を得るには簡潔で読みやすいほうが理想的です。

情報量が多く、内容が深い記事だからこそ読み手に親切にしておきたいですよね?

 

  1. 記事の読了時間を表示する方法
  2. 目次を普段は閉じておき、開閉式で表示する方法
  3. ページトップへのスクロールボタンを設置する方法

 

これらのカスタマイズ法について順番に、まとめて紹介していきます!

 

どれくらいで読める?読了時間の表示

 

まずは記事の冒頭に、その記事を読み終わるまでの読了時間を表示するカスタマイズです。

 

リンク先『Random Life Blog』様のコードを、はてなブログの『デザイン』→『記事』→『記事上』の中に貼るだけで、すべての記事の右上冒頭に『この記事は約〇〇分で読めます』の表示が!

 

基本的にはそれだけで非常にお手軽ですが、コード内の『color: #999999』部分のカラーコードを変えると、文字色も変更できます。

 

そして私の場合は、はてなブログ公式アイコンの時計マーク

 

<i class="blogicon-recent"></i>

 

が文字の左側に表示されるようにしました。

はてなの公式アイコンについては、カスタマイズまとめ記事よりどうぞ!

 

記事を読み始めても思ったより長かった場合、途中で読むのをやめてしまう方もいるかもしれません。

 

それを防ぐために、最初から「これぐらいの時間で読めるよ~!」と伝えてあげるのは読み手に親切ですよね♪

目次を開閉式にしてすっきり収納!

 

続いて目次のカスタマイズです。デザインではなく、既存のものを最初は非表示にしておき、クリックやタップで開いて表示する開閉式のものへと変えるカスタマイズです。

 

長い記事は必然的に見出しの数も多くなり、それに比例して目次の長さもとんでもないことになってしまうことも…そうすると単純にスクロールの邪魔です。

 

今回はあえてここに目次を設置しましたが

 

 

すっきり開閉式となっています。ぜひ開閉してみてください(笑)

 

カスタマイズコードは、『Yukihy Life』様を参考にさせていただきました!

 

  1. ※自分のブログのソースに『jQuery』が存在するか確認
  2. 『デザイン』→『フッタ』内に該当のコードをコピペ
  3. 『デザイン』→『デザインCSS』内に該当のコードをコピペ

 

※『jQuery』の読み込みが必要なカスタマイズなので、自分のブログにない場合はリンク先から合わせてコピペしてください。

 

私は文字色と大きさを少し変えて、はてな公式アイコンの

 

<i class="blogicon-entry"></i>

 

虫眼鏡マークをつけてみました♪

 

読み終わったら…ポチっとな、で上へ戻る!

 

最後にページトップへの高速スクロール、上へ戻るボタンの設置法です!頑張って書いたブログ記事を、終わりまでしっかり読んでもらえたら本当に嬉しいですよね?

 

ということでせっかく下まで足を運んでくださった読者様に、最後はスムーズに帰っていただくためのカスタマイズです♪

 

目次の開閉カスタマイズと同じく

 

  1. ※自分のブログのソースに『jQuery』が存在するか確認
  2. 『デザイン』→『フッタ』内に該当のコードをコピペ
  3. 『デザイン』→『デザインCSS』内に該当のコードをコピペ

 

このような編集でOKです。上へ戻るボタンは読者目線だけではなく、自分で記事を見直す際にもとても便利なのでおすすめです!

 

上に戻るボタンのアイコンは、リンク先のコードをそのままコピペすれば同じように上向き矢印を使用することができます。

 

他に気に入ったフリーアイコンや、自分で上に戻るボタン専用にイラストを用意すれば、そのままボタンに流用できますのでデザインも自分好みに編集てみてください♪

まとめ:【はてなブログ】カスタマイズ!読了時間、目次開閉、上へ戻る…長い記事におすすめのコピペ集♪

まとめ:【はてなブログ】カスタマイズ!読了時間、目次開閉、上へ戻る…長い記事におすすめのコピペ集♪

今回は長い記事に行いたいブログカスタマイズ集でした。

 

デザインというより、読者へ向けた利便性重視のあれこれですのでいろいろ試して素敵なブログライフをお送りください♪

 

ありがとうございました!

 

にほんブログ村 にほんブログ村へ