【スワロー】ショートコードの使い方をやさしく解説!



こんにちは! おちびです。

WordPress の有料テーマ スワロー では、初心者でも簡単に使える『ショートコード』が用意されているのをご存知ですか?

ショートコードを使いこなせれば、簡単に『オシャレ』で『手の込んだ』ブログが書けちゃうんです!

今回はそのショートコードの使い方について、実際のソースコードや画像を交えながらやさしく解説していきます!

WordPressテーマ「スワロー」
当ブログ『ちびくまのキムチ鍋』で使用しているテーマもスワローです。
初心者こそ使うべき!WordPressテーマ【スワロー】が優秀すぎる!

初心者こそ使うべき!WordPressテーマ【スワロー】が優秀すぎる

ショートコードで何ができる?


ショートコードを使うことで具体的にどんなことができるのでしょうか?

ちび
やっぱり初心者さんの憧れはこれ!「吹き出し」を使いこなしたいよね〜!
初心者くん
そうそう!!そうなんです!!
スワローでは、上記の吹き出しはもちろん、このような補足説明も簡単に作成できます。
こんな人にオススメ
有料テーマでブログを頑張りたいけど、使いこなせるか不安だった方。
こんなボックスの表示も簡単にできると知ったら、今すぐ記事を書きたくなりませんか?


このように、様々なコードが用意されています!
ショートコードを使うだけで一気に「デザインに凝ったスゴいブログ」に見えますよね?!

今まで使ってこなかった方は、ぜひ使い方を覚えて記事をリライトしましょう!!!

ちなみにショートコードを書くときは、ブロックエディタの [ウィジェット] 内にある [ショートコード] を選べば OK ! 

ショートコードをクリックすると〜
このブロックが表示されます!


こんな風にブロックができたら、[ショートコードをここに入力...] の部分に直接入力するだけです!
それでは、ひとつひとつコードの書き方を見ていきますよ〜!

 

吹き出しを出す

ちび
まずはこれね!吹き出しの出し方!


上記で表現している吹き出しは、以下のショートコードで出しています。

[voice icon="/wp-content/uploads/2020/04/IMG_chibi丸.png" name="ちび" type="l"]まずはこれね!吹き出しの出し方![/voice]


より具体的に説明すると、

[voice icon="①アイコンのアドレス" name="②アイコンの名前" type="l"]③吹き出し内のテキスト[/voice]

という風に組み立てられています!

 

①アイコンのアドレス

WordPress の「メディア」にアップロードした画像を、アイコンとして使用します。そのため、まずはアイコンに使いたい画像や写真をアップロードしておきましょう!

ここからは画像のアップロード方法についてご紹介します。
ご存知の方は読み飛ばして ② へどうぞ!

≪画像のアップロード手順≫

1. WordPress の左ペイン [メディア] から [新規追加] をクリック。
点線枠内にファイルを直接ドロップする、もしくは [ファイルを選択] をクリックしてから使いたい画像を選択します。 


2. [メディア] から [ライブラリ] へ移動します。
無事、使用したい画像がライブラリに追加されました!


3. 画像をダブルクリックすると、詳細画面が開きます。
 [リンクをコピー] の欄に画像の URL がありますので、ここからリンクをコピーしましょう!

 

このようにして、アイコンのアドレスをコピーしてきます!

②アイコンの名前

アイコンの下に表示される名前を入力します。
今回はおちびの画像なので「ちび」としています。

③吹き出し内のテキスト

吹き出しで喋らせたいワードをそのまま入力するだけで OK です!
ちなみに吹き出しの中で改行をしたい場合は、任意の場所で <br> と入力すれば、改行できますよ!

小技:typeをいろいろ指定してみよう

この吹き出しのショートコード内に、type="" という部分がありますね。
ここに、いくつかデザインを指定するオプションがあるんです!

type を駆使すれば、オリジナリティに富んだ吹き出しが作れちゃいますよ!

  • type="l"
    アイコンを左側に配置する
  • type="r"
    アイコンを右側に配置する
  • type="big"
    アイコンを大きく表示する
  • type="fb"
    Facebook 風の吹き出し
  • type="line"
    LINE 風の吹き出し
  • type="icon_red"
    アイコンの枠を赤色にする
  • type="icon_yellow"
    アイコンの枠を黄色にする
  • type="icon_blue"
    アイコンの枠を青色にする
  • type="icon_black"
    アイコンの枠を黒色にする


これらは 同時に複数設定することも可能です!
その場合は半角スペースを空けて入力しましょう。

 

ちび
おなか空いた〜
くま
はいはい、スーパーで買い物して帰るから待っとってな


これは LINE 風の吹き出し + 枠色指定。こんな感じで使えます!

 

補足説明を入れる

文章の下に、補足説明を入れることができます。
黄色い囲みで目を引きますので、ちょっとしたコメントを入れるのに便利です!

ワンポイントアドバイス
ここにテキストを入力してね!


書き方はこちら

[aside]
ワンポイントアドバイス
ここにテキストを入力してね!
[/aside]

注意事項を入れる

文章の下に、注意事項を入れることができます。
赤色でかなり目立つので、注意喚起など 特に読者に伝えたい文言 はこのショートコードを利用すると良いですよ!

注意
ここにテキストを入力しましょう!


書き方はこちら

[aside type="warning"]
注意
ここにテキストを入力しましょう!
[/aside]

さりげない枠を入れる

補足説明や注意事項ほど目立たせる必要はないけれど、さりげなく枠で囲いたい時はこちらも使えます。

私はこれの活用法が見い出せていないので、あまり使ってないよ(小声)


書き方はこちら

[aside type="boader"]
私はこれの活用法が見い出せていないので、あまり使ってないよ(小声)
[/aside]

タイトル付きボックスを入れる

タイトル付きのボックスで、ワンポイントの説明や補足などを入れることができます!
色も複数あるので、ブログデザインによって使い分けることができるのが便利ですね。

ここにタイトル
ここにコンテンツを記載


書き方はこちら。

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


box class を指定することで、色を変えることができます。

  • 青色・・・blue_box
  • 赤色・・・red_box
  • 黄色・・・yellow_box
  • 緑色・・・green_box
  • 桃色・・・pink_box
  • 黒色・・・black_box
  • 灰色・・・gray_box


赤色
こんな感じ
黄色
こんな感じ
緑色
こんな感じ
桃色
こんな感じ
黒色
こんな感じ
灰色
こんな感じ...灰色っていうか、白?


関連記事のリンクを画像付きで紹介する

↓このように、記事内に関連記事のリンクを貼って、他の記事へのアクセスを誘導することもできます。

【超おすすめ】siroca の全自動コーヒーメーカーが優れものなワケ


書き方はこちら。

[kanren postid="894"]

この postid というのは、記事 ID のことです。

記事 ID の調べ方

記事 ID は、ブラウザ上で簡単に確認することができます。

まずは WordPress 左ペインの [投稿] から [投稿一覧] をクリック。


図のように、関連記事として表示させたい記事にカーソルを合わせると、画面左下に記事の URL が表示されます。その中に post == *** と書いてある部分がありますよね。その数字が、記事 ID です!
記事 ID は 3 桁もしくは 4 桁となっています。


もし、関連記事を複数入れたい場合は、

[kanren postid="894,1066"]


このようにカンマで区切って入力すれば OK !
そうすると以下のように表示されます!

BODY ARCHI セルフエステの無料体験に行ってみた!

BODY ARCHI セルフエステの無料体験に行ってみた!

【超おすすめ】siroca の全自動コーヒーメーカーが優れものなワケ

これらのショートコードは、記事作成中にプレビュー表示することができません。
見栄えを確認したい場合は、下書き保存をしてからプレビューで確認するようにしましょう!

これってエラー?ショートコードが反映されない場合

困った人
実際にショートコードを入力してみたけれど、プレビューで見たときに反映されないぞ...なんでだろう...

ショートコードが反映されない場合は、コードの記述に誤りがないかよく確認してみましょう!

要注意なのが、ダブルクォーテーション。

" " ←このように、まっすぐの半角ダブルクォーテーションになっていますか?
 “ ” ←このように左右に向いた引用符となっている場合、WordPress はショートコードとして認識してくれません!

ショートコード内では、必ず半角のダブルクォーテーション " " を使いましょう!


こんな時は要注意!
例えば PC やスマホのメモアプリにショートコードを用意しておき、コピペで利用するといった場合...「自動変換」というおせっかいな変換機能によって勝手に " " が ” ” になってしまうケースがあります!

おわりに

いかがでしたでしょうか?

もしご紹介した方法について不明点がありましたら、この記事のコメント欄や Twitter の DM などでお気軽にご質問ください♪
全部にお答えできるか分かりませんが、可能な限りお力になりたいと思います!

それでは、カンタンで便利な『ショートコード』を上手に使って、これからも一緒に楽しくブログを書いていきましょう〜!!!

 

スポンサードリンク