WordPressテーマ「Diver」豊富で便利なショートコードを紹介！

2017年07月02日 2017年07月04日

昨日、記事にしましたが、WordPressテーマをアフィリエイト収益最大化!SEO対策済みWordpressテーマ「Diver」に変更しました。

アフィリエイト・SEO対策済み WordPressテーマ「Diver」にテーマを変更！

2017.7.4

このブログはWordPressを使って運営していますが、リリース以来、ずっと気になっていたWordPressテーマで購入を検討していましたが、ついに購入しました。これまでWordPressテーマ「STORK（ストーク）を利用これまでは、OPENCAGEが開発したWordPressテーマ「ストー...

WordPressテーマ「Diver」は、さまざまなショートコードを搭載しています。

そこで今回は、豊富で便利なショートコードをご紹介します！

1 文字の装飾ショートコード
2 記事取得ショートコード
3 お知らせ・警告ショートコード
4 ボタン表示ショートコード
5 吹き出しバルーン
6 テキストを目立たせるバッジ
7 スライダートグル
8 横棒グラフ
9 レビュー用の星
10 マンガのような吹き出し
11 ショートコードの使い方は簡単！
12 さいごに

文字の装飾ショートコード

WordPressテーマ「Diver」では、下記のようにショートコードを入力することで簡単に文字の装飾が可能となっています。

マーカー

マーカーのショートコードを利用すると、蛍光ペンで線を引いたような装飾ができます。

ショートコード

文章の途中で<span class="hljs-selector-attr">[marker]</span>重要なポイント<span class="hljs-selector-attr">[/marker]</span>があればマーカーを引きます。

1	文章の途中で<span class="hljs-selector-attr">[marker]</span>重要なポイント<span class="hljs-selector-attr">[/marker]</span>があればマーカーを引きます。

ショートコードを利用した例

文章の途中で重要なポイントにマーカーを引くことができます。

打ち消し線

訂正したあとを残す時に使うショートコードです。

ショートコード

<s>これを訂正します</s>

1	<s>これを訂正します</s>

ショートコードを利用した例

~~これを訂正します~~

文字サイズ

文字サイズは9段階ショートコードで装飾できます。

badge name=”ショートコード” color=”red”][/badge]

[fontsize size="1"]文字サイズ１[/fontsize]
[fontsize size="2"]文字サイズ２[/fontsize]
[fontsize size="3"]文字サイズ３[/fontsize]
[fontsize size="4"]文字サイズ４[/fontsize]
[fontsize size="5"]文字サイズ５[/fontsize]
[fontsize size="6"]文字サイズ６[/fontsize]
[fontsize size="7"]文字サイズ７[/fontsize]
[fontsize size="8"]文字サイズ８[/fontsize]
[fontsize size="9"]文字サイズ９[/fontsize]

[fontsize size="1"]文字サイズ１[/fontsize]

[fontsize size="2"]文字サイズ２[/fontsize]

[fontsize size="3"]文字サイズ３[/fontsize]

[fontsize size="4"]文字サイズ４[/fontsize]

[fontsize size="5"]文字サイズ５[/fontsize]

[fontsize size="6"]文字サイズ６[/fontsize]

[fontsize size="7"]文字サイズ７[/fontsize]

[fontsize size="8"]文字サイズ８[/fontsize]

[fontsize size="9"]文字サイズ９[/fontsize]

ショートコードを利用した例

文字サイズ１
文字サイズ２
文字サイズ３
文字サイズ４
文字サイズ５
文字サイズ６
文字サイズ７
文字サイズ８
文字サイズ９

文字色の装飾

ショートコードを使って文字色をさまざな変更できます。

ショートコード

[color color="red"]文字の色[/color]
[color color="blue"]文字の色[/color]
[color color="yellow"]文字の色[/color]
[color color="gray"]文字の色[/color]
[color color="#33ff55"]文字の色[/color]

[color color="red"]文字の色[/color]

[color color="blue"]文字の色[/color]

[color color="yellow"]文字の色[/color]

[color color="gray"]文字の色[/color]

[color color="#33ff55"]文字の色[/color]

ショートコードを利用した例

文字の色
文字の色
文字の色
文字の色
文字の色

文字背景の装飾

ショートコードを使って文字の背景色をさまざな変更できます。

ショートコード

[bgcolor color="red"]文字の色[/bgcolor]
[bgcolor color="blue"]背景色[/bgcolor]
[bgcolor color="yellow"]背景色[/bgcolor]
[bgcolor color="gray"]背景色[/bgcolor]
[bgcolor color="#33ff55"]背景色[/bgcolor]

[bgcolor color="red"]文字の色[/bgcolor]

[bgcolor color="blue"]背景色[/bgcolor]

[bgcolor color="yellow"]背景色[/bgcolor]

[bgcolor color="gray"]背景色[/bgcolor]

[bgcolor color="#33ff55"]背景色[/bgcolor]

ショートコードを利用した例

文字の色
背景色
背景色
背景色
背景色

　上記のショートコードを複数組み合わせて表示できます。

記事取得ショートコード

ショートコードに記事のidを入力することで簡単に画像つきの内部リンクを表示できます。

ショートコード

[getpost id="8164"]

1	[getpost id="8164"]

※idは記事のid（数字）を入力します。

ショートコードを利用した例

アフィリエイト・SEO対策済み WordPressテーマ「Diver」にテーマを変更！

2017.7.4

お知らせ・警告ショートコード

文字を強調したいときに使えるショートコードです。

ショートコード

[aside]お知らせ[/aside]

1	[aside]お知らせ[/aside]

ショートコードを利用した例

　お知らせ

ショートコード

[aside type="warning"]警告の文章[/aside]

1	[aside type="warning"]警告の文章[/aside]

ショートコードを利用した例

　警告の文章。

ボタン表示ショートコード

ボタンは、ショートコード内にリンクを入れることででボタンになります。カラーも好みに変更可能です。

小さなボタン

ショートコード

[btn url="https://itdaisuki.com/" color="#F44336"]IT大好きトップページへ[/btn]

1	[btn url="https://itdaisuki.com/" color="#F44336"]IT大好きトップページへ[/btn]

ショートコードを利用した例

IT大好きトップページへ

大きなボタン

ショートコード

[btn url="https://itdaisuki.com/" type="big"]IT大好き！トップページへ[/btn]

1	[btn url="https://itdaisuki.com/" type="big"]IT大好き！トップページへ[/btn]

ショートコードを利用した例

IT大好き！トップページへ

吹き出しバルーン

ショートコード

[balloon]ここに吹き出しで表示したいテキストが入ります。タグやショートコードも通常と同じように使うことが出来て、デザインの幅が広がります。
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
[/balloon]

[balloon]ここに吹き出しで表示したいテキストが入ります。タグやショートコードも通常と同じように使うことが出来て、デザインの幅が広がります。

<ul>

</ul>

[/balloon]

ショートコードを利用した例

ここに吹き出しで表示したいテキストが入ります。タグやショートコードも通常と同じように使うことができます。

リスト
リスト
リスト

吹き出しの方向も変更可能

吹き出しの方向も上下左右にすることができます。

ショートコード

[balloon type="left"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type="right"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type="top"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type="bottom"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type="left"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type="right"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type="top"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

[balloon type="bottom"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon]

ショートコードを利用した例

ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。

テキストを目立たせるバッジ

参照リンクの前や、ちょっとだけ目立たせたいテキストの前にバッジを表示出来ます。

ショートコード

[badge name="参照" color="#f55"]<a href="https://itdaisuki.com/">IT大好き！</a>[/badge]

1	[badge name="参照" color="#f55"]<a href="https://itdaisuki.com/">IT大好き！</a>[/badge]

ショートコードを利用した例
参照

スライダートグル

隠していた要素をクリックして表示させることができるショートコードです。

ショートコード

[toggle title="ここにトグルの見出しを表示します。（クリックしてみよう！）"]このショートコードで囲んだ内容が隠されます。画像等も自由自在に記述可能です。[/toggle]

1	[toggle title="ここにトグルの見出しを表示します。（クリックしてみよう！）"]このショートコードで囲んだ内容が隠されます。画像等も自由自在に記述可能です。[/toggle]

ショートコードを利用した例

ここにトグルの見出しを表示します。（クリックしてみよう！）

このショートコードで囲んだ内容が隠されます。画像等も自由自在に記述可能です。

横棒グラフ

横棒でグラフのように表現することが可能になるショートコード。

ショートコード

１位：
[barchart width="98%" color="#f44336"]205,720[/barchart]２位：
[barchart width="50%" color="#d4c915"]49,848[/barchart]３位：
[barchart width="40%" color="#42bb6a"]34,433[/barchart]４位：
[barchart width="25%" color="#1566d4"]14,456[/barchart]５位：
[barchart width="23%" color="#71b9d8"]14,221[/barchart]

１位：

[barchart width="98%" color="#f44336"]205,720[/barchart]２位：

[barchart width="50%" color="#d4c915"]49,848[/barchart]３位：

[barchart width="40%" color="#42bb6a"]34,433[/barchart]４位：

[barchart width="25%" color="#1566d4"]14,456[/barchart]５位：

[barchart width="23%" color="#71b9d8"]14,221[/barchart]

ショートコードを利用した例
１位：
205,720２位：
49,848３位：
34,433４位：
14,456５位：
14,221

レビュー用の星

レビューでよく見る星がショートコードを表示できます。

ショートコード

[star score="3" size=""](3)
[star score="2.5" size=""](2.5)
[star score="3.8" size="big"](3.8)
[star score="4" size="big"](4)
[star score="2" size="small"](2)
[star score="4.3" size="small"](4.3)

[star score="3" size=""](3)

[star score="2.5" size=""](2.5)

[star score="3.8" size="big"](3.8)

[star score="4" size="big"](4)

[star score="2" size="small"](2)

[star score="4.3" size="small"](4.3)

ショートコードを利用した例

(3)

(2.5)

(3.8)

(4)

(2)

(4.3)

マンガのような吹き出し

下記のようにマンガのような吹き出しを表示できるショートコード。色や向きは好みに変更可能です。

ショートコード

[voice icon="https://itdaisuki.com/wp-content/uploads/2017/07/nogeira.png" name="ノゲイラ" type="left" color="blue"]このようにマンガ風に吹き出しを表示することができます。ストーリー仕立ての記事にしたいときに使えます。[/voice]

1	[voice icon="https://itdaisuki.com/wp-content/uploads/2017/07/nogeira.png" name="ノゲイラ" type="left" color="blue"]このようにマンガ風に吹き出しを表示することができます。ストーリー仕立ての記事にしたいときに使えます。[/voice]