【LION BLOG カスタマイズ】タイムラインデザインの実装で表現力アップ

何かの手順を説明している記事で見かけるのが、タイムライン表示。

WordPressテーマであるLION BLOGには、そのようなスタイルや機能は実装されていませんので、こちらで紹介されている方法をご案内します。

ぽんひろ.comさんの「HTMLとCSSでタイムラインデザイン！WordPressでショートコードも！」。

動作確認済みのテーマにLION BLOGは含まれてませんが、問題なく利用できています。

タイムラインデザインの実装手順

CSSの追加

「外観」→「テーマエディター」→「子テーマ（LION BLOG Child）のstyle.css」

* 子テーマが選ばれてないときには、右のテーマ選択のドロップダウンから切り替えましょう。

そこで下のリンクにあるCSSコードを丸ごと「//下記ユーザーカスタマイズエリア」以下にコピペしてください。

「ファイル更新」ボタンを忘れずに押して変更を保存します。

ショートコードの作成

同じく「テーマエディター」にて「子テーマ（LION BLOG Child）のfunction.php」を選択し、リンクにあるPHPコードをコピペしましょう。

下の方の「?>」より前に追加してください。「ファイル更新」ボタンを押して保存。

タイムライン表示の使い方

使い方は、タイムライン表示の内容をショートコード[ptimeline][/ptimeline]で囲み、その中で必要な数だけ[ti][/ti]を置くというもの。とても簡単に使えるように作られてます。

[ptimeline]
[ti label="STEP1" title="タイトル1"]ステップ1の内容[/ti]
[ti label="STEP2" title="タイトル2"]ステップ2の内容[/ti]
[ti label="STEP3" title="タイトル3"]ステップ3の内容[/ti]
[ti label="STEP4" title="タイトル4"]ステップ4の内容[/ti]
[ti label="STEP5" title="タイトル5"]ステップ5の内容[/ti]
[/ptimeline]

実際に表示されるとこんな感じ↓になります。

他にも色を変えたり、アイコンを変えたりといったサンプルも下のリンクで紹介されてます。好みや用途に合わせてアレンジしてみてください。

ステップを追って説明するときに役立つデザインです。是非使いこなしていきたいですね。

ぽんひろさん、ありがとうございます。