現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

タイムラインショートコードの利用方法

ショートコード
この記事は約6分で読めます。

Cocoonには、手順や、時系列を表しやすいように、タイムラインショートコードを用意しました。

こんな感じのやつ。

  • 2018.08.31
    Cocoon 1.1.7公開
    商品リンクの価格取得不具合修正、モバイルでのデザイン変更。
  • 2018.09.06
    Cocoon 1.1.8公開
    AMP Lightbox・ギャラリー機能追加。
  • 2018.09.11
    Cocoon 1.1.9公開
    タイムラインショートコード機能追加。

以下で、その利用方法というかサンプルコードを紹介します。

スポンサーリンク

ショートコード雛形の作成方法

ショートコードの骨格を作成するには、ビジュアルエディターの「ショートコード」ドロップダウンリストから、まず雛型を作成すると楽かもしれません。

タイムラインショートコード

タイムライン(timeline)ショートコードを利用して、タイムラインの外枠を作成します。

タイムラインショートコード

こんな感じの雛形が出力されます。

[timeline title=""][/timeline]

タイムラインアイテムショートコード

タイムラインアイテム(ti)ショートコードで、タイムラインの中身(アイテム)を作成できます。

タイムラインアイテムショートコード

こんな感じのコードが出力されます。

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

titmlineとtiショートコードを組み合わせて利用

titmlineとtiショートコードを、以下のような入れ子状に組み合わせて利用することでタイムラインを表現します。

タイムラインショートコード雛形の組み合わせ

全体の雛形となるショートコードがこちら。

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

ショートコード実例

以下では、実際に利用する際の実例を紹介します。

手順を表すタイムライン例

WordPressサイトの開設手順を例に説明します。

表示例

サイト開設手順
  • STEP1
    レンタルサーバに登録する
    まずはサイトを始めるスペースを借りる必要があります。

    おすすめのレンタルサーバーは、サーバーAとサーバーBです。

  • STEP2
    独自ドメインを取得する
    サイト運営をする上で、独自ドメインを取得は、今や必須といえるでしょう。

    ドメインを取得するには…

  • STEP3
    WordPressのインストール
    今であれば、レンタルサーバーに簡単インストール機能がついています。レンタルサーバーのヘルプでWordPressインストール方法を探してみましょう。
  • STEP4
    WordPressテーマのインストール
    WordPressテーマはお好きなものを利用すると良いでしょう。ちなみに当サイトはCocoonを利用しています。

サンプルショートコード

上記タイムラインのサンプルコードはこちら。

[timeline title="サイト開設手順"]
  [ti label="STEP1" title="レンタルサーバに登録する"]まずはサイトを始めるスペースを借りる必要があります。

  おすすめのレンタルサーバーは、サーバーAとサーバーBです。[/ti]
  [ti label="STEP2" title="独自ドメインを取得する"]サイト運営をする上で、独自ドメインを取得は、今や必須といえるでしょう。

  ドメインを取得するには…[/ti]
  [ti label="STEP3" title="WordPressのインストール"]今であれば、レンタルサーバーに簡単インストール機能がついています。レンタルサーバーのヘルプでWordPressインストール方法を探してみましょう。[/ti]
  [ti label="STEP4" title="WordPressテーマのインストール"]WordPressテーマはお好きなものを利用すると良いでしょう。ちなみに当サイトはCocoonを利用しています。[/ti]
[/timeline]

時系列をタイムラインで表す

こちらの方がタイムラインの本来の使い方かもしれません。

表示例

これまでの経歴(※フィクションです)
  • 2016年3月
    不祥事により会社を退職
    取引先の社長の頭をひっぱたいてしまい会社をクビに。
  • 2016年4月
    就職活動
    就職活動を行うも、前の会社での行いが知れ渡っており、同業者は全て門前払い。
  • 2016年8月
    就職を諦め無職へ
    完全にやる気が無くなり無職へジョブチェンジ。毎日オンラインゲームざんまいの濃密な日々を過ごす。
  • 2017年8月
    サイト運営を開始
    貯金を使い果たしそうになり「何とかせねば!」と〇〇というサイトを開始。
  • 2018年8月
    サイト運営1年経過
    毎日記事を書き続けた結果、月収〇〇円に。節約すれば何とか生活できる収入に到達。

サンプルショートコード

上記タイムラインのサンプルコードです。

[timeline title="これまでの経歴(※フィクションです)"]
  [ti label="2016年3月" title="不祥事により会社を退職"]取引先の社長の頭をひっぱたいてしまい責任を取って退職。[/ti]
  [ti label="2016年4月" title="就職活動"]就職活動を行うも、前の会社での行いが知れ渡っており、同業者は全て門前払い。[/ti]
  [ti label="2016年8月" title="就職を諦め無職へ"]完全にやる気が無くなり無職へジョブチェンジ。毎日オンラインゲームざんまいの濃密な日々を過ごす。[/ti]
  [ti label="2017年8月" title="サイト運営を開始"]貯金を使い果たしそうになり「何とかせねば!」と〇〇というサイトを開始。[/ti]
  [ti label="2018年8月" title="サイト運営1年経過"]毎日記事を書き続けた結果、月収〇〇円に。節約すれば何とか生活できる収入に到達。[/ti]
[/timeline]

参考

このタイムラインのデザインはWebクリエイターボックスを運営されているManaさんが作成されたCodePenのものを参考にさせていただきました。

Timeline
Responsive timeline Create a Vertical Timeline Using CSS | Web Creator Box 日本語
ショートコード
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

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