マイぺージの"いいね!ボタン"を設置する(デモ)
~13例8パターン27サンプルデモ~

1.いいね!カウントに吹き出し付き

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

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

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

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

2.いいね!カウントに吹き出しなし

・例5
カウント件数、右

・例6
カウント件数、下

・例7
カウント件数、左

>

・例8
カウント件数、上

・例9
カウント件数、中

3.複数いいね!ボタンのグループ化。いずれかの1つのみ投票できます(二者択一)。

・例10.このデモページについてご感想を・・・そだね!? いまいち!?


4.複数いいね!ボタンのグループ化。いずれかの1つのみ投票できます(複数択一)。

・例11.人気投票一好きな女性を1人だけ選んでください!

・女性Aさん(カウント件数、中)

・女性Bさん(カウント件数、中)

・女性Cさん(カウント件数、中)

5.カウント件数をボタン画像のどこにでも、自在に配置する(例12)

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

・例12-1
カウント件数をボタン画像の右方向
(top: 35%; right: 0%;)

・例12-2
カウント件数をボタン画像の下方向
(top: 60%; right: 35%;)

・例12-3
カウント件数をボタン画像の左方向
(top: 50%; right: 80%;)

・例12-4
カウント件数をボタン画像の上方向
(top: 12%; right: 40%;)

6.いいね!カウントにカラー吹き出し付き背景に赤、青、緑、橙の4サンプル(例1~例4のアレンジ)

172
72

7.いいね!カウントに風船のようなカラー丸型吹き出し付き4サンプル(例1~例4のアレンジ)

172
72

  (注)この丸型吹き出しの大きさは、直径32ピクセルです。したがい、表示できる数字の桁数は、3から4桁以内になります。

8.いいね!カウントに斜めカラー丸型吹き出し付き4サンプル(例13)

72
72

  (注)この丸型吹き出しの大きさは、直径32ピクセルです。したがい、表示できる数字の桁数は、3から4桁以内になります。



表 - いいね!ボタン設置13例─27サンプル( ()内の数字はサンプルデモ数 )
カウント件数の表示位置カウント件数吹き出し付き
(1ボタン)
カウント件数吹き出し無し
(1ボタン)
カウント件数吹き出し無し
(複数ボタンの択一式)
表示位置
固定
カウント件数をボタン画像の右例1 (3)例5 (1)-
カウント件数をボタン画像の下例2 (3)例6 (1)例10 (1)
カウント件数をボタン画像の左例3 (3)例7 (1)-
カウント件数をボタン画像の上例4 (3)例8 (1)-
カウント件数をボタン画像の左上、右上、左下、右下例13 (4)--
表示位置
任意
カウント件数をボタン画像の中 - 例9 (1)例11 (1)
カウント件数をボタン画像のどこにでも - 例12 (4)

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



 最終更新日:2018.3.29 - 2018.4.21
メール mailto:  掲示板