<?php
// いいね！ボタン 環境設定 config.php 2018.12.12 /////////////////////////////////////////////////////
// 共通関係設定
//投票間隔時間（秒）。この間次の投票が出来ない（いたずら防止）。
$voteTime = 30;
//いいね！ボタンid(DIVタグdata-id要素)の省略時の文字列の生成方法 r：ランダム文字列 t：現在時刻yyyymmddhhmmss+2桁ランダム数字
$iineIDkind = "r";
//いいね！ボタンidのランダム文字列を生成する文字の種類。
$radomString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
//いいね！ボタンidの桁数。idをランダム文字列を生成するときの桁数。
$iineIDNumber = 12;
//いいね！ボタン設置ページから見たPHPのURL。clickCount-getCount-v2.jsをインクルードしたページから見たURL。
$getCountUrl = "iine-getCount-v2.php"; //iine-getCount-v2.phpのURL
$voteUrl = "iine-vote-v2.php"; //iine-vote-v2.phpのURL
// いいね！投票数カウンターファイルにデータベース MySQLを使用する設定
//MySQLサーバーのホスト名またはIP アドレス。通常、"localhost" を指定します。
$dbHost = 'localhost';
//MySQL サーバーのユーザー名（設定変更必須）
$dbUser = 'user_name';
//MySQL サーバーのパスワード（設定変更必須）openssl-crypt.phpを起動しパスワードを暗号化した値を設定します
$dbPass = 'lR6m3rCI4xVL19aeKaO7tw==';
//MySQL データベース名 （設定変更必須）
$dbName = 'database_name';
//いいね！ボタンのデータベーステーブル名
$dbTableName = 'table_name';
// いいね！投票数カウンターファイルにテキストファイルを使用する設定
//カウンターファイル名の拡張子。ファイル名はボタン設定DIVタグのdata-id属性で指定。
$txFileExt = ".count";
//カウンターファイルのパス（プルパス（絶対パス）を推奨）
$txFilePath = dirname(__FILE__) . "/log/";
//:::::::clickCount-getCount-v2.jsおよび clickCount-getCount.js とAjax通信 ::::::::::::::::::::::::::::::
if (!empty($_REQUEST['p'])) {
echo "$voteTime,$iineIDNumber,$radomString,$getCountUrl,$voteUrl,$iineIDkind";
}
// update: 2018.12.12
?>
//****************************************************************************************************//
//* いいね！ボタン Ver2PHP起動関数 clickCount-getCount-v2.js (UTF-8) 2918.12.12 *//
//****************************************************************************************************//
//***** いいね！ボタン 環境設定項目を config.phpより取得 **********************
var cofigUrl = "config.php"; //config.phpのURL。clickCount-getCount-v2.jsをインクルードしたページから見たURL。
var voteTime = 30; //投票間隔時間（秒）
var idStrNo = 12; //いいね！ボタンid文字列生成桁数（20桁以下）
var radomString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var getCountUrl = "iine-getCount-v2.php"; //iine-getCount-v2.phpのURL
var voteUrl = "iine-vote-v2.php"; //iine-vote-v2.phpのURL
var idKind = "r";
$.ajax({
url: cofigUrl, // config.php URL
type : "POST",
data: { p: "js" },
}).done(function(data){
var dataarr = data.split( "," ); console.log(dataarr);
voteTime = dataarr[0]; //投票間隔時間（秒）
idStrNo = dataarr[1]; //いいね！ボタンid ランダム文字列生成桁数（20桁以下）
radomString = dataarr[2];
getCountUrl = dataarr[3]; //iine-getCount-v2.phpのURL
voteUrl = dataarr[4]; //iine-vote-v2.phpのURL
idKind = dataarr[5]; //いいね！ボタンid省略時のid生成方法
}).fail(function(data){
;
});
//*********************************************
// ページ内すべてのDIV要素CLASS=IineVoteを取得する - ページONLOAD時起動される iine-getCount-v2.ph起動関数
$(".IineVote").each(function(i) {
console.log(i + ': ' + $(this).attr("data-id"));
// data属性取得
var id = ""; var lockid = ""; var countpos = ""; var time = ""; var title = ""; var file = "";
if($(this).data('id')){ id = $(this).data('id'); }
if($(this).data('lock')){ lockid = $(this).data('lock'); }
if($(this).data('count')){ countpos = $(this).data('count'); }
if($(this).data('time')){ time = $(this).data('time'); }
if($(this).data('title')){ title = $(this).data('title'); }
if($(this).data('file')){ file = $(this).data('file'); } //テキストファイル、Mysqlデータベース、？
if(file == ""){file = "txt";}
//ランダム文字列生成か現在時刻取得判定
var idGen = "";
if(idKind == "r" && id == ""){idGen = getRndStr(idStrNo); } //ランダム文字列生成
if(idKind == "t" && id == ""){idGen = getYmdms(); } //現在時刻取得
if(id == ""){
id = idGen;
$(this).data( 'id', idGen); //親DIV data-id に値設定 $('#fruit').attr('data-number', '02');
}
if(lockid == ""){
lockid = idGen;
$(this).data( 'lock', idGen); //親DIV data-id に値設定 $('#fruit').attr('data-number', '02');
}
//alert("data-id");
console.log( id + " = " + $(this).data('id') );
//DIV域生成
var regRight = /right/i;
var regLeft = /left/i;
var regTop = /top/i;
var regBottom = /bottom/i;
if( regLeft.test(countpos) || regTop.test(countpos) ){
// 親divの子要素の先頭にカウント表示用div追加
$('<div id="' + id + '" class="' + countpos + '"></div>').prependTo(this); } //?
if( regRight.test(countpos) || regBottom.test(countpos) ){
// 親divの子要素の最後にカウント表示用div追加
$('<div id="' + id + '" class="' + countpos + '"></div>').appendTo(this); } //?
// img要素をdiv要素で囲む
var target = "#" + id;
$(this).children('img').wrap('<div class="iineimgdiv" title="' + title + '"></div>');
//カウント吹き出しのCLASS名取得 top/right/bottom/left
if (regRight.test(countpos) || regLeft.test(countpos)) {
$(this).children( "div" ).css({ "float": "left" }); //, "margin": "2px" }); //, "display": "inline", "vertical-align": "bottom", "cursor": "pointer"
$(this).append("<div style='clear: both; display: block;'></div>");
}
var phpurl = getCountUrl;
//if(file == "txt" || file == "" ){ phpurl = "http://urbanqee.com/webutil/like/iine-getCount-v2.php"; } // 要修正 ******
//else if( file == "sql" ){phpurl = "http://urbanqee.com/webutil/like/iine-getCount-v2.php"; } // iine-getcount-db.php
var obj = $(target).parent("div"); //親DIV
$(obj).css({ "cursor": "pointer" });
$.ajax({
url: phpurl, // ソーシャルボタンカウント取得PHP if (re.test(str))
dataType: "json",
type: "post",
data: { countid: id, filekind: file },
}).done(function(data){
var res = data; console.log(res); //カウンター値
$(target).text(res); //カウンター値表示
}).fail(function(data){
var res = "error";
$(target).text(res);
console.log(data);
});
});
//ランダム文字列生成
function getRndStr(p){
//使用文字の定義
var str = radomString;
//桁数の定義
var len = p;
//ランダムな文字列の生成
var res = "";
for(var i=0;i<len;i++){
res += str.charAt(Math.floor(Math.random() * str.length));
}
return res;
}
//ランダム文字列生成2
function getRndStr2(p){
//使用文字の定義
var str = '0123456789';
//桁数の定義
var len = p;
//ランダムな文字列の生成
var res = "";
for(var i=0;i<len;i++){
res += str.charAt(Math.floor(Math.random() * str.length));
}
return res;
}
// 現在時刻取得 yyyymmddmmss+ランダム数字2桁
function getYmdms(){
var Nowymdhms = new Date();
var NowYear = Nowymdhms.getFullYear();
var NowMon = Nowymdhms.getMonth() + 1;
NowMon = ('0' + NowMon).slice(-2);
var NowDay = Nowymdhms.getDate();
NowDay = ('0' + NowDay).slice(-2);
var NowWeek = Nowymdhms.getDay();
var NowHour = Nowymdhms.getHours();
NowHour = ('0' + NowHour).slice(-2);
var NowMin = Nowymdhms.getMinutes();
NowMin = ('0' + NowMin).slice(-2);
var NowSec = Nowymdhms.getSeconds();
NowSec = ('0' + NowSec).slice(-2);
var Week = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
ranDom = getRndStr2(2);
t = NowYear+ '' + NowMon+''+NowDay+''+NowHour+''+NowMin+''+NowSec+''+ranDom;
return t;
//document.write(NowYear+"年"+NowMon+"月"+NowDay+"日("+Week[NowWeek]+") "+NowHour+":"+NowMin+":"+NowSec);
}
// iine-vote-v2.php起動関数 //////////////////////////////////////////////////
$(function(){
$('.IineVote').on('click' , function(){
$this = $(this);
var id = $this.data("id"); //識別用ID（重複NG）
var lockId = id; //2018.11.16 以下５Step 修正・追加 data-lock属性省略対応
if( $this.data("lock") ){
lockId = $this.data("lock"); //排他制御ID
if(lockId == ""){ lockId = id; }
}
//alert(lockId);
var numHtml = "#" + $this.data("id"); //カウント数を表示するHTML
var nowCount = Number($(numHtml).html()); //現在のカウント数
var newCount = nowCount + 1;
var timer = ""; //クッキータイマー 有効期限（投票を制限する秒数） time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
if( $this.data("time")){
timer = $this.data("time");
}
else{ timer = voteTime; } // 省略値 null
var file = ""; //カウンターファイル txt:テキストファイル sql:mysqlデータベースファイル
if ($this.data("file")){ file = $this.data("file") }
else{ file = "txt"; }
var phpurl = voteUrl;
//if( file == "txt" ){ phpurl = "http://urbanqee.com/webutil/like/iine-vote-v2.php";} // 要修正 *******
//else { phpurl = "http://urbanqee.com/webutil/like/iine-vote-v2.php"; } //iine-vote-dbt.php
//console.log(phpurl);
console.log(file);
$.ajax({
type : "POST",
url : phpurl,
data: {
"file_id" : id,
"count" : newCount, "lock_id" : lockId, "cookie_time" : timer, "file_kind" : file
}
}).done(function(data){
//送信先のvote.phpから、Completeが返ってきたらカウント更新
var dataarr = data.split( "," );
if(dataarr[0] == "Complete"){
var newCount = dataarr[1];
$(numHtml).html(newCount);
}else{
alert("連続投稿はできません！・・・時間をおいてやり直してください。");
}
}).fail(function(data) {
alert("エラー！投票数を取得できません。");
});
});
});
//****************************************************************************************************//
//* いいね！ボタンPHP起動関数 旧バージョンclickCount-getCount.jsのVer2対応版 2918.12.12 *//
//* 旧バージョンのいいね！ボタン設置HTMLコードに対応しています *//
//****************************************************************************************************//
//***** いいね！ボタン 環境設定項目を config.phpより取得 **********************
var cofigUrl = "config.php"; //config.phpのURL。clickCount-getCount-v2.jsをインクルードしたページから見たURL。
var voteTime = 30; //投票間隔時間（秒）
var idStrNo = 12; //いいね！ボタンid文字列生成桁数（20桁以下）
var getCountUrl = "iine-getCount-v2.php"; //iine-getCount-v2.phpのURL
var voteUrl = "iine-vote-v2.php"; //iine-vote-v2.phpのURL
$.ajax({
url: cofigUrl, // config.php URL
type : "POST",
data: { p: "js" },
}).done(function(data){
var dataarr = data.split( "," ); console.log(dataarr);
voteTime = dataarr[0]; //投票間隔時間（秒）
idStrNo = dataarr[1]; //いいね！ボタンid ランダム文字列生成桁数（20桁以下）
radomString = dataarr[2];
getCountUrl = dataarr[3]; //iine-getCount-v2.phpのURL
voteUrl = dataarr[4]; //iine-vote-v2.phpのURL
}).fail(function(data){
;
});
//*********************************************
// Ver2 vote.php起動関数 2018.3.11 - 2018.11.16 - 2018.12.12 //////////////////////////////////////////////////
$(function(){
$('.letsVote').on('click' , function(){
$this = $(this);
var id = $this.data("id"); //識別用ID（重複NG）
var lockId = id; //2018.11.16 以下５Step 修正・追加 data-lock属性省略対応
if( $this.data("lock") ){
lockId = $this.data("lock"); //排他制御ID
if(lockId == ""){ lockId = id; }
}
var numHtml = "#" + $this.data("id"); //カウント数を表示するHTML
var nowCount = Number($(numHtml).html()); //現在のカウント数
var newCount = nowCount + 1;
var timer = voteTime; //クッキーの有効期限（投票を制限する秒数） time()+60*60*24*30 はクッキーの有効期限を 30 日後にセット
var phpurl = voteUrl;
//console.log(phpurl);
$.ajax({
type : "POST",
url : phpurl,
data: {
"file_id" : id,
"count" : newCount, "lock_id" : lockId, "cookie_time" : timer, "file_kind" : "txt"
}
}).done(function(data){
//送信先のvote.phpから、Completeが返ってきたらカウント更新
var dataarr = data.split( "," );
if(dataarr[0] == "Complete"){
var newCount = dataarr[1];
$(numHtml).html(newCount);
}else{
alert("連続投稿はできません！・・・時間をおいてやり直してください。");
}
}).fail(function(data) {
$(numHtml).html('error');
});
});
});
// Ver2 getCount.php起動関数 2018.3.11 - 2018.12.12 /////////////////////////////////////////////////////
function getCountSet(id){
var target = "#" + id;
var phpurl = getCountUrl;
var obj = $(target).parent("div");
$(obj).css({ "cursor": "pointer" });
$.ajax({
url: phpurl, // ソーシャルボタンカウント取得PHP if (re.test(str))
dataType: "json",
data: { countid: id, filekind: "txt" },
}).done(function(data){
var res = data;
$(target).text(res);
var classname = $(target).attr("class"); //吹き出しのCLASS名取得 top/right/bottom/left
if (/right/.test(classname) || /left/.test(classname)) {
var obj = $(target).parent("div"); //親要素OBJ取得、全子要素にFloat属性設定、Float属性解除設定（以下３ステップ）
$(obj).children( "div" ).css({ "float": "left" }); //, "margin": "2px" }); //, "display": "inline", "vertical-align": "bottom", "cursor": "pointer"
$(obj).append("<div style='clear: both; display: block;'></div>");
}
}).fail(function(data){
var res = "error";
$(target).text(res);
console.log(data);
});
}
<p>・例１のアレンジ<br><small>カウント件数をボタン画像の右</small></p>
<DIV style="width:70px;" class="IineVote" data-id="ex01-r-red" data-count="balloonr_right">
<img class="IineImgR" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>
<p>・例２のアレンジ<br><small>カウント件数をボタン画像の下</small></p>
<DIV style="width:32px;" class="IineVote" data-id="ex02-b-red" data-count="balloonbl_bottom">
<img class="IineImgB" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>
<p>・例３のアレンジ<br><small>カウント件数をボタン画像の左</small></p>
<!-- left ex03 -->
<DIV style="width:70px;" class="IineVote" data-id="ex03-l-red" data-count="balloongr_left">
<img class="IineImgL" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>
<p>・例４のアレンジ<br><small>カウント件数をボタン画像の上</small></p>
<!-- top -->
<DIV style="width:32px;" class="IineVote" data-id="ex04-t-red" data-count="balloonor_top">
<img class="IineImgT" src="http://urbanqee.com/webutil/like/img/smile-yellow1.png" width=32>
</DIV>
/* カウント件数（赤吹き出し）をボタンの上に置く top */
/* ボタンの上に置く top */
.balloonr_top {
position: relative;
background: red;
border: 1px solid red;
font-size:11px;
text-align:center;
margin-top:5px; padding:3px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff;
}
.balloonr_top:after, .balloonr_top:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonr_top:after {
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 4px;
margin-left: -4px;
}
.balloonr_top:before {
border-color: rgba(255, 0, 0, 0);
border-top-color: red; /*#242a2e;*/
border-width: 5px;
margin-left: -5px;
}
/* ボタンの右に置く right */
.balloonr_right {
position: relative;
background: red;
border: 1px solid red;
font-size:11px;
text-align:center;
margin-bottom:5px; padding:4px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff;
}
.balloonr_right:after, .balloonr_right:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonr_right:after {
border-color: rgba(255, 0, 0, 0);
border-right-color: red;
border-width: 4px; /*5px;*/
margin-top: -4px; /*5px;*/
}
.balloonr_right:before {
border-color: rgba(255, 0, 0, 0);
border-right-color: red;
border-width: 5px; /*6px;*/
margin-top: -5px; /*6px;*/
}
/* ボタンの下に置く bottom */
/* bottom red */
.balloonr_bottom {
position: relative;
background: red;
border: 1px solid red;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
/*margin-top: 3px;*/
margin-bottom:5px; padding:3px;
border-radius: 5px; color: #ffffff;
}
.balloonr_bottom:after, .balloonr_bottom:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonr_bottom:after {
border-color: rgba(255, 0, 0, 0);
border-bottom-color: red;
border-width: 5px;
margin-left: -5px;
}
.balloonr_bottom:before {
border-color: rgba(255, 0, 0, 0);
border-bottom-color: red;
border-width: 6px;
margin-left: -6px;
}
/* ボタンの左に置く left */
.balloonr_left {
position: relative;
background: red;
border: 1px solid red;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
margin-bottom:5px; padding:4px;
border-radius: 5px; color: #ffffff;
}
.balloonr_left:after, .balloonr_left:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonr_left:after {
border-color: rgba(255, 0, 0, 0);
border-left-color: red;
border-width: 5px;
margin-top: -5px;
}
.balloonr_left:before {
border-color: rgba(255, 0, 0, 0);
border-left-color: red;
border-width: 6px;
margin-top: -6px;
}
/* カウント件数（橙吹き出し）をボタンの上に置く top */
.balloonor_top {
position: relative;
background: orange; /* 吹き出しの背景色-1/3 orange */
border: 1px solid black; /* 吹き出しの枠線色-1/3 black */
font-size:11px;
text-align:center;
margin-top:5px; padding:3px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff;
}
.balloonor_top:after, .balloonor_top:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonor_top:after {
border-color: rgba(255, 164, 0, 0); /* 吹き出しの背景色-2/3 orange */
border-top-color: orange; /* 吹き出しの背景色-3/3 orange */
border-width: 4px;
margin-left: -4px;
}
.balloonor_top:before {
border-color: rgba(0, 0, 0, 0); /* 吹き出しの枠線色-2/3 black */
border-top-color: #000000; /* 吹き出しの枠線色-3/3 black */
border-width: 5px;
margin-left: -5px;
}
/* カウント件数（吹き出し）をボタンの右に置く right */
.balloonor_right {
position: relative;
background: orange;
border: 1px solid orange; /*gray;*/ /*#0a0c0d;*/
font-size:11px;
text-align:center;
margin-bottom:5px; padding:4px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff; /*#808080;*/
}
.balloonor_right:after, .balloonor_right:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonor_right:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: orange; /* #ffffff;*/
border-width: 4px; /*5px;*/
margin-top: -4px; /*5px;*/
}
.balloonor_right:before {
border-color: rgba(10, 12, 13, 0);
border-right-color: orange; /* gray;*/ /*#0a0c0d;*/
border-width: 5px; /*6px;*/
margin-top: -5px; /*6px;*/
}
/* カウント件数（吹き出し）をボタンの下に置く bottom */
/* bottom blue */
.balloonor_bottom {
position: relative;
background: orange;
border: 1px solid orange;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
/*margin-top: 3px;*/
margin-bottom:5px; padding:3px;
border-radius: 5px; color: #ffffff;
}
.balloonor_bottom:after, .balloonor_bottom:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonor_bottom:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: orange;
border-width: 5px;
margin-left: -5px;
}
.balloonor_bottom:before {
border-color: rgba(220, 220, 220, 0);
border-bottom-color: orange;
border-width: 6px;
margin-left: -6px;
}
/* カウント件数（吹き出し）をボタンの左に置く left */
.balloonor_left {
position: relative;
background: orange;
border: 1px solid orange;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
margin-bottom:5px; padding:4px; /*margin-right:6px; margin-top:5px;*/
border-radius: 5px; color: #ffffff;
}
.balloonor_left:after, .balloonor_left:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonor_left:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: orange;
border-width: 5px;
margin-top: -5px;
}
.balloonor_left:before {
border-color: rgba(220, 220, 220, 0);
border-left-color: orange;
border-width: 6px;
margin-top: -6px;
}
/* カウント件数（緑吹き出し）をボタンの上に置く top */
/* ボタンの上に置く top */
.balloongr_top {
position: relative;
background: green;
border: 1px solid green;
font-size:11px;
text-align:center;
margin-top:5px; padding:3px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff;
}
.balloongr_top:after, .balloongr_top:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloongr_top:after {
border-color: rgba(0, 128, 0, 0);
border-top-color: green;
border-width: 4px;
margin-left: -4px;
}
.balloongr_top:before {
border-color: rgba(0, 128, 0, 0);
border-top-color: green;
border-width: 5px;
margin-left: -5px;
}
/* ボタンの右に置く right */
.balloongr_right {
position: relative;
background: green;
border: 1px solid green;
font-size:11px;
text-align:center;
margin-bottom:5px; padding:4px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff;
}
.balloongr_right:after, .balloongr_right:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloongr_right:after {
border-color: rgba(0, 128, 0, 0);
border-right-color: green;
border-width: 4px;
margin-top: -4px;
}
.balloongr_right:before {
border-color: rgba(0, 128, 0, 0);
border-right-color: green;
border-width: 5px;
margin-top: -5px;
}
/* ボタンの下に置く bottom */
/* bottom blue */
.balloongr_bottom {
position: relative;
background: green;
border: 1px solid green;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
/*margin-top: 3px;*/
margin-bottom:5px; padding:3px;
border-radius: 5px; color: #ffffff;
}
.balloongr_bottom:after, .balloongr_bottom:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloongr_bottom:after {
border-color: rgba(0, 128, 0, 0);
border-bottom-color: green;
border-width: 5px;
margin-left: -5px;
}
.balloongr_bottom:before {
border-color: rgba(0, 128, 0, 0);
border-bottom-color: green;
border-width: 6px;
margin-left: -6px;
}
/* ボタンの左に置く left */
.balloongr_left {
position: relative;
background: green;
border: 1px solid green;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
margin-bottom:5px; padding:4px;
border-radius: 5px; color: #ffffff;
}
.balloongr_left:after, .balloongr_left:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloongr_left:after {
border-color: rgba(0, 128, 0, 0);
border-left-color: green;
border-width: 5px;
margin-top: -5px;
}
.balloongr_left:before {
border-color: rgba(0, 128, 0, 0);
border-left-color: green;
border-width: 6px;
margin-top: -6px;
}
/* カウント件数（青吹き出し）をボタンの上に置く top */
/* ボタンの上に置く top */
.balloonbl_top {
position: relative;
background: blue;
border: 1px solid blue;
font-size:11px;
text-align:center;
margin-top:5px; padding:3px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff;
}
.balloonbl_top:after, .balloonbl_top:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonbl_top:after {
border-color: rgba(0, 0, 255, 0);
border-top-color: blue;
border-width: 4px;
margin-left: -4px;
}
.balloonbl_top:before {
border-color: rgba(0, 0, 255, 0);
border-top-color: blue;
border-width: 5px;
margin-left: -5px;
}
/* ボタンの右に置く right */
.balloonbl_right {
position: relative;
background: blue;
border: 1px solid blue;
font-size:11px;
text-align:center;
margin-bottom:5px; padding:4px;
font-family: arial, "ＭＳ ゴシック",sans-serif;
border-radius: 5px; color: #ffffff;
}
.balloonbl_right:after, .balloonbl_right:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonbl_right:after {
border-color: rgba(0, 0, 255, 0);
border-right-color: blue;
border-width: 4px;
margin-top: -4px;
}
.balloonbl_right:before {
border-color: rgba(0, 0, 255, 0);
border-right-color: blue;
border-width: 5px;
margin-top: -5px;
}
/* ボタンの下に置く bottom */
/* bottom blue */
.balloonbl_bottom {
position: relative;
background: blue;
border: 1px solid blue;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
/*margin-top: 3px;*/
margin-bottom:5px; padding:3px;
border-radius: 5px; color: #ffffff;
}
.balloonbl_bottom:after, .balloonbl_bottom:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonbl_bottom:after {
border-color: rgba(0, 0, 255, 0);
border-bottom-color: blue;
border-width: 5px;
margin-left: -5px;
}
.balloonbl_bottom:before {
border-color: rgba(0, 0, 255, 0);
border-bottom-color: blue;
border-width: 6px;
margin-left: -6px;
}
/* ボタンの左に置く left */
.balloonbl_left {
position: relative;
background: blue;
border: 1px solid blue;
font-size:11px;
text-align:center;
font-family: arial, "ＭＳ ゴシック",sans-serif;
margin-bottom:5px; padding:4px;
border-radius: 5px; color: #ffffff;
}
.balloonbl_left:after, .balloonbl_left:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.balloonbl_left:after {
border-color: rgba(0, 0, 255, 0);
border-left-color: blue;
border-width: 5px;
margin-top: -5px;
}
.balloonbl_left:before {
border-color: rgba(0, 0, 255, 0);
border-left-color: blue;
border-width: 6px;
margin-top: -6px;
}
1.1 使用ファイル
からダウンロード。
like ← メインフォルダ +
img1.png ← ボタンicon | + ・・・ | +
