MT カスタムフィールドの使い方「ラジオボタン編」

MT カスタムフィールドの使い方「ラジオボタン編」

前回のMT カスタムフィールドの使い方「チェックボックス編」に引き続き今回はラジオボタンの使い方を紹介したいと思います。

…ここからが続き

カスタムフィールド ラジオボタンの使用方法

カスタムフィールド作成

まずはカスタムフィールの作成から行いましょう。

ラジオボタンの使用方法 1

設定 → カスタムフィールドから作成出来ます。

ラジオボタンの使用方法 2

どこのフィールドに作成するか選びます。(今回はブログ記事に作成)

ラジオボタンの使用方法 3

カスタムフィールドの種類を選びます。

ラジオボタンの使用方法 4

オプションにラジオボタンの名前を入力。オプション事をカンマ(,)で区切って下さいね。
(今回はサンプルとして SS,S,M,L,LL と記入しました。)

ラジオボタンの使用方法 5

これで「保存」を押すとブログ記事にラジオボタンのフィールドが作成されています。

ブログ記事

作成したてだと表示されていないと思いますので、ブログ記事の右にある「表示オプション」をクリックし、先ほど作成したフィールドを表示させて下さい。
すると下記画像のような画面になります。

ラジオボタンの使用方法 6

ちなみにラジオボタンを横並びにするには、mt-static/css/main.css の最後に下記CSSを追記して下さい。

.custom-field-radio-list li	{
  float:left;
  margin-right:5px;
}

すると管理画面上では下記画像の用になります。

ラジオボタンの使用方法 7

それで本題はここからなんですが、このラジオボタンを選択した際に振り分ける為のソースについて書いておきたいと思います。

ちなみにフィールドを作成した時に出来たソースをそのまま使うとすると

<MTIfNonEmpty tag="radio">
ラジオボタン: <MTradio>
</MTIfNonEmpty>

MTradio の部分がラジオボタンを作成した際にオプションに記入したテキストが表示されるようになります。

今回のサンプルでは SS S M L LL と設定したので、仮に SS にチェックして保存した場合
上記デフォルトのソースを使った場合「ラジオボタン: SS」と表示されます。

まぁ~場合によってはこのままでも使えるとは思うですが、もっと使いがってが良いように振り分けのソースを書いておきます。

<MTSetVarBlock name="size"><MTradio></MTSetVarBlock>

<MTIf name="size" eq="SS">
  SSの場合に実行
</MTIf>

<MTIf name="size" eq="S">
  Sの場合に実行
</MTIf>

<MTIf name="size" eq="M">
  Mの場合に実行
</MTIf>

<MTIf name="size" eq="L">
  Lの場合に実行
</MTIf>

<MTIf name="size" eq="LL">
  LLの場合に実行
</MTIf>

name に入っている名前は何でも大丈夫です。全部統一して記述して下さいね。

後 eq にラジオボタンを作成した際にオプションに記入したテキストをそれぞれに入れて下さい。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article