WordPressテーマdeerで使えるショートコード一覧

2021

08/25

Updated

2022.12.28

2021

08/25

Published

2021.08.25

/ ジュンイチ

まずはじめに
deerでは、ショートコードのご使用はあまりおすすめしていません。将来、他のテーマへの切り替えをする際に、使えなくなるデメリットがあるからです。また、今までショートコードでしか使えなかったような機能が、WordPressのブロックエディターで簡単に使えるようになってきたため、ショートコードをメインに使うよりもWordPressブロックをメインに活用されることをおすすめしています。
以上の事を踏まえて、今回の解説を御覧ください。

WordPressテーマdeerでは、専用のショートコードを使うことができます。

このページでは、deerで使えるショートコード一覧を載せておきます。

ここでは、WordPressテーマ『deer』で使える便利なショートコードを一覧にしました。

1. ショートコードって何？どうやって使うの？
- 1.1. ショートコードの使い方
2. 1)画像を少し目立たせる
3. 2)ボタンリンク
4. 3) カラム
5. スマホにもカラムが適用されるショートコード
6. 4) 囲い枠
- 6.1. 4-1.自由色の囲い（影付き/フラット　切替え可能）
  - 6.1.2. ※囲いの影付き/フラット切替え
7. 5) トピックボックス
8. 6) スマホの時に文字を小さくするショートコード
9. 7)蛍光ペンでアンダーラインを引いたような感じにする
10. 8) 吹き出し
11. 9) LP用フルワイドカラーブロック
- - 11.3.3. LPフルワイドブロック
12. 10) フルワイド画像コンテンツ
13. 11) 関連記事
14. 12) フローチャート
15. 13) 漢字のフリガナ、傍点
16. 14)年齢自動計算
17. 15) PCのみ表示・モバイルのみ表示
18. 16)　Q&A

ショートコードって何？どうやって使うの？

ショートコードっていうのは、本来はHTMLやCSSで数十行にもわたるプログラミングをしないといけない事が、1行～数行の短いコードを実現できるもの

を言います。

例えば、以下のボタンリンク↓

ボタン

これは、ショートコードを使わないと↓これくらいプログラミングが必要になります。

/* HTML */
<div class="btn-wrap  align "><a href="#">ボタン</a></div>

/* CSS */
.btn-wrap{
text-align:center;
margin:1.5em 0 2em;
}
.btn-wrap a{
font-weight:bold;
display:inline-block;
text-decoration:none;
padding:0.8em 2.1em;
background: #3cb371;
border:2px solid #3cb371;
-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 3px;   /* Firefox用 */
color:#fff;
box-shadow: 0px 1px 5px rgba(0,0,0,.3);
}
.btn-wrap a:hover{
color:#fff;
box-shadow: 0px 8px 25px -5px rgba(0,0,0,.3);
transition: .2s ease-in-out;
    -webkit-transform: translate(0px,-1px);
    -moz-transform: translate(0px,-1px);
    -ms-transform: translate(0px,-1px);
    -o-transform: translate(0px,-1px);
    transform: translate(0px,-1px);
}

うっ。こんなの毎回書かないとダメなの？！ってなりますよね。

それが、ショートコードを使うと↓

[btn]ボタン（←リンクを張る）[/btn]

この1行だけでボタンになります。

このように、deerではコードがわからない初心者さんでも簡単なショートコードを使うだけで、色んな便利な表現ができるようになっています。

ショートコードの使い方

基本的には、このページで書いてる記述方法通りに、WordPressの記事や固定ページなどに書いてもらうだけです。

以下に、deerのショートコード機能で実現ができる事と、その記述方法を紹介しています。

1)画像を少し目立たせる

画像を使った解説記事を作るときに、画像部分と背景部分の差を分かりやすくするためのショートコードです。地味ですが便利なはずです。

2種類用意しました。

画像【影付き】
画像【枠付き】

1-1.画像【影付き】

1-2.画像【枠付き】

↓↓　1-1.画像【影付き】の記述方法

[imgshadow] ココに画像を置く [/imgshadow]

↓↓　1-2.画像【枠付き】の記述方法

[imgwaku]ココに画像を置く[/imgwaku]

2)ボタンリンク

ボタンリンクを作るときは必ずショートコードに挟まれた間の文字の部分にリンクを張ってください。でないと、ボタンになりません。

ボタン（シンプル）

[btn]ボタン（シンプル）[/btn]

ボタン（ゴースト）

[btn class="ghost"]ボタン（ゴースト）[/btn]

ボタン（SP）

[btn class="spe"]ボタン（SP）[/btn]

ボタン（ゴーストSP）

[btn class="ghostspe"]ボタン（ゴーストSP）[/btn]

ボタン（SP2）

[btn class="spe2"]ボタン（SP2）[/btn]

ボタン（ズームイン）

[btn class="zoomin"]ボタン（ズームイン）[/btn]

ボタン（ダウン）

[btn class="down"]ボタン（ダウン）[/btn]

ボタン（Shiny）

[btn class="shiny"]ボタン（shiny）[/btn]

ボタンを左右に寄せるには？

ボタン型リンクは中央だけでなく左右に寄せることができるようになりました。

いずれのボタンリンクを使うにも、ショートコードの前半部分に「position=”left”」か「position=”right”」を入れてみてください。

例えば以下のような記述方法になります。

左寄せのボタン

↓記述方法はこちら

[btn position="left"]左寄せのボタン[/btn]

右寄せのボタン

↓記述方法はコチラ

[btn class="ghost" position="right"]右寄せのボタン[/btn]

2-1.横幅固定のボタン

横幅固定のボタン１

横幅固定のボタン２

[btn class="kotei1"]横幅固定のボタン１[/btn]
[btn class="kotei2"]横幅固定のボタン２[/btn]

2-2.ボタンの影付き/フラット切替え

通常は、ボタンは影付きですが、全体がフラットデザインの場合は周りのデザインから浮いてしまう可能性があります。
その場合は、ボタンをフラットタイプにすることができます。

影付きボタン

フラットボタン

[btn]影付きボタン（⇒ここにリンクを張る）[/btn]

[btn flat="yes"]フラットボタン(⇒ここにリンクを張る）[/btn]

3) カラム

※カラム：本文をある決まった割合の幅で縦に割る「列」の事だと思ってください。2カラム＝コンテンツの幅を縦に2列に分割する。という感じです。

2カラム

[colwrap][col2]
ここに左
[/col2][col2]
ここに右
[/col2][/colwrap]

3カラム

[colwrap][col3]
ここに左
[/col3][col3]
ここに中央
[/col3][col3]
ここに右
[/col3][/colwrap]

3:7の割合のカラム（スマホではカラム解除）

ここに文章を書いて、横の画像の説明したり色々できるぜ！ここに文章を書いて、横の画像の説明したり色々できるぜ！ここに文章を書いて、横の画像の説明したり色々できるぜ！ここに文章を書いて、横の画像の説明したり色々できるぜ！ここに文章を書いて、横の画像の説明したり色々できるぜ！ここに文章を書いて、横の画像の説明したり色々できるぜ！ここに文章を書いて、横の画像の説明したり色々できるぜ！

記述方法はこちら↓

[colwrap][col37]
こちらに左側のコンテンツ（画像などがおすすめ）
[/col37][col73]
こちらに右側のコンテンツ（文章などがおすすめ）
[/col73][/colwrap]

7：3の割合のカラム（スマホではカラム解除）

記述方法はこちら↓

[colwrap][col73]
こちらに左側のコンテンツ（文章などがおすすめ）
[/col73][col37]
こちらに右側のコンテンツ（画像などがおすすめ）
[/col37][/colwrap]

スマホにもカラムが適用されるショートコード

スマホでも2カラム、PCでも2カラム

記述方法はこちら↓

[spcolwrap][spcol2]
ここに左側コンテンツ
[/spcol2][spcol2]
ここに右側コンテンツ
[/spcol2][/spcolwrap]

スマホでも3カラム、PCでも3カラム

記述方法はこちら↓

[spcolwrap][spcol3]
ここに左側コンテンツ
[/spcol3][spcol3]
ここに中央コンテンツ
[/spcol3][spcol3]
ここに右側コンテンツ
[/spcol3][/spcolwrap]

スマホでも3：7カラム、PCでも3：7カラム

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

[spcolwrap][spcol37]
ここに左側
[/spcol37][spcol73]
ここに右側
[/spcol73][/spcolwrap]

4カラム（PCでは4カラム、スマホでは2カラムが2段）

記述方法はこちら↓

[colwrap][col4]
ここにコンテンツ
[/col4][col4]
ここにコンテンツ
[/col4][col4]
ここにコンテンツ
[/col4][col4]
ここにコンテンツ
[/col4][/colwrap]

4) 囲い枠

4-1.自由色の囲い（影付き/フラット　切替え可能）

自由色の囲い。初期は立体影付き。

自由色の囲い。flat=”yes”を追記で平面的に。

[enclose color="#4169e1"]自由色の囲い。初期は立体影付き。[/enclose]

[enclose color="#4169e1" flat="yes"]自由色の囲い。flat="yes"を追記で平面的に。[/enclose]

カラーコードは以下のサイトなどを参考に選んでください。
⇒https://www.colordic.org/

※囲いの影付き/フラット切替え

こちらもボタン同様、サイト全体のデザインに合わせて使えます。

通常の囲い。色はどんな色でもデフォルトは影がついて立体的になります。

フラットタイプの囲い。色はどんな色でもショートコード中に　flat=”yes”　を入れると影がつかず平面的になります。

[aside type="boader"]デフォルトは何色でも影がついて立体的に。[/aside]

[aside type="boader" flat="yes"]flat="yes"をつければ何色でも平面的に。[/aside]