【テーマ:スワロー】コピペで簡単な「ボックス」ショートコード

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” alt=”virginia-icon1000″ name=”sally” type=”l icon_blue”]

こんにちは!サリーです。
以前、私は無料テーマcocoonから、有料テーマswallowにした時に、記事がハチャメチャになりびっくりしました。

[/voice]

そうなんです!
テーマにあったコードを利用しないと、「吹き出し」や「ボックス」は機能しない事があります。
しかし…ここまでの話で…

[voice icon=”https://triodiary.com/wp-content/uploads/2020/01/C8A7A97E-6B8E-4F20-ADC9-85F37BD78258-1.png” alt=”virginia-icon1000″ name=”sally” type=”l icon_blue”]

「ショートコードってなに?」
「吹き出しってどうやって作るの?」
「ボックスってなに?」

[/voice]

そんな人は、集合してください!

今回は、コピペでオッケーなコードを紹介していきます!
※このページをお気に入りに入れておくといいですよ!

ショートコードとは(最初に1分だけ説明の時間をください!)

ショートコードとはソースコード(HTMLコード)を呼び出すためのコードのこと。

[voice icon=”https://triodiary.com/wp-content/uploads/2020/01/032EA527-DE45-455D-A4A1-CFDB212FC8B4.png” alt=”virginia-icon1000″ name=”sally” type=”l icon_blue”]

まだ、チンプンカンプンですよね💦

[/voice]

ボックスの枠を作ったり、吹き出しを作ったりできるようになる文字っていう理解で、オッケーです。

その、ショートコードはwordpressのテーマごとに違うので、今回はスワローで使えるショートコードを紹介していこうと思います。

コピペでそのまま使えるので、誰かのお役に立てれば幸いです。

コピペで簡単な「ボックス」ショートコード

まずは、ラベル付き(見出し付き)のボックスコードを紹介していきます。
見本の下にある、黒いラベル部分をそのままコピペして使ってください!

スワローショートコード:ラベル付き(見出し付き)ボックス

[box class=”blue_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[[box class="blue_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]

[box class=”red_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[[box class="red_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]

黄色

[box class=”yellow_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[[box class="yellow_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]

[box class=”green_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[[box class="green_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]

ピンク

[box class=”pink_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[[box class="pink_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]

グレー

[box class=”glay_box” title=”ここにタイトル”]ここにコンテンツを記載[/box]
[[box class="glay_box" title="ここにタイトル"]ここにコンテンツを記載[/box]]

これは、私もブログ内で良く使用します。

見出し付きボックスがあるだけでブログが読みやすくなるので利用してみてくださいね!

スワローショートコード:ラベルなしボックス

次は、ラベルなしボックスのコードです。

これも結構使えるので、利用してみてくださいね!

[box class=”blue_box”]

ここにテキストやコンテンツ

[/box]
[[box class="blue_box"]

ここにテキストやコンテンツ

[/box]]

[box class=”red_box”]

ここにテキストやコンテンツ

[/box]
[[box class="red_box"]

ここにテキストやコンテンツ

[/box]]

黄色

[box class=”yellow_box”]

ここにテキストやコンテンツ

[/box]
[[box class="yellow_box"]

ここにテキストやコンテンツ

[/box]]

[box class=”green_box”]

ここにテキストやコンテンツ

[/box]
[[box class="green_box"]

ここにテキストやコンテンツ

[/box]]

ピンク

[box class=”pink_box”]

ここにテキストやコンテンツ

[/box]
[[box class="pink_box"]

ここにテキストやコンテンツ

[/box]]

グレー

[box class=”glay_box”]

ここにテキストやコンテンツ

[/box]
[[box class="glay_box"]

ここにテキストやコンテンツ

[/box]]

スワローショートコード:特別篇

特別なボックスコードを3つほど紹介しておきます。

シンプル

[aside type=”boader”] これは、シンプルな枠で囲んであります。
ここに好きな文字を入れてください。
[/aside]
[[aside type="boader"] 
これは、シンプルな枠で囲んであります。
ここに好きな文字を入れてください。
[/aside]]

補足説明

[aside] 補足説明をいれる枠です。
 ここに補足説明を入れてください。
[/aside]
[[aside] 
補足説明をいれる枠です。
 ここに補足説明を入れてください。
[/aside]]

注意説明

[aside type=”warning”] 注意説明をいれる枠です。
ここに注意説明を追加してください。
[/aside]
[[aside type="warning"]
注意説明をいれる枠です。
ここに注意説明を追加してください。 
[/aside]]

まとめ

今回は、ボックスのみを紹介していきました。

少しでも、誰かの参考になれば幸いです!

このブログは、安くてコスパ最高なWordPressテーマ「スワロー」を使用しています。
難しい事はテーマに何とかしてもらい、書く事に集中したい方に本当にオススメのテーマですよ

\当ブログで使用中「スワロー」/



[box class=”yellow_box” title=”関連記事”] [/box]