【テーマ:スワロー】コピペで簡単な「吹き出し」ショートコード

[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]

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

前回の記事では「ワードプレス:スワロー:コピペでオッケーなボックスショートコード」を紹介しました。
(詳しくは、こちらをクリック)

今回はワードプレス:スワローで使える、コピペでオッケーな吹き出しのショートコードを紹介していきたいと思います。

黒い部分をコピペしてすぐ使えますよ!(ショートコードやテキストで入力してくださいね)

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

オススメのWordPressテーマ「スワロー」は、リンクをクリックして覗いてみてくださいね。

スワローショートコード:吹き出し機能

吹き出しにはいくつか種類があります。

[box class=”blue_box” title=”今回紹介する、吹き出しアイコンの種類は…”]
  • ノーマル
  • Facebook風
  • ライン風
[/box]

さっそく、見てみましょう。

ノーマル風

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” alt=”virginia-icon1000″ name=”名前” type=”l”]ここに、言葉をいれてくださいね![/voice]
[[voice icon="ここに画像のURL" name="名前" type="l"]ここに、言葉をいれてくださいね![/voice]]

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” alt=”virginia-icon1000″ name=”名前” type=”r”]アイコンは左にも対応しています[/voice]
[[voice icon="アイコンのURL" alt="virginia-icon1000" name="名前 type="r"]アイコンは左にも対応しています[/voice]]

Facebook風

[voice icon=”https://triodiary.com/wp-content/uploads/2020/01/3EE2B6F3-AFEA-428D-B719-1EE4425B0F18.png” alt=”virginia-icon1000″ name=”あなたの名前” type=”l fb”]これは、Facebook風の左です。[/voice]
[[voice icon="あなたの画像のURL" alt="virginia-icon1000" name="あなたの名前" type="l fb"]これは、Facebook風の左です。[/voice]]

[voice icon=”https://triodiary.com/wp-content/uploads/2020/01/F480B332-1FD0-48C7-BA6C-912F3A793772.png” alt=”virginia-icon1000″ name=”あなたの名前” type=”r fb”]こっちは右~[/voice]
[[voice icon="あなたの画像のURL" alt="virginia-icon1000" name="あなたの名前" type="r fb"]こっちは右~[/voice]]

ライン風

[voice icon=”https://triodiary.com/wp-content/uploads/2020/01/2349853C-30A8-4FC9-899C-9B92DD1B4C0B.png” alt=”virginia-icon1000″ name=”怒らないで” type=”l line”]ライン風のアイコンの左です![/voice]
[[voice icon="画像のURL" alt="virginia-icon1000" name="怒らないで" type="l line"]ライン風のアイコンの左です![/voice]]

[voice icon=”https://triodiary.com/wp-content/uploads/2020/01/E3139A3F-CF46-4B79-A698-3E3772A087B5-コピー.png” alt=”virginia-icon1000″ name=”泣かないで” type=”r line”]ライン風アイコンの右です![/voice]
[[voice icon="画像のURL" alt="virginia-icon1000" name="泣かないで" type="r line"]ライン風アイコンの右です![/voice]]

以上が、スタンダードな吹き出しでした。

続いて、アレンジバージョン行ってみましょう!

スワローショートコード:吹き出しのアレンジもありますよー!

吹き出しをアレンジする事も出来るんですよ!

[box class=”blue_box” title=”吹き出しのアレンジ”]
  • リンクの貼り方
  • 拡大
  • カラー
[/box]

リンクの貼り方

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” name=”trio” type=”l”] こんなかんじでリンクが張れますよ[/voice]
[[voice icon="画像のURL" name="trio" type="l"]こんなかんじで<a href="リンクのURL/">リンク</a>が張れますよ[/voice]]

拡大

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” alt=”virginia-icon1000″ name=”名前” type=”l big”]大きいアイコンもできるのよー[/voice] [voice icon=”https://triodiary.com/wp-content/uploads/2019/12/problem-beause-you-are.-anger-pointing-bossy-portrait-of-beautiful-emotional-young-woman-in-white-t-shirt-with-freckles-glasses-red-lips-and-head-band.-1011454874_3868x2578-scaled.jpeg” name=”名前” type=”l big”]写真によってはこんな風に映ってしまう事もありますが…[/voice]
[[voice icon="画像のURL" alt="virginia-icon1000" name="名前" type="l big"]大きいアイコンもできるのよー[/voice]]
[[voice icon="画像のURL" name="名前" type="l big"]写真によってはこんな風に映ってしまう事もありますが…[/voice]]

上の吹き出しと、下の吹き出しでコードが少し違いますが、こんな風に変わらずに表示できます。

カラー

周りの淵の色を変える事も出来ますよ。

枠が赤

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” name=”sally” type=”l icon_red”]「type内に icon_red のコードを追加するだけです」

それだけで、アイコンの淵が赤くなりますよ[/voice]

[[voice icon="画像のURL" name="sally" type="l icon_red"]「type内に icon_red のコードを追加するだけです」

それだけで、アイコンの淵が赤くなりますよ[/voice]]

枠が青

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” name=”sally” type=”l icon_blue”]「type内に icon_blue のコードを追加するだけです」

それだけで、アイコンの淵が青くなりますよ[/voice]

[[voice icon="画像のURL" name="sally" type="l icon_blue"]「type内に icon_blue のコードを追加するだけです」

それだけで、アイコンの淵が赤くなりますよ[/voice]]

枠が黄色

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” name=”sally” type=”l icon_yellow”]「type内に icon_yellow のコードを追加するだけです」

それだけで、アイコンの淵が黄色くなりますよ[/voice]

[[voice icon="画像のURL" name="sally" type="l icon_yellow"]「type内に icon_yellow のコードを追加するだけです」
それだけで、アイコンの淵が青くなりますよ[/voice]]

枠が黒

[voice icon=”https://triodiary.com/wp-content/uploads/2020/07/image-22-07-20-06-42-002.jpeg” name=”sally” type=”l icon_black”]「type内に icon_black のコードを追加するだけです」

それだけで、アイコンの淵が黒になりますよ[/voice]

[[voice icon="画像のURL" name="sally" type="l icon_"black]「type内に icon_black のコードを追加するだけです」
それだけで、アイコンの淵がに黒なりますよ[/voice]]

まとめ

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

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

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

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



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