メシオプレス03専用ショートコードの使い方

メシオプレスシリーズ専用ショートコードの解説記事です。商品お渡し時にご案内しましたサンプルショートコードを、記事またはウィジェットにコピペしてして、編集して使ってください。編集の際は下記の内容を参考にしてください。

注意!

この記事は、メシオプレス03リリース当時に書かれたものです。最新の設定方法は購入者サイトで確認してください。

メシオプレス03で使用できる専用ショートコード
ランキング縦
ランキング横
特集枠
Q&Aショートコード
ボックス
レーティングマーク
メシオプレス01共通ショートコード
Googleカスタム検索ショートコード
吹き出しショートコード
PCスマホ切り替えショートコード

ランキング縦

[rank-table]



[/rank-table]
■使用可能パラメータ(半角スペースで記述していきます)
ranking rank=順位1~3
head=ヘッドコピー(タイトル、商品名など)
copy=魅力的なキャッチコピー
img=画像のURL(幅180px、高さ自由)
link_img=画像のリンク先URL
link=ボタンのリンク先URL
link_text=ボタンの文言(link_textを指定しない場合は「詳細はこちら」と表示されます。これを変更したいときのみlink_textを指定してください。)
img_link_target=画像リンクを別ウィンドウで開くかどうか
link_target=ボタンのリンク先を別ウィンドにするかどうか

img_link_target、link_targetパラメータは指定しなければデフォルトで「別ウィンドウ」で開きます。現在のウィンドウに表示させたい場合は

img_link_target=”self”
link_target=”self”

と指定してください。

ランキング横

■ランキングの番号
先頭から順番に自動的に振られます。ショートコード[r_box]は必ず3つ使ってください。

■ボックスの高さ
文章の長さで決まりますので、3つとも高さを揃えたい場合は文章量で調整してください。

■画像幅
必ず180px以下にしてWordpress標準の画像挿入機能で挿入してください。180px以上の画像を設定すると自動的に幅180pxに縮小して表示されます。

■使用可能パラメータ
r_box url=ボタンのリンク
url_target=ボタンのリンク先を別ウィンドにするかどうか
title=順位の横に表示するタイトル
img_url=画像に設定するリンク
img_url_target=画像リンクを別ウィンドウで開くかどうか

img_url_target、url_targetパラメータは指定しなければデフォルトで「別ウィンドウ」で開きます。現在のウィンドウに表示させたい場合は

img_url_target=”self”
url_target=”self”

と指定してください。

特集枠

3カラムで画像とテキスト、そしてリンクを設定できます。

■ボックスの高さ
文章の長さで決まりますので、3つとも高さを揃えたい場合は文章量で調整してください。ショートコード[f_box]は必ず3つ使ってください。

■button属性
button属性は省略可能です。省略した場合は「特集ページへ」と表示されます。文字数が多いとすべて表示されません。「8文字」以内推奨です。

■画像幅
画像は必ず幅180px以下にしてWordpress標準の画像挿入機能で挿入してください。180px以上の画像を設定すると自動的に幅180pxに縮小して表示されます。

■使用可能パラメータ
url=特集記事へのリンク
button=ボタンに表示するテキスト(省略可)

Q&Aショートコード

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。

Q&A形式の装飾をつけるショートコードです。
QとAのアイコン色は下記の4つから選択できます。

  • 赤色:red
  • 青色:blue
  • オレンジ色:orange
  • 緑色:green

色の指定を省略するとredが適用されます。

■使用可能パラメータ
q=質問内容
q_color=質問テキストの色(red、blue、orange、green)
a_color=答えテキストの色(red、blue、orange、green)
q_text_color=on/off(offにすると質問のテキストは黒色、onにするとq_colorに設定したアイコン色と同色になります。)

色:q_color=”red” a_color=”red”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。

色:q_color=”red” a_color=”blue” q_text_color=”on”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。


色:q_color=”blue” a_color=”red” q_text_color=”off”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。


色:q_color=”blue” a_color=”blue”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。


色:q_color=”blue” a_color=”orange” q_text_color=”on”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。


色:q_color=”orange” a_color=”orange”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。


色:q_color=”orange” a_color=”green” q_text_color=”on”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。


色:q_color=”green” a_color=”green”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。


色:q_color=”green” a_color=”blue” q_text_color=”on”

質問内容

質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。質問の答え。

ボックス

ボックス(囲み枠)のショートコードです。タイトルと色はパラメータで指定します。

ピンク

color=”pink”

ボックスのタイトル

ピンク枠+白色背景のボックスです。
このボックスのショートコードの設定は
[box color=”pink” title=”ボックスのタイトル”]
になります。

color=”pink-pink”

ボックスのタイトル

ピンク枠+ピンク色背景のボックスです。
このボックスのショートコードの設定は
[box color=”pink-pink” title=”ボックスのタイトル”]
になります。

color=”pink-gray”

ボックスのタイトル

ピンク枠+グレー背景のボックスです。
このボックスのショートコードの設定は
[box color=”pink-gray” title=”ボックスのタイトル”]
になります。

color=”pink-cream”

ボックスのタイトル

ボックスのタイトル
ピンク枠+クリーム色背景のボックスです。
このボックスのショートコードの設定は
[box color=”pink-cream” title=”ボックスのタイトル”]
になります。

ブルー

ブルー色ベースのショートコードのサンプルです。

color=”blue”

ボックスのタイトル

ブルー枠+白色背景のボックスです。
このボックスのショートコードの設定は
[box color=”blue” title=”ボックスのタイトル”]
になります。

color=”blue-blue”

ボックスのタイトル

ブルー枠+ブルー背景のボックスです。
このボックスのショートコードの設定は
[box color=”blue-blue” title=”ボックスのタイトル”]
になります。

color=”blue-gray”

ボックスのタイトル

ブルー枠+グレー背景のボックスです。
このボックスのショートコードの設定は
[box color=”blue-gray” title=”ボックスのタイトル”]
になります。

color=”blue-cream”

ボックスのタイトル

ボックスのタイトル
ブルー枠+クリーム色背景のボックスです。
このボックスのショートコードの設定は
[box color=”blue-cream” title=”ボックスのタイトル”]
になります。

グリーン

グリーン色ベースのショートコードのサンプルです。

color=”green”

ボックスのタイトル

グリーン枠+白背景のボックスです。
このボックスのショートコードの設定は
[box color=”green” title=”ボックスのタイトル”]
になります。

color=”green-green”

ボックスのタイトル

グリーン枠+緑背景のボックスです。
このボックスのショートコードの設定は
[box color=”green-green” title=”ボックスのタイトル”]
になります。

color=”green-gray”

ボックスのタイトル

グリーン枠+グレー背景のボックスです。
このボックスのショートコードの設定は
[box color=”green-gray” title=”ボックスのタイトル”]
になります。

color=”green-cream”

ボックスのタイトル

ボックスのタイトル
グリーン枠+クリーム色背景のボックスです。
このボックスのショートコードの設定は
[box color=”green-cream” title=”ボックスのタイトル”]
になります。

黒のショートコードのサンプルです。

color=”black”

ボックスのタイトル

黒枠+白背景のボックスです。
このボックスのショートコードの設定は
[box color=”black” title=”ボックスのタイトル”]
になります。

color=”black-gray”

ボックスのタイトル

黒枠+グレー背景のボックスです。
このボックスのショートコードの設定は
[box color=”black-gray” title=”ボックスのタイトル”]
になります。

color=”black-cream”

ボックスのタイトル

ボックスのタイトル
黒枠+クリーム色背景のボックスです。
このボックスのショートコードの設定は
[box color=”black-cream” title=”ボックスのタイトル”]
になります。

タイトルを指定しないボックス

タイトルを指定しない場合はただの四角い枠になります。

ピンク

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”pink” title”]
になります。


タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”blue” title”]
になります。


タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”green” title”]
になります。


タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”black”]
になります。

ピンク+グレー背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”pink-gray” title”]
になります。

青+グレー背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”blue-gray” title”]
になります。

緑+グレー背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”green-gray” title”]
になります。

黒+グレー背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”black-gray”]
になります。

ピンク+クリーム背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”pink-cream” title”]
になります。

青+クリーム背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”blue-cream” title”]
になります。

緑+クリーム背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”green-cream” title”]
になります。

黒+クリーム背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”black-cream”]
になります。

ピンク+ピンク背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”pink-pink” title”]
になります。

青+青背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”blue-blue” title”]
になります。

緑+緑背景

タイトルを設定しないボックスのサンプル。
このボックスのショートコードの設定は
[box color=”green-green” title”]
になります。

レーティングマーク

当初はメシオプレス02だけの機能にする予定でしたが、02ユーザーさんからの熱烈な要望により、03にも搭載しました。

・ランクの★の数はショートコードで指定します。rankの数字は1~5まで選べます。
・サイズはL、M、Sの3通り。何も指定しないとMサイズになります。
・小数点1~4までは「0」に切り捨て、小数点5~9は「0.5(アイコン半分)」としてカウントします。

Lサイズ
[star rank=”5″ size=”l”] → 星5個
[star rank=”1.6″ size=”l”] → 星1.6個

Mサイズ
[star rank=”5″]または[star rank=”5″ size=”m”]→ 星5個
[star rank=”4.5″]または[star rank=”4.5″ size=”m”]→ 星4.5個

Sサイズ
[star rank=”5″ size=”s”] → 星5個
[star rank=”2.4″ size=”s”] → 星2.4個

[smile rank=”5″ size=”l”] → 丸5個
[smile rank=”5″]または[smile rank=”5″ size=”m”]→ 丸5個
[smile rank=”5″ size=”s”] → 丸5個

 

メシオプレス01共通ショートコード

■茶枠

茶枠サンプル

 

■肌枠

肌枠サンプル

 

■ブレッド(チェックマーク)

  • ブレッド(チェックマーク)
  • ブレッド(チェックマーク)
  • ブレッド(チェックマーク)

 

■特典ボックス(左に画像、右に説明文)

■ここに特典タイトル

ここに特典の説明文。ここに特典の説明文。特典の説明文

■使用可能パラメータ
tokuten head=特典タイトル
img=画像のURL

Googleカスタム検索ショートコード

googleカスタム検索を1カラム固定ページに設置するためのショートコードです。同じページに検索窓と検索結果が表示されます。サイト内検索でGoogleカスタム検索を使っている場合にバッティングしますので、固定ページ1カラムしか使えません。下記のショートコードを使ってください。

[gcse id=”検索エンジンID”]

※カスタム検索のデザイン設定で「全幅」を選んでください。サイト全体のカスタム検索とは違います。[ ]は半角に直してください。

サンプル:旅行サイトを横断検索!

吹き出しショートコード

吹き出しでコメントを表示できます。吹き出しでコメントを表示できます。吹き出しでコメントを表示できます。吹き出しでコメントを表示できます。吹き出しでコメントを表示できます。

使い方

吹き出しに表示する画像は「avatar=””」で指定します。使いたい画像のURLを設定してください。画像のサイズは96×96 pxになります。違うサイズの画像も強制的にこのサイズに拡大・縮小して表示されます。

また、avatar 属性を指定しない場合は、ディスカッション設定で指定したアバターを表示します。このとき、ディスカッション設定で「アバターを表示する」のチェックを外すと何も表示されなくなるのでご注意ください。

任意の画像を表示

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

指定なし(グラバター自動表示)

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

吹き出しのタイトル

「title=””」で指定します。(titleが空白、または指定無しの場合は枠無しの吹き出しになります。

タイトルあり

吹き出しのタイトル

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

タイトルなし

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

吹き出しの色(4色)

「color=””」で指定します。
ピンク:colro=”pink”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

ブルー:color=”blue”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

グリーン:color=”green”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

黒:color=”black”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

吹き出しの背景色(4色)

「back_color=””」で指定します。背景色を指定した場合はフチの色は薄いグレーで統一されます。

水色:back_color=”aqua”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

黄緑色:back_color=”yellow-green”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

ピンク色:back_color=”pink”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

薄いグレー:back_color=”light-gray”

吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。吹き出しに入るコメント。

会話型吹き出し

lrの値によってアバターと吹き出しの場所を入れ替えて会話型にすることができます。指定しなければlr=”l”と同じになります。

・lr=”l”にするとアバターが左、吹き出しが右

ばあさんや、飯はまだかい?

・lr=”r”にするとアバターが右、吹き出しが左

おじいさん、ご飯は30分前に食べましたよ。

アバターの下に名前を表示

「name=””」で指定します。

おじいさん

そうかい・・・飯はもう食ったのか・・・。年取ると飯食ったことも忘れちまうだよ。フォッーフォッフォッ、フォゴフッ!ゴフッ!ゲフンゲフン!

・lr=”r”にするとアバターが右、吹き出しが左

おばあさん

お、おじいさん、大丈夫ですか?しっかり!

おじいさん

大丈夫じゃ。わしゃぁ、まだまだ死にゃーしねぇよ。

おばあさん

もう、おじいさんたら。ウフフフ

スマホ表示の吹き出し位置

スマホで見ると吹き出し部分が縦に間延びしてしまうため、画像の下に吹き出しを表示させたい場合は「type=””」で指定します。

・type=”tate”:スマホではアバターの下に吹き出し(吹き出しの左右位置はlrで指定した位置になります。)

●吹き出し縦

めしおさん

吹き出しに入るコメントが長文の場合は、PCサイトなら特に問題ないのですが、スマホから見ると縦に間延びした吹き出しで読みにくいと感じてしまうかも知れません。その場合はこのように吹き出しを画像の下に表示させることで、画面幅いっぱいに吹き出しを使うことができます。コメント量に合わせてお選びください。

ひよこかっつ

めしおさん、それは良いね。僕もSEOについて語り出すとついつい喋りすぎてしまうから、スマホから見ると細長~い吹き出しになってしまうからね。熱く語るときは吹き出しは下に表示させるバージョンも検討してみるよ。

●吹き出し横

めしおさん

吹き出しに入るコメントが長文の場合は、PCサイトなら特に問題ないのですが、スマホから見るとこのように縦に間延びした吹き出しで読みにくいと感じてしまうかも知れません。その場合は吹き出しを画像の下に表示させることで、画面幅いっぱいに吹き出しを使うことができます。コメント量に合わせてお選びください。

ひよこかっつ

めしおさん、それは良いね。僕もSEOについて語り出すとついつい喋りすぎてしまうから、スマホから見ると細長~い吹き出しになってしまうからね。熱く語るときは吹き出しは下に表示させるバージョンも検討してみるよ。

PC・スマホ切り替えショートコード

PCサイトにだけ表示させるコンテンツ、スマホサイトにだけ表示させるコンテンツの表示が可能になるショートコードです。これにより、PCサイトのユーザー、スマホサイトのユーザーそれぞれに最適なコンテンツを見せることができます。汎用性の高いショートコードなので、色々と活用してみてください。

使い方

PCのみ表示したいコンテンツは下記のようにショートコードで囲んでくさい。
[pc]
コンテンツ
[/pc]

スマホでのみ表示したい場合は
[sp]
コンテンツ
[/sp]

で囲みます。

※注意※
スマホでもPC表示に切り替えた場合は[pc]で囲んだコンテンツが表示されます。大括弧は「半角」で記入してください。

使用例

例えば、下記のようにPCサイトで300×250の画像を2つ並べて表示させている場合。

スマホから見ると、横に2つ並んで収まらずに縦に2つになってしまいます。

専用ショートコードを使用した場合

専用ショートコードを使えば、スマホでも2列表示が可能となります。(PCサイトの300×250の画像は[pc]で囲み、スマホサイトは150×125の画像を[sp]で囲む。サイズはiPhone5の場合)。

メシオプレス03設定一覧