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

2021

08/25

Published

2021.08.25

/ 株式会社deer

　　

\ この記事を共有 /

B!

リンクをコピーする

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

株式会社deer

B!

リンクをコピーする

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

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

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

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

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

を言います。

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

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

/* 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. 画像【影付き】
2. 画像【枠付き】

1-1.画像【影付き】

1-2.画像【枠付き】

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

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

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

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

2)ボタンリンク

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

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

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

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

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

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

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

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

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

[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.自由色の囲い（影付き/フラット　切替え可能）

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

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

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

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

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

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

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

5) トピックボックス

black (黒)

[topic color="black" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

gray（グレー）

[topic color="gray" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

red（赤）

[topic color="red" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

blue（青）

[topic color="blue" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

green（緑）

[topic color="green" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

pink（ピンク）

[topic color="pink" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

orange（オレンジ）

[topic color="orange" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

yellow（黄）

[topic color="yellow" title="ここにトピックのタイトル"]
ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。ここに枠の中身を書く。
[/topic]

6) スマホの時に文字を小さくするショートコード

↑PCから見ただけではあまり分からないと思いますが、スマホから見るとこの文字の大きさが半分くらいになります。
（スマホでぜひご確認下さい。他の部分と比べて文字が小さくなっていると思います。）

使いどころは限られているかもしれませんが、裏技としてお使いください。

↓記述方法はこちら

[spfont]
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
[/spfont]

7)蛍光ペンでアンダーラインを引いたような感じにする

[keikou]黄色い蛍光ペンでアンダーライン[/keikou]

8) 吹き出し

吹き出し（シンプル）

[voicel icon="https://fanfare-co-ltd.com/deer-demo-01/wp-content/uploads/2021/08/c9f5dee8eda7c5b72035d2a628779eda.png" name="JUNICHI"]吹き出しショートコードが追加されたよ。[/voicel]

[voicer icon="https://fanfare-co-ltd.com/deer-demo-01/wp-content/uploads/2021/07/8e095b566aa3163dafe21dbba729c444.png" name="シカさん"]おおおお！それは嬉しいシカ。[/voicer]

吹き出し（Facebook風）

[fbvoicel icon="https://fanfare-co-ltd.com/deer-demo-01/wp-content/uploads/2021/08/c9f5dee8eda7c5b72035d2a628779eda.png" name="ジュンイチ"]吹き出しショートコードが追加されたよ。[/fbvoicel]

[fbvoicer icon="https://fanfare-co-ltd.com/deer-demo-01/wp-content/uploads/2021/07/8e095b566aa3163dafe21dbba729c444.png" name="シカさん"]おおおお！それは嬉しいシカ。[/fbvoicer]

吹き出し（LINE風）

[lnvoicel icon="https://fanfare-co-ltd.com/deer-demo-01/wp-content/uploads/2021/08/c9f5dee8eda7c5b72035d2a628779eda.png" name="JUNICHI"]吹き出しショートコードが追加されたよ。[/lnvoicel]

[lnvoicer icon="https://fanfare-co-ltd.com/deer-demo-01/wp-content/uploads/2021/07/8e095b566aa3163dafe21dbba729c444.png" name="シカさん"]おおおお！それは嬉しいシカ。[/lnvoicer]

9) LP用フルワイドカラーブロック

画面横一杯のフルワイドのブロックを作れるショートコードです。LP以外にも、シングルカラムの下部のウィジェットでも使えます。

LPフルワイドブロック

[lpwide2 color="#ffffff"]
カラーコードの部分は好きなコードを入れることができます。
[/lpwide2]

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

10) フルワイド画像コンテンツ

たとえば、今風の画面いっぱいに広がるランディングページで画像の上に文字やボタン、画像なんかも設置ができます。

詳しい使い方は、デモページに載せてあります↓

11) 関連記事

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

2021-08-25

[kanren url="ここに記事のURL"]

12) フローチャート

[flow]
フローの内容を書く書く書く書く
[/flow]
[sankaku][/sankaku]
[flow]
フローの内容を書く書く書く書く
[/flow]

13) 漢字のフリガナ、傍点

こんな風に難しい漢字かんじにフリガナが振れます。

[ruby]漢字[rt]かんじ[/rt][/ruby]

強調したいときは、こんな風に傍点が振れると目立ちますね！

[emphasis]傍点[/emphasis]

14)年齢自動計算

あまり使いどころは多くない、あなたの年齢を自動で計算して表示させてくれるショートコード。

1983年12月20日生まれの僕の今日の今現在の年齢は 40歳です。

↓以下のコードを書くと年齢の数字の部分だけ出ます。プロフィールとかに使ってね。

[birth day="19831220"]

15) PCのみ表示・モバイルのみ表示

deerでは

• PCのみに表示したい部分
• スマホ・タブレットのみで表示したい部分

を以下のショートコードを使えば分けることができます。

[pc]パソコンから見た時しか見れないよ[/pc]

[mobile]スマホ・タブレットから見た時しか見れないよ[/mobile]

以上です！