年収アップの近道は・・・

SANGOユーザー必見!タイムラインに画像を挿入する方法

SANGOユーザー必見!タイムラインに画像を挿入する方法

この記事の対象者

・SANGOのユーザー
・SANGOの導入を検討されている方

今回の記事は当ブログで使用しているWordPressのテーマ「SANGO」についてです。

多くのSANGOユーザーが使用しているであろうショートコードの1つに「タイムライン」という機能があります。いや、1番人気のショートコードと言っても過言ではありません。

そのタイムラインに画像を挿入する方法を紹介します。

タイムラインとは

タイムラインを使うと下記のような表現が可能です。

[タイムラインの使い方]

STEP.1
ショートコードを入力
STEP.2
タイトルと説明文を入力
STEP.3
完成!
これでタイムラインは完成です!
簡単でしょ?

見ていただいてお分かりの通り

  • デザインがおしゃれ
  • 見た目がすっきりする
  • 簡単に作成できる
  • 順序立てて説明するのに便利

という理由からゆうぴんも非常に重宝しております。

ところでこのタイムラインに画像を挿入することができればさらに便利だと思いませんか?

画像を挿入することで

  • 説明がより分かりやすくなる
  • 表現の幅が広がる
  • 文章力を補うことができる
  • 画像で説明することで文字数を減らせる(文字ばかりだと疲れる)

という効果が期待できます。

ゆうぴんも先日ブログを書いていて
「ここの説明、画像を入れた方が絶対に伝わりやすいはず」
と考え、画像の挿入を試みたのですが、なかなかそのやり方が分からず苦労しました。

そもそもタイムラインに画像を挿入することは可能なのだろうかと気になり、SANGOの公式HPを確認しにいったところ、そこには確かに

「画像などを挿入することももちろん可能です。」

という一言が。

画像の挿入は可能であるということは確認できたもののそのやり方が分からない。
調べてみても出てこない。
しかし、できることが明らかな以上あきらめるわけにはいかない。

ということで、試行錯誤の末になんとか画像の挿入方法を突き止めることができました。

タイムラインに画像を挿入する方法

1.タイムラインのショートコードを入力

それでは具体的にどのようにすればタイムラインに画像を挿入することができるのかを説明していきます。

まずは記事投稿画面を立ち上げます。
ちなみにエディターはGutenbergを使用しています。

ブロックの追加を行い、ショートコードをクリックします。
(下記画像の赤枠部分)

Gutenbergでのショートコード入力

そしてショートコードの入力ボックスに下記コードを入力します。

タイムラインのショートコード
[timeline]
[tl label='STEP.1' title='タイトル1'] 中身1 [/tl]
[tl label='STEP.2' title='タイトル2'] 中身2 [/tl]
[tl label='STEP.3' title='タイトル3'] 中身3 [/tl]
[tl label='STEP.4' title='タイトル4'] 中身4 [/tl]
[tl label='STEP.5' title='タイトル5'] 中身5 [/tl]
[/timeline]

こちらのコードを入力することで最初に見本で見ていただいたタイムラインを作成することが可能です。


[tl label='STEP.〇' title='タイトル〇'] 中身〇 [/tl]

が1つのかたまりとなっており、ステップの数は削除したり、追加したり自由に編集できます。
最初に見ていただいた見本はSTEP.3までで作成しています。

そしてここからが問題です
この状態で「画像を挿入」という機能が使えれば問題ないのですが、どこを探してもそのような機能は表示されません。

ではどうするのか?

答えは画像のボックスをショートコードのボックスで挟むです。

2.画像のボックスをショートコードのボックスで挟む

例えばステップ2の説明に画像を挿入したいとします。
その場合、下記画面のように「ショートコードのボックス」「画像のボックス」「ショートコードのボックス」という形でボックスを並べます。

画像の挿入方法。画像のボックスをショートコードのボックスで挟む。
画像の挿入方法

この時、ステップ2の「タイトル」と「説明文」の間に画像を入れる場合は次のようにします。

1つ目のボックス
[timeline]
[tl label='STEP.1' title='タイトル1'] 中身1 [/tl]
[tl label='STEP.2' title='タイトル2'] 
2つ目のボックス
画像
3つ目のボックス
中身2 [/tl]
[tl label='STEP.3' title='タイトル3'] 中身3 [/tl]
[/timeline]

するとこのように表示されます。

STEP.1
タイトル1
中身1
STEP.2
タイトル2
タイムラインに画像を挿入した場合のイメージ画像。

画像の下に説明文がきます

STEP.3
タイトル3
中身3

「タイトル」→「説明文」→「画像」の順番で表示させたい場合は「中身」のすぐ後ろに画像のボックスを持ってきます。

1つ目のボックス
~[tl label='STEP.2' title='タイトル2'] 中身2
2つ目のボックス
画像
3つ目のボックス
[/tl]~

するとこのように表示されます。

STEP.1
タイトル1
中身1
STEP.2
タイトル2
説明文の下に画像がきます

タイムラインに画像を挿入した場合のイメージ画像。
STEP.3
タイトル3
中身3

これでタイムラインを使った表現の幅が広がりますね。
本日は以上です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA