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

スワロー
sally

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

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

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

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

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

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

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

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

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

今回紹介する、吹き出しアイコンの種類は…
  • ノーマル
  • Facebook風
  • ライン風

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

ノーマル風

名前
ここに、言葉をいれてくださいね!
[voice icon="ここに画像のURL" name="名前" type="l"]ここに、言葉をいれてくださいね![/voice]

名前
アイコンは左にも対応しています
[voice icon="アイコンのURL" alt="virginia-icon1000" name="名前 type="r"]アイコンは左にも対応しています[/voice]

Facebook風

あなたの名前
これは、Facebook風の左です。
[voice icon="あなたの画像のURL" alt="virginia-icon1000" name="あなたの名前" type="l fb"]これは、Facebook風の左です。[/voice]

あなたの名前
こっちは右~
[voice icon="あなたの画像のURL" alt="virginia-icon1000" name="あなたの名前" type="r fb"]こっちは右~[/voice]

ライン風

怒らないで
ライン風のアイコンの左です!
[voice icon="画像のURL" alt="virginia-icon1000" name="怒らないで" type="l line"]ライン風のアイコンの左です![/voice]

泣かないで
ライン風アイコンの右です!
[voice icon="画像のURL" alt="virginia-icon1000" name="泣かないで" type="r line"]ライン風アイコンの右です![/voice]

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

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

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

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

吹き出しのアレンジ
  • リンクの貼り方
  • 拡大
  • カラー

リンクの貼り方

trio
こんなかんじでリンクが張れますよ
[voice icon="画像のURL" name="trio" type="l"]こんなかんじで<a href="リンクのURL/">リンク</a>が張れますよ[/voice]

拡大

名前
大きいアイコンもできるのよー
名前
写真によってはこんな風に映ってしまう事もありますが…
[voice icon="画像のURL" alt="virginia-icon1000" name="名前" type="l big"]大きいアイコンもできるのよー[/voice]
[voice icon="画像のURL" name="名前" type="l big"]写真によってはこんな風に映ってしまう事もありますが…[/voice]

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

カラー

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

枠が赤

sally
「type内に icon_red のコードを追加するだけです」

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

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

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

枠が青

sally
「type内に icon_blue のコードを追加するだけです」

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

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

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

枠が黄色

sally
「type内に icon_yellow のコードを追加するだけです」

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

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

枠が黒

sally
「type内に icon_black のコードを追加するだけです」

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

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

まとめ

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

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

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

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



関連記事