マイぺージの"いいね！ボタン"を設置する（デモ）
～１３例８パターン２７サンプルデモ～

すべてのボタンが動作（カウントアップ）します・・・ １｜２｜３｜４｜５｜６｜７｜８

１．いいね！カウントに吹き出し付き

・例１ カウント件数をボタン画像の右

・例２ カウント件数をボタン画像の下

・例３ カウント件数をボタン画像の左

・例４ カウント件数をボタン画像の上

２．いいね！カウントに吹き出しなし

・例５ カウント件数、右

・例６ カウント件数、下

・例７ カウント件数、左 >

・例８ カウント件数、上

・例９ カウント件数、中

３．複数いいね！ボタンのグループ化。いずれかの１つのみ投票できます（二者択一）。

・例１０．このデモページについてご感想を・・・そだね！？　いまいち！？

４．複数いいね！ボタンのグループ化。いずれかの１つのみ投票できます（複数択一）。

・例１１．人気投票一好きな女性を１人だけ選んでください！

・女性Aさん（カウント件数、中）

・女性Bさん（カウント件数、中）

・女性Cさん（カウント件数、中）

５．カウント件数をボタン画像のどこにでも、自在に配置する（例１２）

例１２は、「例９カウント件数、中」と同様に、カウント件数DIVタグのCSSでtop, left, bottom, rightの属性でカウント件数を好みの位置に設定できます。

・例１２-１ カウント件数をボタン画像の右方向 (top: 35%; right: 0%;) ・例１２-２ カウント件数をボタン画像の下方向 (top: 60%; right: 35%;) ・例１２-３ カウント件数をボタン画像の左方向 (top: 50%; right: 80%;) ・例１２-４ カウント件数をボタン画像の上方向 (top: 12%; right: 40%;)

６．いいね！カウントにカラー吹き出し付き背景に赤、青、緑、橙の４サンプル（例１～例４のアレンジ）

172

72

７．いいね！カウントに風船のようなカラー丸型吹き出し付き４サンプル（例１～例４のアレンジ）

172

72

  （注）この丸型吹き出しの大きさは、直径３２ピクセルです。したがい、表示できる数字の桁数は、３から４桁以内になります。

８．いいね！カウントに斜めカラー丸型吹き出し付き４サンプル（例１３）

72

72

  （注）この丸型吹き出しの大きさは、直径３２ピクセルです。したがい、表示できる数字の桁数は、３から４桁以内になります。

≫ いいね！ボタン設置方法 解説ページ

最終更新日：2018.3.29 - 2018.4.21

メール mailto：

掲示板