【ブログ】手順を綺麗にまとめるタイムラインって知ってますか?【Cocoon】

こんにちは!悠です!

 

突然ですが、皆さんはネットサーフィンをしている時にこういったものを見たことがありませんか?

カップラーメンの作り方
  • step1
    お湯を注ぎます。
  • step2
    3分間待ちます。
  • step3
    美味しくいただきます。

 

何かの手順や自分の経歴などを表すときに、読み手が理解しやすいようにテキストと一緒に出すこの棒のようなものをタイムラインと呼びます。

今回は、このタイムラインを自分のブログで使うための方法をご紹介していきます。

ちなみにタイムラインの名前を知らなかった私は、Googleで「棒」・「STEP」・「順番を示すもの」みたいに検索していましたw

スポンサーリンク
スポンサーリンク

タイムラインの使い方【Cocoonの場合】

私はブログテーマにCocoonを使用しています。

 

タイムラインの使い方は非常に簡単です。

まず、エディター画面でショートコードと表示されている場所のプルダウンメニューを開いてください。

 

するとタイムライン・タイムラインアイテムという項目があります。

タイムラインを押すと、外枠の見出しを作成するコードが表示されます。

[timeline title=""][/timeline]

 

タイムラインアイテムを押すと、各stepの詳細な内容を記述するコードが表示されます。

[ti label="" title=""][/ti]

 

これらを組み合わせてタイムラインを表示します。基本的な使い方は次の通りです。

[timeline title="見出しの内容"]
[ti label="step1" title="step1の内容"][/ti]
[ti label="step2" title="step2の内容"][/ti]
[/timeline]

 

最後の[ /timeline]を忘れると表示が崩れてしまうので注意してください。

 

名前がわからない装飾はこう調べよう。

今回はタイムラインを例に挙げましたが、他人のブログで使われている装飾を自分のブログにも使いたいけど名前がわからない時、役に立つ対処法をご紹介します。

 

まず、名前を知りたい装飾の近くにあるテキストをマウスで選択して右クリックし、「検証」を選びます。

 

するとElementのタブにそのページで使われているHTMLコードがずらりと表示されます。

各コードにマウスを近づけるとページ内の対応する場所がハイライトされるので、名前を知りたい装飾が選択されるまでマウスを動かしてください。

 

ブログテーマがCocoonの場合は、コードの中にtimelineという文字列が使われているためわかりやすいですが、別のブログテーマだとtl-contentのようにぱっと見では名前がわからないものもあります。

こういった場合は表示されている文字列をそのままグーグル検索にかけると、ページ内に該当語句を載せているWebサイトを上手く持ってきてくれる可能性が高いです(わからない場合もありますが…)

 

まとめ

以上が、ブログテーマ『Cocoon』でタイムラインを使う方法でした。

何かの手順や自分の経歴をまとめる時などにぜひ使って見てくださいね!

では、ここまで読んでいただきありがとうございました!

コメント