昨日、記事にしましたが、WordPressテーマをアフィリエイト収益最大化!SEO対策済みWordpressテーマ「Diver」に変更しました。
WordPressテーマ「Diver」は、さまざまなショートコードを搭載しています。
そこで今回は、豊富で便利なショートコードをご紹介します！
目 次
文字の装飾ショートコード
WordPressテーマ「Diver」では、下記のようにショートコードを入力することで簡単に文字の装飾が可能となっています。
マーカー
マーカーのショートコードを利用すると、蛍光ペンで線を引いたような装飾ができます。
ショートコード|
1 |
文章の途中で<span class="hljs-selector-attr">[marker]</span>重要なポイント<span class="hljs-selector-attr">[/marker]</span>があればマーカーを引きます。 |
文章の途中で重要なポイントにマーカーを引くことができます。
打ち消し線
訂正したあとを残す時に使うショートコードです。
ショートコード|
1 |
<s>これを訂正します</s> |
これを訂正します
文字サイズ
文字サイズは9段階ショートコードで装飾できます。
badge name=”ショートコード” color=”red”][/badge]
|
1 2 3 4 5 6 7 8 9 |
[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] |
ショートコードを利用した例 文字サイズ１ 文字サイズ２ 文字サイズ３ 文字サイズ４ 文字サイズ５ 文字サイズ６ 文字サイズ７ 文字サイズ８ 文字サイズ９
文字色の装飾
ショートコードを使って文字色をさまざな変更できます。
ショートコード|
1 2 3 4 5 |
[color color="red"]文字の色[/color] [color color="blue"]文字の色[/color] [color color="yellow"]文字の色[/color] [color color="gray"]文字の色[/color] [color color="#33ff55"]文字の色[/color] |
文字背景の装飾
ショートコードを使って文字の背景色をさまざな変更できます。
ショートコード|
1 2 3 4 5 |
[bgcolor color="red"]文字の色[/bgcolor] [bgcolor color="blue"]背景色[/bgcolor] [bgcolor color="yellow"]背景色[/bgcolor] [bgcolor color="gray"]背景色[/bgcolor] [bgcolor color="#33ff55"]背景色[/bgcolor] |
記事取得ショートコード
ショートコードに記事のidを入力することで簡単に画像つきの内部リンクを表示できます。
ショートコード|
1 |
[getpost id="8164"] |
お知らせ・警告ショートコード
文字を強調したいときに使えるショートコードです。
ショートコード|
1 |
[aside]お知らせ[/aside] |
|
1 |
[aside type="warning"]警告の文章[/aside] |
ボタン表示 ショートコード
ボタンは、ショートコード内にリンクを入れることででボタンになります。カラーも好みに変更可能です。
小さなボタン
ショートコード|
1 |
[btn url="https://itdaisuki.com/" color="#F44336"]IT大好きトップページへ[/btn] |
大きなボタン
ショートコード|
1 |
[btn url="https://itdaisuki.com/" type="big"]IT大好き！トップページへ[/btn] |
吹き出しバルーン
ショートコード|
1 2 3 4 5 6 7 |
[balloon]ここに吹き出しで表示したいテキストが入ります。タグやショートコードも通常と同じように使うことが出来て、デザインの幅が広がります。 <ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> [/balloon] |
- リスト
- リスト
- リスト
吹き出しの方向も変更可能
吹き出しの方向も上下左右にすることができます。
ショートコード|
1 2 3 4 5 6 7 |
[balloon type="left"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon] [balloon type="right"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon] [balloon type="top"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon] [balloon type="bottom"]ここに吹き出しで表示したいテキストが入ります。typeで吹き出しの方向を書きます。[/balloon] |
テキストを目立たせるバッジ
参照リンクの前や、ちょっとだけ目立たせたいテキストの前にバッジを表示出来ます。
ショートコード|
1 |
[badge name="参照" color="#f55"]<a href="https://itdaisuki.com/">IT大好き！</a>[/badge] |
スライダートグル
隠していた要素をクリックして表示させることができるショートコードです。
ショートコード|
1 |
[toggle title="ここにトグルの見出しを表示します。（クリックしてみよう！）"]このショートコードで囲んだ内容が隠されます。画像等も自由自在に記述可能です。[/toggle] |
横棒グラフ
横棒でグラフのように表現することが可能になるショートコード。
ショートコード|
1 2 3 4 5 6 |
１位： [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] |
２位：
３位：
４位：
５位：
レビュー用の星
レビューでよく見る星がショートコードを表示できます。
ショートコード|
1 2 3 4 5 6 |
[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) |
マンガのような吹き出し
下記のようにマンガのような吹き出しを表示できるショートコード。色や向きは好みに変更可能です。
ショートコード|
1 |
[voice icon="https://itdaisuki.com/wp-content/uploads/2017/07/nogeira.png" name="ノゲイラ" type="left" color="blue"]このようにマンガ風に吹き出しを表示することができます。ストーリー仕立ての記事にしたいときに使えます。[/voice] |
ストーリー仕立ての記事にしたいときに使えます。
ショートコードの使い方は簡単！
これら紹介したショートコードを覚えたり、直接入力する必要は一切ありません。
WordPressテーマ「Diver」のテーマを利用するだけで、投稿画面にこれらショートコードが自動で表示されるので、使いたいショートコードをクリックして本文に挿入するだけで使うことができます。
さいごに
いかがでしょうか。
WordPressテーマ「Diver」には便利なショートコードが沢山搭載されています。
この他にも、記事にランキングや口こみなどを簡単に入れることができる機能が沢山搭載されています。
アフィリエイトで商品をアピールする際にランキングや口コミ機能があると便利ですよね。
これら機能については次回、記事にしたいと思います。
