こんにちは！ おちびです。
WordPress の有料テーマ スワロー では、初心者でも簡単に使える『ショートコード』が用意されているのをご存知ですか？
ショートコードを使いこなせれば、簡単に『オシャレ』で『手の込んだ』ブログが書けちゃうんです！
今回はそのショートコードの使い方について、実際のソースコードや画像を交えながらやさしく解説していきます！
WordPressテーマ「スワロー」
目次
ショートコードで何ができる？
ショートコードを使うことで具体的にどんなことができるのでしょうか？
こんなボックスの表示も簡単にできると知ったら、今すぐ記事を書きたくなりませんか？
このように、様々なコードが用意されています！
ショートコードを使うだけで一気に「デザインに凝ったスゴいブログ」に見えますよね？！
今まで使ってこなかった方は、ぜひ使い方を覚えて記事をリライトしましょう！！！
ちなみにショートコードを書くときは、ブロックエディタの [ウィジェット] 内にある [ショートコード] を選べば OK ！
こんな風にブロックができたら、[ショートコードをここに入力...] の部分に直接入力するだけです！
それでは、ひとつひとつコードの書き方を見ていきますよ〜！
吹き出しを出す
上記で表現している吹き出しは、以下のショートコードで出しています。
[voice icon="/wp-content/uploads/2020/04/IMG_chibi丸.png" 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
関連記事のリンクを画像付きで紹介する
↓このように、記事内に関連記事のリンクを貼って、他の記事へのアクセスを誘導することもできます。
書き方はこちら。
[kanren postid="894"]
この postid というのは、記事 ID のことです。
記事 ID の調べ方
記事 ID は、ブラウザ上で簡単に確認することができます。
まずは WordPress 左ペインの [投稿] から [投稿一覧] をクリック。
図のように、関連記事として表示させたい記事にカーソルを合わせると、画面左下に記事の URL が表示されます。その中に post == *** と書いてある部分がありますよね。その数字が、記事 ID です！
記事 ID は 3 桁もしくは 4 桁となっています。
もし、関連記事を複数入れたい場合は、
[kanren postid="894,1066"]
このようにカンマで区切って入力すれば OK ！
そうすると以下のように表示されます！
見栄えを確認したい場合は、下書き保存をしてからプレビューで確認するようにしましょう！
これってエラー？ショートコードが反映されない場合
ショートコードが反映されない場合は、コードの記述に誤りがないかよく確認してみましょう！
要注意なのが、ダブルクォーテーション。
" " ←このように、まっすぐの半角ダブルクォーテーションになっていますか？
“ ” ←このように左右に向いた引用符となっている場合、WordPress はショートコードとして認識してくれません！
ショートコード内では、必ず半角のダブルクォーテーション " " を使いましょう！
例えば PC やスマホのメモアプリにショートコードを用意しておき、コピペで利用するといった場合...「自動変換」というおせっかいな変換機能によって勝手に " " が ” ” になってしまうケースがあります！
おわりに
いかがでしたでしょうか？
もしご紹介した方法について不明点がありましたら、この記事のコメント欄や Twitter の DM などでお気軽にご質問ください♪
全部にお答えできるか分かりませんが、可能な限りお力になりたいと思います！
それでは、カンタンで便利な『ショートコード』を上手に使って、これからも一緒に楽しくブログを書いていきましょう〜！！！
