テーマ専用「ショートコード」の表示サンプル

ショートコードの利用が可能です!

記事中に関連記事のリンクを画像つきで表示

記事内に表示させたい記事IDを入力するだけで、キレイなリンクがつくれます。

投稿ページ

マークアップ: 画像の配置に関する表示テスト

2013.1.10

投稿ページ(ラベルなし)

マークアップ: 画像の配置に関する表示テスト

2013.1.10

固定ページ(ラベルなし)

投稿ページの場合の書き方

[kanren postid="1177"]

ラベル無し関連記事の書き方

[kanren postid="1177" label="none"]

固定ページ(ラベルなし)の場合の書き方

[kanren pageid="2882" label="none"]

この他のオプションや表示例に関しては、別ページにて紹介しておりますのでそちらをご参照ください。

新機能あり(v1.2.3~)関連記事ショートコードの記載例(オプションも)

2カラム表示

HTMLやCSSなんてわからなくても2カラム表示が可能です。カラム全体を [colwrap]~~~[/colwrap] で囲むのをお忘れなく!

ページ 5

デスクトップとタブレットの時のみ2カラムになるよ

ページ 4

スマホでは1カラムだよ

書き方

[colwrap]
[col2]デスクトップとタブレットの時のみ2カラムになるよ[/col2]
[col2]スマホでは1カラムだよ[/col2]
[/colwrap]

3カラム表示

HTMLやCSSなんてわからなくても3カラム表示が可能です。カラム全体を[colwrap]~~~[/colwrap] で囲むのをお忘れなく!

ページ 2

1カラム目

デスクトップ&タブレットの時のみ3カラムになるよ

ページ 3

2カラム目

ショートコードを使うと簡単だよ

ページ 1

3カラム目

スマホでは1カラムだよ

書き方

[colwrap]
[col3]デスクトップ&タブレットの時のみ3カラムになるよ[/col3]
[col3]ショートコードを使うと簡単だよ[/col3]
[col3]スマホでは1カラムだよ[/col3]
[/colwrap]

補足説明

文書の下などに補足としてコメントをいれることができます。意外とこれがよく使う機能なんですよ。

補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。

書き方

[aside] 
補足説明をいれる
少し小さなフォントで少し目立つような補足説明を追加することができます。 
[/aside]

注意説明

文書の下などに補足として注意書きをいれることができます。意外とこれが便利なんですよ。

注意説明をいれる
少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。

書き方

[aside type="warning"]
注意説明をいれる
 少し小さなフォントでかなり目立つ感じで注意説明を追加することができます。 
[/aside]

シンプルな枠(※ストークのみ)

目立たせるほどでもないけど、シンプルに差別化したい場合に使える!シンプルな枠。

シンプルな枠で囲む
少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。

書き方

[aside type="boader"] 
シンプルな枠で囲む
少し小さなフォントでしれっと目立つ感じで補足説明を追加することができます。
[/aside]

ボタン

テキストリンクを下記ショートコードで囲むことで簡単にボタンリンクをつくることができます。ランディングページにリンクしたりアフィリエイトリンクを貼るのもおすすめです。デフォルトボタンはリンクカラーと同じ色になります。

[btn]デフォルトボタン(リンクテキストにする)[/btn]
[btn class="big"]デフォルトビッグボタン(リンクテキストにする)[/btn]
[btn class="simple"]シンプルボタン(リンクテキストにする)[/btn]
[btn class="simple big"]シンプルビッグボタン(リンクテキストにする)[/btn]

※目立つボタンの色はカスタマイザーにて変更できません。

[btn class="lightning"]目立つボタン(リンクテキストにする)[/btn]
[btn class="lightning big"]目立つビッグボタン(リンクテキストにする)[/btn]
[btn class="lightning bg"]背景付き目立つボタン(リンクテキストにする)[/btn]
[btn class="lightning big bg-yellow"]黄色い背景付き目立つビッグボタン(リンクテキストにする)[/btn]
[btn class="lightning big bg-yellow maru"]黄色い背景付き目立つ角丸ビッグボタン(リンクテキストにする)[/btn]

リッチボタン

[btn class="rich_yellow"]立体的なボタン(黄色)[/btn]
[btn class="rich_pink"]立体的なボタン(ピンク)[/btn]
[btn class="rich_orange"]立体的なボタン(オレンジ)[/btn]
[btn class="rich_green"]立体的なボタン(グリーン)[/btn]
[btn class="rich_blue"]立体的なボタン(ブルー)[/btn]

吹き出し機能

JUNICHIII
ビジュアルエディタ内でショートコードで吹き出しをつくることができます。
[voice icon="https://demo-opencage.com/stork/wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150x150.jpg" name="JUNICHIII" type="l"]ビジュアルエディタ内でショートコードで吹き出しをつくることができます。[/voice]
KICHIKICHI
アイコンは左右に配置することができます。

[voice icon="https://demo-opencage.com/stork/wp-content/uploads/2015/05/561bd446d73128e60f32951b26f3908a.jpeg" name="KICHIKICHI"="simple r"]アイコンは左右に配置することができます。[/voice]
JUNICHIII
もちろん通常通りリンクとかも貼れるし、リスト形式にすることもできます。

  • リスト1
  • リスト2
  • リスト3

簡単です。

[voice icon="https://demo-opencage.com/stork/wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150x150.jpg" name="JUNICHIII" type="l"]
もちろん通常通りリンクとかも貼れるし、リスト形式にすることもできます。
・リスト1
・リスト2
・リスト3
簡単です。[/voice]
JUNICHIII
吹き出しは文章を読みやすくしてくれるので効果的に使いたいですね。
また、サイトのキャラクターなどを登場させてブランディングに役立てることもできますね。
[voice icon="https://demo-opencage.com/stork/wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150x150.jpg" name="JUNICHIII" type="l"]吹き出しは文章を読みやすくしてくれるので効果的に使いたいですね。
 また、サイトのキャラクターなどを登場させてブランディングに役立てることもできますね。[/voice]
JUNICHIII
Facebook風のデザインにすることもできますし。
KICHIKICHI
わお!Facebook風!

JUNICHIII
LINE風のデザインにすることもできますね。
KICHIKICHI
わお!LINE風だ!

ながの
ふん。まだまだよ。
これくらいで図に乗らないで。

[voice icon="https://demo-opencage.com/stork/wp-content/uploads/2015/05/nagano2.png" name="ながの" type="l big"]ふん。まだまだよ。
 これくらいで図に乗らないで。[/voice]

アイコン周りの色を変更

ながの
アイコンの周りのボーダーの色を変えるテスト。

とりあえず黄色(type内に  icon_yellow  と追記)

ながの
アイコンの周りのボーダーの色を変えるテスト。

次は赤(type内に  icon_red  と追記)

ながの
アイコンの周りのボーダーの色を変えるテスト。

最後は青(type内に  icon_blue  と追記)

ながの
アイコンの周りのボーダーの色を変えるテスト。

やっぱりダメ押しの黒(type内に icon_black  と追記)

吹き出しのオプション

 オプション  説明
icon=”” しゃべっている人のアイコン画像を設定。URLを入力
name=”” しゃべっている人の名前を設定。テキストを入力
type=”” デザインタイプを選択。(複数設定可能。複数設定する場合は半角スペースをあけて入力していく)

    • アイコンを左 … l
    • アイコンを右 … r
    • アイコンを大きく … big
    • Facebook風… fb
  • LINE風… line

入力サンプル(アイコン左)

[voice icon="アイコンURL" name="名前" type="l fb"]コメント[/voice]

入力サンプル(アイコン右)

[voice icon="アイコンURL" name="名前" type="r fb"]コメント[/voice]

Widget内でも使えます。

ここで紹介したショートコード機能は、Widget内でも利用可能です。「テキスト」内にコードを書いてみてください。幸せになれます。

2カラムショートコードを使って広告を横並びにすることも可能です。

CTAウィジェットを表示可能です!

ここにリンクさせたい自分の商品やアフィリエイトリンクなどを表示させることが可能です。記事下のCTAは収益化においてかなり重要となるので効果的に使いたいところです。タグを追加してあげれば画像なども表示させることが可能!簡単にサイトの収益化の仕組みを導入することができます。

設定方法に関しては【外観 > ウィジェット > CTA設定】より!

ABOUTこの記事をかいた人

ライターのプロフィールが入ります。このライター情報を入れたくない場合は管理画面の ユーザー > あなたのプロフィールの「プロフィール情報」を未入力にすれば表示されません。逆に「プロフィール情報」を入力することでライター情報を表示できます。