読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

関連記事のサムネイル表示を選択できて、カテゴリー別の記事一覧をタブで切替可能なプラグインを自作した

web制作 JavaScript ブログ戦略 自作した はてなブログをカスタム

はてなブログ専用のブログパーツをJavaScriptで作ったよ。廃止が公示されているGoogle Feed APIを使っていないので、はてなブログの仕様が変わらない限り突然使えなくなることはないはず。コピペするだけなので1分で設定完了だよ。

概要

はてなブログの記事にカテゴリーを設定している場合、そのカテゴリーの最新記事一覧を関連記事として表示できる。カテゴリーをふたつ以上設定しているなら、タブでカテゴリーを切り替えられる。

特徴

  • 無料。
  • 登録不要。
  • カテゴリーごとの最新記事一覧を表示でき、タブでカテゴリーを切替えられる。
  • サムネイル/投稿日/記事タイトル/リード文の有無を自分の好みに応じて表示/非表示を選択できる。
  • ブログカードを使っていないので、CSSでデザインを自由に変更できる。
  • 表示するサムネイル画像を選択できる。
  • 最初に表示される最新記事一覧は、その記事に最初か最後につけたカテゴリーのどちらかを選択できる。
  • 最新記事一覧はカテゴリーごとに50記事まで表示できる。初期設定では10記事にしている。
  • MITライセンスなので、著作権表示を残すだけで自由に改変や再配布ができる。
  • Google Feed APIを使っていないので、それが廃止されても問題なし。

コピペでかんたん設定

はてなブログの記事上か記事下にコードをコピペするだけ。

ブログ管理画面で「デザイン」をクリック。

  1. スパナのタブをクリック。
  2. 記事をクリック。

「記事上」か「記事下」に下記コードをコピペで完了。

<div id="kanrenkiji"></div>
<script>
/*
 * Kanrenkiji for Hatena Blog v2.0.0
 * Date: 2015-12-04
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */;
</script>
<script src="https://dl.dropboxusercontent.com/s/3n4g7uoiinhge4t/kanrenkiji.js"></script>

デザインをCSSコピペでカスタムする具体例

初期状態

上述のコードをコピペするだけで下図のような関連記事が表示される。

ひとつの記事につき次の項目が表示されている。

  • サムネイル画像
  • 投稿日
  • 記事タイトル
  • リード文(記事の書き出し部分の一部)

CSSコードをコピペする場所

上記初期状態からCSSでカスタムする方法を述べるが、そのCSSをコピペする場所をまず説明する。

上記コードの下にstyleタグを追加してそこにコピペする。たとえば次のとおり(背景色が黄色の部分が追加したところ)。下記コードをコピペして使うのもありだね。

<div id="kanrenkiji"></div>
<script>
/*
 * Kanrenkiji for Hatena Blog v2.0.0
 * Date: 2015-12-04
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */;
</script>
<script src="https://dl.dropboxusercontent.com/s/3n4g7uoiinhge4t/kanrenkiji.js"></script>
<style>
/*▼▼▼ここにCSSコードを追加する▼▼▼*/

/*▲▲▲ここにCSSコードを追加する▲▲▲*/
</style>

CSS編集に慣れている人でレスポンシブウェブデザインの場合、ブログ管理画面の「デザインCSS」に追加してもいい。

二列表示

CSSを追加して、一列表示から二列表示に変更した。記事タイトルの後半とリード文が表示しきれていないが省スペースになった。

追加したコードは次のとおり。

.kanrenkiji-entry{width:310px;padding:0 5px;}

小さく表示

サムネイルのサイズを好みの大きさに変更し、それに合わせて記事タイトルの高さも調整した。これにより記事タイトルの後半がさらに省略されている。

追加したコードは次のとおり(1行目は上記コードと同じ)。

.kanrenkiji-entry{width:310px;padding:0 5px;}

.kanrenkiji-entry{height:80px;}
.kanrenkiji-entry .entry-thumb{width:80px;height:80px;}

投稿日を非表示

投稿日を非表示にした。先程よりも記事タイトルが表示されている。

追加したコードは次のとおり(1行目から3行目までは上記コードと同じ)。

.kanrenkiji-entry{width:310px;padding:0 5px;}

.kanrenkiji-entry{height:80px;}
.kanrenkiji-entry .entry-thumb{width:80px;height:80px;}

.kanrenkiji-entry time,.kanrenkiji-entry .entry-description{display:none;}

点線で記事の区切りを分かりやすく

十分なスペースがあるので点線を入れなくても分かるが、カスタムの具体例ということで紹介しておく。

追加したコードは次のとおり(1行目から4行目までは上記コードと同じ)。

.kanrenkiji-entry{width:310px;padding:0 5px;}

.kanrenkiji-entry{height:80px;}
.kanrenkiji-entry .entry-thumb{width:80px;height:80px;}

.kanrenkiji-entry time,.kanrenkiji-entry .entry-description{display:none;}

.kanrenkiji-entry{padding-bottom:15px;border-bottom:1px dashed #ccc;margin:10px 0 0;}
.kanrenkiji-entry .entry-title-link{height:80px;overflow:hidden;padding-left:10px;}
.kanrenkiji-entry .entry-thumb{margin-right:0;}

サムネイル非表示

サムネイル画像を非表示にすれば、記事タイトルの後半が省略されにくくなる。

追加したコードは次のとおり(最後の行以外は上記コードと同じ)。

.kanrenkiji-entry{width:310px;padding:0 5px;}

.kanrenkiji-entry{height:80px;}
.kanrenkiji-entry .entry-thumb{width:80px;height:80px;}

.kanrenkiji-entry time,.kanrenkiji-entry .entry-description{display:none;}

.kanrenkiji-entry{padding-bottom:15px;border-bottom:1px dashed #ccc;margin:10px 0 0;}
.kanrenkiji-entry .entry-title-link{height:80px;overflow:hidden;padding-left:10px;}
.kanrenkiji-entry .entry-thumb{margin-right:0;}

.kanrenkiji-entry .entry-thumb-link{display:none;}

タブの説明を表示

CSSで表示する必要はないが、これもカスタムの具体例ということで紹介する。

#kanrenkiji:before{
  content:"下のタブでカテゴリー別の最新記事一覧を切り替え可能";
  color:#aaa;
  font-size:12px;
  display:block;
  line-height:2;
}

表示するサムネイル画像を選ぶ

関連記事一覧で表示されるサムネイル画像は、はてなブログ標準の機能で選べる。

サムネイル画像を選択したいブログ記事の編集画面を開く。

  1. 歯車のアイコンをクリック。
  2. サムネイル画像にしたい画像をアイキャッチ画像に設定。

最後のカテゴリーを初期表示する

カテゴリーが複数ある場合、大カテゴリーから順々により小さなカテゴリーを設定していくことがある。その場合、最後のカテゴリーはその記事にもっとも関連性の高い記事一覧になりやすい。それを初期表示しておけば回遊率が上がりそうだね。

著作権表示の下に一行コピペするだけ。追加したコードは次のとおり。

<div id="kanrenkiji"></div>
<script>
/*
 * Kanrenkiji for Hatena Blog v2.0.0
 * Date: 2015-12-04
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */;
var lastTab=1;
</script>
<script src="https://dl.dropboxusercontent.com/s/3n4g7uoiinhge4t/kanrenkiji.js"></script>

表示される記事の最大数をカスタムする

初期設定では、関連記事として表示される記事数はカテゴリーごとに10記事にしている。ブログ運営者の好みに応じて最大で50記事まで表示できるようにカスタムできる。

著作権表示の下に一行コピペするだけ。イコールの右側の数値が記事数を表す。追加したコードは次のとおり。

<div id="kanrenkiji"></div>
<script>
/*
 * Kanrenkiji for Hatena Blog v2.0.0
 * Date: 2015-12-04
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */;
var entryMax=5;
</script>
<script src="https://dl.dropboxusercontent.com/s/3n4g7uoiinhge4t/kanrenkiji.js"></script>

開発経緯と在りし日のv1.0.0

以前に、Google Feed APIを用いて関連記事一覧を表示するプラグインを自分用に作っていた。下図が在りし日のv1.0.0だ。

2015年12月1日ごろにGoogle Feed APIが一時的に機能しなくなったのを受けて、それに依存しないプラグインを作成することにした。機能的には似たようなものだが、コードはまったく異なるのでバージョンは2.0.0にした。

補足

作動を確認したブラウザ

Windows 8にて。

  • Google Chrome 47 (64-bit)
  • Firefox 43.0
  • IE 10

Windows 10にて。

  • Google Chrome 47
  • IE 11
  • Edge 12

Android 4.4.2(スマホ)にて。

  • Google Chrome 45

iOS 6.1.3(iPod touch 5)にて。

  • Safari 6.0 Mobile

利用可能なドメイン

はてなのドメインを利用しているならどれでもOK。

独自ドメインも次のような形式ならOKなはず。トップページがサブディレクトリ形式でなければOK。

  • http://example.com/
  • http://blog.example.com/
  • http://sub.example.jp/

ブログのトップページのURLがサブディレクトリ形式の場合はNGなはず(未確認)。たとえば次のようなURL。

  • http://example.com/blog/

サブディレクトリ形式でも対応可能にすぐにできるけど、筆者はそういうURLのはてなブログを知らないのでこのままでもいいかなと思っている。該当者がいたら連絡してね。時間があるときに対応するよ。

まとめ

タブ切り替えでカテゴリーごとの最新記事を関連記事として表示すれば、省スペースながらも読者のニーズに合いそうなページに誘導できる。せっかくブログを運営しているのなら、できるだけいろいろなページを見てほしいよね。

てすとてすと