はてなブログで年表や沿革などタイムラインを表示する方法

最近ブログなどでよく見かける「タイムライン表示」。

会社の年表や自分の生い立ち、プログラムのインストール方法の解説などに使われています。

今回はこのタイムライン表示をはてなブログに導入する方法です。

タイムライン表示入れると以下のような表示が可能になります。

なお、タイムラインのCSSは下記の記事を参考にさせていただきました。

WordPressテーマでタイムライン表現を使うためのショートコード実装方法

先日、自作テーマのフォーラムに「タイムライン機能があったらいいな」というリクエストをいただきました。 で、ショ…

nelog.jp

はてなブログにタイムラインを導入する

はてなブログにタイムラインを導入するには引用元のようにPHPでは実装できないので、ちょっとしたJavascriptを書くことにします。

必ず作業前に設定しているCSSとJavascriptのバックアップ取ってください。

jQueryを読み込む

動作させるにはJavascriptをjQueryを使ってコーディングしているのでjQueryを組み込みます。
（すでに組み込んでいる方はこの作業は不要です。）

jQuery CDN

Worldwide distribution of jQuery releases.

code.jquery.com

上記サイトからCDNのURLをコピーします。
今回は

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>

と最新バージョンを読み込んでおきます。
（古いバージョンでも全然大丈夫です。ご自分の環境にあったものをどうぞ。）

はてなブログでは管理画面の「設定→デザイン→カスタマイズ→ヘッダ」の部分にコピーしておきます。

タイムラインのCSSを設定する

CSSはてなブログの管理画面から「デザイン→カスタマイズ→デザインCSS」を選択して以下のCSSを設定します。

.timeline-box {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px 5px;
  box-sizing: border-box;
}
.timeline-box *{
  box-sizing: border-box;
}
.timeline-box .timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.timeline-title {
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
}
.timeline > li {
  margin-bottom: 60px;
}
.timeline > li.timeline-item {
  overflow: hidden;
  margin: 0;
  position: relative;
}
.timeline-item-label {
  width: 110px;
  float: left;
  padding-top: 18px;
  text-align: right;
  padding-right: 1em;
  font-size: 14px;
}
.timeline-item-title {
  font-weight: bold;
}
.timeline-item-content {
  width: calc(100% - 110px);
  float: left;
  padding: .8em 1.4em;
  border-left: 3px #e5e5d1 solid;
}
.timeline-item:before {
  content: '';
  width: 12px;
  height: 12px;
  background: #6fc173;
  position: absolute;
  left: 105px;
  top: 24px;
  border-radius: 100%;
}
/* for Smartphone */
@media screen and (max-width: 480px) {
  .timeline-box .timeline {
    padding-left: 10px;
  }
  .timeline > li.timeline-item {
    overflow: visible;
    border-left: 3px #e5e5d1 solid;
  }
  .timeline-item-label {
    width: auto;
    float: none;
    text-align: left;
    padding-left: 16px;
  }
  .timeline-item-content {
    width: auto;
    padding: 8px;
    float: none;
    border: none;
  }
  .timeline-item::before {
    left: -12px;
    top: 19px;
    width: 21px;
    height: 21px;
  }
}

これは引用元のサイトのものですが、表示がずれる際は調整してください。

タイム表示用Javascriptを設定する

次にはてなブログの管理画面から「デザイン→カスタマイズ→ヘッダ→記事下」を選択して以下のJavascriptを設定します。

<script>
$(document).ready(function(){
  var  timeline = $( ".hatena-timeline" ) ;
  var  timeline_cnt = timeline.length ; 
  var  str = ""  ;
  var title = ""
  if( timeline_cnt == 0 ){
    return ;
  }
  for( var i = 0 ; i < timeline_cnt ; i++ ){
    title = timeline.eq( i ).attr( "title" ) ;
    str = "" ;
    str += '<div class="timeline-box"><div class="timeline-title">' + title + '</div><ul class="timeline">' ;
    var    timelinechile = timeline.eq( i ).children( '.hatena-timeline-item' );
    var    item_cnt = timelinechile.length ;
    console.log( timelinechile );
    for( var j = 0 ; j < item_cnt ; j++ ){
      var    label = timelinechile.eq( j ).attr( "label" ) ;
      var    item_title= timelinechile.eq( j ).attr( "item-title" ) ;
      var    item_snippet= timelinechile.eq( j ).attr( "item-snippet" ) ;
      str += '<li class="timeline-item"><div class="timeline-item-label">' + label+ '</div>' ;
      str += '<div class="timeline-item-content"><div class="timeline-item-title">' +item_title + '</div>' ;
      str += '<div class="timeline-item-snippet">' +item_snippet + '</div></div></li>' ;
    }
    str += '</ul></div>' ;
    timeline.eq( i ).replaceWith( str ) ;
  }
});
</script>

これで準備は完了です。
ここまでの作業は一度やればOKです。

はてなブログ記事にタイムラインを表示させる

最後に、記事でタイムラインを表示させたい場所に以下のコードをまねて入れてください。

<div class="hatena-timeline" title="ここに全体のタイトルを入れる">
    <div class="hatena-timeline-item" label="2018年12月" item-title="会社辞めることにした" item-snippet="やる気ないしやめることにした。"></div>
    <div class="hatena-timeline-item" label="2019年01月" item-title="人間辞めることにした" item-snippet="仕事もお金ないししやめることにした。"></div>
</div>
<div class="hatena-timeline" title="ここに全体のタイトルを入れる2">
    <div class="hatena-timeline-item" label="2020年12月" item-title="会社辞めることにした2" item-snippet="やる気ないしやめることにした。2"></div>
    <div class="hatena-timeline-item" label="2022年01月" item-title="人間辞めることにした2" item-snippet="仕事もお金ないししやめることにした。2"></div>
</div>

エラー処理は全くやってないのでちゃんとルール守ったHTML書いてください。
HTMLを書いた部分にタイムライン表示されているはずです。

このコードは「はてな記法モード」でしかテストしてません。

まとめ

引用元WordPress用なのでPHPで実装しショートコードで設定できるようになっていますが、はてなブログにはショートコードという機能がないので、Javascriptで書き換えるという方法にしてみました。

これではてなブログでもおしゃれなタイムライン表示を追加できました。

以上、はてなブログで年表や沿革などタイムラインを表示する方法でした。