このページでは、tpl-mb-example テンプレートを用いて、ボタンの追加の例を示します。
この例では、「晴れ」「曇り」「雨」ボタンの後に「雪」ボタンを追加します。
「雪」ボタンを追加
1 |
tpl-mb-example のHTMLファイルを、テキストエディタで開いでください。以下のようなソースコードが見つかります。 |
tpl-mb-example のHTMLソースコード
2 |
「晴れ」「曇り」「雨」のコードブロックのうち一つコピーして、新しいボタンのひな形を作ります。どれを選んでもいいのですが、この例では、「雨」のブロックを使用します。「雨」のブロックをコピーして、その下に貼り付けてください。 |
「雨」のコードブロックをコピーして、その下に貼り付ける
この時点で、tpl-mb-example テンプレートをブラウザで表示すると、以下のようになります。
途中結果
ボタンの数は増えていますが、「雨」が重複しています。これを次のステップで修正します。
3 |
貼り付けたコードブロック内の「雨」を「雪」に変更してください。 |
ラベルを「雪」に変更する
ここで、tpl-mb-example テンプレートをブラウザで表示すると、以下のようになります。
途中結果
見た目は完璧です。ここで思わず「作業終了！」と宣言したくなるところですが、もう一つ重要なことが残っています。
「雨」ブロックのボタンIDと、「雪」ブロックのボタンIDが、同じになっています。
ボタンIDが重複している
マルチいいねでは、各ボタンがユニークなボタンIDを持つ必要があります。次のステップでこれを修正しましょう。
4 |
「雪」のコードブロックのボタンIDを yuki に変更してください。 |
ボタンIDを「yuki」に変更する
これで「雪」ボタンの追加が完了しました。
| 今回の例では、yuki というボタンIDを用いましたが、他のボタンIDとぶつからない限りどのようなIDでもかまいません。使用できる文字は、英数字及びハイフン(-)です。 |
追加後の tpl-mb-example テンプレートは以下のリンクからダウンロードできます。