p
このページでは、k^tpl-mb-example$ テンプレートを用いて、ボタンの追加の例を示します。

p
この例では、「晴れ」「曇り」「雨」ボタンの後に「雪」ボタンを追加します。

i
add-button-at-the-end
「雪」ボタンを追加

s
k^tpl-mb-example$ のHTMLファイルを、テキストエディタで開いでください。以下のようなソースコードが見つかります。

i
html-source-code
tpl-mb-example のHTMLソースコード

s
「晴れ」「曇り」「雨」のコードブロックのうち一つコピーして、新しいボタンのひな形を作ります。どれを選んでもいいのですが、この例では、「雨」のブロックを使用します。「雨」のブロックをコピーして、その下に貼り付けてください。

i
copy-code-block
「雨」のコードブロックをコピーして、||その下に貼り付ける

p
この時点で、k^tpl-mb-example$ テンプレートをブラウザで表示すると、以下のようになります。

i
duplicated-labels
途中結果

p
ボタンの数は増えていますが、「雨」が重複しています。これを次のステップで修正します。

s
貼り付けたコードブロック内の「雨」を「雪」に変更してください。

i
fix-label
ラベルを「雪」に変更する

p
ここで、k^tpl-mb-example$ テンプレートをブラウザで表示すると、以下のようになります。

i
button-added
途中結果

p
見た目は完璧です。ここで思わず「作業終了！」と宣言したくなるところですが、もう一つ重要なことが残っています。

p
「雨」ブロックのボタンIDと、「雪」ブロックのボタンIDが、同じになっています。

i
duplicated-ids
ボタンIDが重複している

p
マルチいいねでは、各ボタンがユニークなボタンIDを持つ必要があります。次のステップでこれを修正しましょう。

s
「雪」のコードブロックのボタンIDを k^yuki$ に変更してください。

i
fix-id
ボタンIDを「yuki」に変更する

p
これで「雪」ボタンの追加が完了しました。

info
今回の例では、k^yuki$ というボタンIDを用いましたが、他のボタンIDとぶつからない限りどのようなIDでもかまいません。使用できる文字は、英数字及びハイフン(-)です。

p
追加後の k^tpl-mb-example$ テンプレートは以下のリンクからダウンロードできます。

p
dl^dlfile?f=download-mb-example-after-add.zip|ダウンロード ( download-mb-example-after-add.zip )$


tpl
std