メシオプレス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つ枠を並べることができます。
  特集ページへのリンクも設定できます。

  スマホ8文字まで
• 

  特集枠
  特集ページの紹介用に画像付きで横に3つ枠を並べることができます。
  特集ページへのリンクも設定できます。

  特集ページへ
• 

  特集枠
  特集ページの紹介用に画像付きで横に3つ枠を並べることができます。
  特集ページへのリンクも設定できます。

  特集ページへ

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”

color=”pink-pink”

color=”pink-gray”

color=”pink-cream”

ブルー

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

color=”blue”

color=”blue-blue”

color=”blue-gray”

color=”blue-cream”

グリーン

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

color=”green”

color=”green-green”

color=”green-gray”

color=”green-cream”

黒

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

color=”black”

color=”black-gray”

color=”black-cream”

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

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

ピンク

青

緑

黒

ピンク＋グレー背景

青＋グレー背景

緑＋グレー背景

黒＋グレー背景

ピンク＋クリーム背景

青＋クリーム背景

緑＋クリーム背景

黒＋クリーム背景

ピンク＋ピンク背景

青＋青背景

緑＋緑背景

レーティングマーク

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

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

Lサイズ
［star rank=”5″ size=”l”］　→　
［star rank=”1.6″ size=”l”］　→　

Mサイズ
［star rank=”5″］または［star rank=”5″ size=”m”］→　
［star rank=”4.5″］または［star rank=”4.5″ size=”m”］→　

Sサイズ
［star rank=”5″ size=”s”］　→　
［star rank=”2.4″ size=”s”］　→　

［smile rank=”5″ size=”l”］　→　
［smile rank=”5″］または［smile rank=”5″ size=”m”］→　
［smile rank=”5″ size=”s”］　→　

 

メシオプレス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”にするとアバターが右、吹き出しが左

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

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

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

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

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

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

●吹き出し縦

●吹き出し横

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設定一覧