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

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

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

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

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

ここにタイトル
  • Step1
    ここにステップ1のタイトル
    ここにステップ1内容
  • Step2
    ここにステップ2のタイトル
    ここにステップ2内容
  • Step3
    ここにステップ3のタイトル
    ここにステップ3内容

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

WordPressテーマでタイムライン表現を使うためのショートコード実装方法
WordPressでタイムライン表現をするためのショートコードを実装するためのテーマカスタマイザー方法です。手順や時系列を表現するのに便利かと思います。
スポンサーリンク

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

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

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

jQueryを読み込む

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

jQuery CDN

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

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

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

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

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

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

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

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

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

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

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

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

ここにタイトル
  • Step1
    ここにステップ1のタイトル
    ここにステップ1内容
  • Step2
    ここにステップ2のタイトル
    ここにステップ2内容
  • Step3
    ここにステップ3のタイトル
    ここにステップ3内容

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

まとめ

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

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

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

タイトルとURLをコピーしました