このリポジトリは2023-09-09にアーカイブされています。 ファイルの閲覧とクローンは可能ですが、プッシュ、イシューの作成、プルリクエストはできません。
hozonsite.php/1644932818/www.itmedia.co.jp/business/articles/2111/24/socialbutton.css?202001221022

573 行
17 KiB
Plaintext

/*=====================================================================*/
/* SOCIAL BUTTON */
/*=====================================================================*/
.masterSocialbutton {
clear:both;
position:relative;
margin:0 0 10px;
}
.msbOut {
}
.msbIn {
width:100%;
border-collapse:collapse;
}
.msbIn .msbBtn,
.msbIn .msbGroup {
font-size:9px !important;
line-height:13px !important;
padding:1px 2px;
border:3px solid #FFF;
background:#EEE;
}
.masterSocialbuttonBlack .msbIn .msbBtn,
.masterSocialbuttonBlack .msbIn .msbGroup {
border:3px solid #000;
background:#000;
}
.msbIn1 .msbBtn,
.msbIn1 .msbGroup {
font-size:11px;
line-height:15px;
border-top:none !important;
}
.msbBtn a {
font-size:11px !important;
line-height:13px !important;
border:none;
cursor:pointer;
text-align:left;
text-decoration:none;
}
.msbBtn a:link,
.msbBtn a:visited {
color:#000 !important;
text-decoration:none !important;
}
.msbBtn a:hover {
color:#C00 !important;
text-decoration:none !important;
}
.msbGroup .msbBtn {
border:none !important;
background:transparent !important;
}
.msbGroupOut {
position:relative;
}
.msbGroupIn {
position:absolute;
opacity:0;
margin-top:10px;
visibility:hidden;
-webkit-transition-property:opacity,margin-top,visibility;
-moz-transition-property:opacity,margin-top,visibility;
transition-property:opacity,margin-top,visibility;
-webkit-transition-duration:300ms;
-moz-transition-duration:300ms;
transition-duration:300ms;
-webkit-transition-timing-function:ease-out;
-moz-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.msbGroupIn.msbGroupInBlock {
opacity:1;
margin-top:0;
visibility:visible;
z-index:999;
}
.msbGroupUnder .msbGroupIn {
padding:5px;
background-color:#FFF;
background-color:rgba(255,255,255,0.7);
border:1px solid rgba(204,204,204,0.7);
width:200px;
z-index:100;
right:0;
}
.msbGroupUpper .msbGroupIn {
padding:5px;
background-color:#FFF;
background-color:rgba(255,255,255,0.7);
border:1px solid rgba(204,204,204,0.7);
width:200px;
z-index:100;
right:0;
bottom:20px;
}
.msbGroupBlack .msbGroupIn {
background-color:rgba(102,102,102,0.7);
}
.msbGroupBlack .msbGroupIn:after {
border-bottom:10px solid rgba(102,102,102,0.7);
}
.msbGroupIn .msbBtn {
font-size:11px;
line-height:15px;
}
/*
.msbBtnLikebutton iframe {height:20px !important;}
.msbBtnLikebuttonv iframe {height:61px !important;}
.msbBtnSharebuttonv iframe {height:61px !important;}
.msbBtnLikesharebutton iframe {width:155px !important;height:20px !important;}
*/
.msbBtnGoogleplusone > div {width:60px !important;}
.msbBtnGoogleplusonem > div {width:70px; !important;}
.msbBtnPocketbuttonc >iframe {width:60px;}
.msbBtnMixicheck span iframe {height:18px !important;}
.msbBtnPocketbutton > .pocket-btn {height:20px !important;}
.msbBtnPocketbuttonc > .pocket-btn {height:20px !important;}
.msbBtnPocketbutton > .pocket-btn iframe {width:60px !important;}
.msbBtnPocketbuttonc > .pocket-btn iframe {width:110px !important;}
.msbBtnOnetopibutton a {
display:block;
width:48px;
height:18px;
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnOnetopibutton.png) no-repeat 0 0;
text-indent:-9999px;
}
.msbBtn .msbBtntext {
display:block;
border:1px solid #CCC;
border-radius:3px;
padding:2px 3px 2px 18px;
background-size:12px;
background-color:#FFF;
background-position:3px center;
background-repeat:no-repeat;
}
.msbGroup .msbBtntext {
background-color:#F8F8F8;
}
.msbGroupIn .msbBtntext {
background-color:#FFF;
}
.msbBtnSocialbutton a {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAVdEVYdENyZWF0aW9uIFRpbWUAMi8xNy8wOCCcqlgAAAQRdEVYdFhNTDpjb20uYWRvYmUueG1wADw/eHBhY2tldCBiZWdpbj0iICAgIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDQuMS1jMDM0IDQ2LjI3Mjk3NiwgU2F0IEphbiAyNyAyMDA3IDIyOjExOjQxICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4YXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eGFwOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzM8L3hhcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhhcDpDcmVhdGVEYXRlPjIwMDgtMDItMTdUMDI6MzY6NDVaPC94YXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhhcDpNb2RpZnlEYXRlPjIwMDgtMDMtMjRUMTk6MDA6NDJaPC94YXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDUdUmQAAAGaSURBVDiNlZGxS1tRFMZ/t8QxvBdxe2lNC0qlsTy59w/I4ir5Bx7G2Q7i4txFcGkVsr+Q4mwXB7Ggg4NggkaHV0RI2kGIi0kcIsF4O7y85L0Qoj3T4Xzf+e53vyN4ZUkpTcAGLsrlciOYv3nlsg1UgSOgKqXM/pcA4AJmrzeB7wEQ61OcfKpHzAA/gRV+fAms2kOCqVEO3EklMx9yy5if57PhV4DjIYHaKIGMmU6jtcZMpwGyIWwNuLUsC+AhjMVCJHS3iwaeOx2AftKlUukiRIsrpRa01pVhB9v3lQrt9iOt62uAAkCQ+H5dsF8XABiG4SqlcsMOvjYur7KIiRSXVyfAjpQyF4/HXYC77oCYSCQAXKUUvqR/gT2Sb22mU/Cnht5ciqS29denbrzTkbnAydvAETOzJpNTgzxWF1ivCsbVt/eaGHDO3CewktBqRQj1p7H7QJCBlRwJ7s4M7C7+9t0cfox+wRdoNsEwIoAo3vjNrwN0cTXixnEcADzPIwbkODstvGQ1fAXP84K2MD6lXmmtI76FECIY/QMwqHwmKeNUfwAAAABJRU5ErkJggg==);
}
.msbBtnGooglebookmark a {
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnGooglebookmark.gif);
}
.msbBtnYahoobookmark a {
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnYahoobookmark.gif);
}
.msbBtnHatenabookmark a {
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnHatenabookmark.gif);
}
.msbBtnKwout a {
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnKwout.gif);
}
.msbBtnMail a {
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnMail.gif);
}
.msbBtnAlertbutton a {
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnAlert.gif);
}
.msbBtnAlertseries a {
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnAlertseries.gif);
}
.msbBtnPrintbutton a {
/*
background-image:url(//image.itmedia.co.jp/images/socialbutton/msbBtnPrint.gif);
*/
font-weight:bold;
}
.msbBtnPrintbutton .msbBtntext {
padding:2px 3px;
}
.msbBtnItmid a {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkNJREFUeNqEk89vEkEUx9/sLAt0wZIYJULSEkoRqonVQwtp9KxJ9aKJJ08melKv/gHqP2CinnrkaLUJSQ/ooRCTxqT8EKN1FVrSYpsShBYLu8zO+iCBsFrqy05m3sz7ft6+tzvEMAzoWfwhBUIA8LmA7kU8OYnHBOcqzmmmQ1pH59ZLva8RwWyohWsObygSuHp/Rh73udVW2djfKFSKidfB/e3iGJ4v4ehnFQbVmOWSwzs1N/to4c5o4FwQCLe3tJ8W7cSWf/re49sO7+RlncPMoMYEwNebDV5/ENX5ocC51iZEBEptwFiN/aqtwtn5uzNYxpVBjakExsE9Oj45xthBC9kGY3WuqrvAeZsgUHf5JjxtHTzDATpQVa3ovw+/MUKErrjR+C5SKgkWi4uAQRkCxOMAO1uZZFH20XCjsd7sZBYEq2C1eogs+6XtbHpT00l5aA+whHe5xZgi286rknTKYrOdobI8IchygEp0XE3FXpRUBvGhAPwKXxq12sqHhVerbve83ekMCyMjPsHpnLIuP3+WrVWr7zEmNxRwoBLADIsbn9Kl0lr+hySdtoiiQ1RWP24UcmsljUGs2Tb/OCZAq90dTNNh+XMyUUZxB2DJryR2cO8tNrDTRBjaxKbWX+YK+YyNEEo6OQr5rB2FGTjCTIBdGu4t68l1Ep9O2W8oigJPltTNqN+o/RewJ4YHvK8QDodA06Sul1L4UXpzD/62SqUC9frecSH/3Ma+cc7fRCLRm7j04JV/2tt3heZMcX8EGADUSQLEGWxGlgAAAABJRU5ErkJggg==);
font-weight:bold;
}
.msbBtnTweetbutton .baloon {
display:inline-block;
text-align:center;
border:1px solid #BBB;
padding:2px;
font-size:12px;
font-family:Arial;
position:relative;
z-index:0;
margin:0 0 0 6px;
border-radius:1px;
color:#4A5665;
background:#FFF;
vertical-align:bottom;
}
.msbBtnTweetbutton .baloon:before {
content:"";
position:absolute;
left:-3px;
top:50%;
margin-top:-4px;
width:0;
height:0;
border-style:solid;
border-width:4px 4px 4px 0;
border-color:transparent #FFF transparent transparent;
z-index:0;
}
.msbBtnTweetbutton .baloon:after {
content:"";
position:absolute;
left:-5px;
top:50%;
margin-top:-5px;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 5px 0;
border-color:transparent #BBB transparent transparent;
z-index:-1;
}
.msbBtnTweetbuttonv .baloon {
text-align:center;
border:1px solid #BBB;
padding:10px 0 8px;
font-size:14px;
font-family:Arial;
position:relative;
z-index:0;
margin:0 0 5px;
border-radius:2px;
color:#4A5665;
min-width:70px;
}
.msbBtnTweetbuttonv .baloon:before {
content:"";
position:absolute;
bottom:-3px;
left:50%;
margin-left:-4px;
width:0;
height:0;
border-style:solid;
border-width:4px 4px 0 4px;
border-color:#FFF transparent transparent transparent;
z-index:0;
}
.msbBtnTweetbuttonv .baloon:after {
content:"";
position:absolute;
bottom:-5px;
left:50%;
margin-left:-5px;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#BBB transparent transparent transparent;
z-index:-1;
}
.msbBtnChatworkv .chatwork-share {
position:relative;
display:block;
width:59px;
height:59px;
border:1px solid #CCC;
border-radius:3px;
text-align:center;
}
.msbBtnChatworkv .chatwork-share iframe {
position:absolute;
top:0;
right:0;
bottom:15px;
left:0;
margin:auto;
}
.msbBtnChatworkv .chatwork-share span {
color:#000;
line-height:97px;
font-size:10px;
font-weight:bold;
}
.masterSocialbuttonMinimal {
padding:0 0 10px;
}
.masterSocialbuttonMinimal .msbIn {
width:auto;
}
.masterSocialbuttonMinimal .msbIn .msbBtn,
.masterSocialbuttonMinimal .msbIn .msbGroup {
background:#FFF;
}
.masterSocialbuttonMinimal .msbBtn .button {
display:block;
width:50px;
height:47px;
margin:0 5px 0 0;
padding:0;
border:1px solid #CCC;
border-radius:2px;
text-align:center;
}
.masterSocialbuttonMinimal .msbBtn .service {
visibility:hidden;
}
.masterSocialbuttonMinimal .msbBtn .baloon {
position:relative;
}
.masterSocialbuttonMinimal .msbBtn .baloon span {
position:absolute;
opacity:0;
top:-10px;
display:block;
width:52px;
padding:4px 0;
background:#6cb8dc;
font-size:12px;
line-height:12px;
color:#FFF!important;
text-align:center;
border-radius:2px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transition:.3s;
}
.masterSocialbuttonMinimal .msbBtn .baloon span::after {
content:"";
position:absolute;
top:100%;
left:6px;
width:0;
height:0;
border:3px solid transparent;
border-top:5px solid #6cb8dc;
}
.masterSocialbuttonMinimal .msbBtn .baloon a:hover span {
background:#408cb3;
}
.masterSocialbuttonMinimal .msbBtn .baloon a:hover span::after {
border-top:5px solid #408cb3;
}
.masterSocialbuttonMinimal .msbBtn:hover .baloon span {
opacity:1;
-webkit-transform:rotate(0);
transform:rotate(0);
-webkit-transform:translateY(-18px);
transform:translateY(-18px);
}
.masterSocialbuttonMinimal .msbBtnPrintbutton,
.masterSocialbuttonMinimal .msbBtnItmid {
width:150px;
}
.masterSocialbuttonMinimal .msbBtnPrintbutton a,
.masterSocialbuttonMinimal .msbBtnItmid a {
width:auto;
line-height:48px!important;
font-size:12px!important;
font-weight:normal;
color:#555!important;
text-align:center;
}
.masterSocialbuttonMinimal .msbBtnPrintbutton a,
.masterSocialbuttonMinimal .msbBtnItmid a {
margin:0 5px 0 0;
padding:0 0 0 18px;
background:url(//image.itmedia.co.jp/images/socialbutton/Adobe-Acrobat.png) no-repeat 20px center;
background-size:20px 20px;
}
.masterSocialbuttonMinimal .msbBtnItmid a {
padding:0 0 0 20px;
background:url(//image.itmedia.co.jp/images/socialbutton/Mail-Add.png) no-repeat 18px center;
background-size:24px 24px;
}
.masterSocialbuttonMinimal .msbGroupIn {
width:380px;
background-color:#FFF;
border:1px solid #CCC;
padding:5px;
left:2px;
}
.masterSocialbuttonMinimal .msbGroupIn .msbBtn a {
width:auto;
height:auto;
font-size:14px!important;
line-height:18px!important;
border:none;
padding:5px 5px 5px 20px;
text-indent:inherit;
text-align:left;
}
.masterSocialbuttonMinimal .msbBtnTweetbutton_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnTweetbutton_minimal.png) no-repeat center center;
background-size:22px 18px;
}
.masterSocialbuttonMinimal .msbBtnSharebutton_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnSharebutton_minimal.png) no-repeat center center;
background-size:9px 20px;
}
.masterSocialbuttonMinimal .msbBtnHatenabookmark_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnHatenabookmark_minimal.png) no-repeat center center;
background-size:20px 20px;
}
.masterSocialbuttonMinimal .msbBtnPocket_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnPocket_minimal.png) no-repeat center center;
background-size:20px 20px;
}
.masterSocialbuttonMinimal .msbBtnGoogleplusshare_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnGoogleplusshare_minimal.png) no-repeat center center;
background-size:26px 17px;
}
.masterSocialbuttonMinimal .msbBtnClip_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/SideBtnclip.png) no-repeat 6px center #9b9b9b;
background-size:23px;
}
.masterSocialbuttonMinimalCount {
padding:0 0 10px;
}
.masterSocialbuttonMinimalCount .msbIn {
table-layout:fixed;
}
.masterSocialbuttonMinimalCount .msbIn .msbBtn,
.masterSocialbuttonMinimalCount .msbIn .msbGroup {
background:#FFF;
padding:0;
border:none;
}
.masterSocialbuttonMinimalCount .msbBtnPrintbutton,
.masterSocialbuttonMinimalCount .msbGroupUnder {
width:130px;
}
.masterSocialbuttonMinimalCount .msbBtnPrintbutton a,
.masterSocialbuttonMinimalCount .msbBtnItmid a {
width:auto;
line-height:40px!important;
font-size:12px!important;
font-weight:normal;
color:#555!important;
text-align:center;
}
.masterSocialbuttonMinimalCount .msbBtnPrintbutton a {
margin:0;
padding:0 0 0 22px;
background:url(//image.itmedia.co.jp/images/socialbutton/Adobe-Acrobat.png) no-repeat 25% center;
background-size:20px 20px;
}
.masterSocialbuttonMinimalCount .msbBtnItmid a {
margin:0 0 0 6px;
padding:0 0 0 28px;
background:url(//image.itmedia.co.jp/images/socialbutton/Mail-Add.png) no-repeat 21% center;
background-size:24px 24px;
}
.masterSocialbuttonMinimalCount .msbGroupIn {
width:380px;
background-color:#FFF;
padding:5px;
left:5px;
}
.masterSocialbuttonMinimalCount .msbGroupIn .msbBtn a {
width:auto;
height:auto;
font-size:14px!important;
line-height:18px!important;
border:none;
padding:5px 5px 5px 20px;
text-indent:inherit;
text-align:left;
}
.masterSocialbuttonMinimalCount .msbBtnTweetbutton_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnTweetbutton_minimal.png) no-repeat 17% center;
background-size:21px 18px;
}
.masterSocialbuttonMinimalCount .msbBtnSharebutton_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnSharebutton_minimal.png) no-repeat 17% center;
background-size:9px 20px;
}
.masterSocialbuttonMinimalCount .msbBtnHatenabookmark_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnHatenabookmark_minimal.png) no-repeat 20% center;
background-size:19px 19px;
}
.masterSocialbuttonMinimalCount .msbBtnPocket_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnPocket_minimal.png) no-repeat center center;
background-size:20px 20px;
}
.masterSocialbuttonMinimalCount .msbBtnGoogleplusshare_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnGoogleplusshare_minimal.png) no-repeat center center;
background-size:25px 16px;
}
.masterSocialbuttonMinimalCount .msbBtnComment_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/msbBtnCommentbutton_minimal.png) no-repeat 17% center;
background-size:23px 23px;
}
.masterSocialbuttonMinimalCount .msbBtnClip_minimal .button {
background:url(//image.itmedia.co.jp/images/socialbutton/SideBtnclipTop.png) no-repeat 9px center #fff;
background-size:23px;
}
.masterSocialbuttonMinimalCount .msbBtn .button {
display:block;
height:40px;
margin:0 0 0 6px;
padding:0;
border:1px #ccc solid;
border-radius:4px;
text-align:center;
}
.masterSocialbuttonMinimalCount td {
position:relative;
}
.masterSocialbuttonMinimalCount .baloon {
position:absolute;
margin:auto;
width:40px;
height:15px;
top:0;
right:0;
bottom:0;
left:20px;
text-align:center;
}
.masterSocialbuttonMinimalCount .baloon a,
.masterSocialbuttonMinimalCount .baloon span {
display:block;
font-size:12px!important;
line-height:16px!important;
color:#999;
text-align:center;
}
.masterSocialbuttonMinimalCount .msbBtnClip_minimal .baloon {
left:24px;
width: 80px;
}
.masterSocialbuttonMinimalCount .msbBtnClip_minimal .baloon a,
.masterSocialbuttonMinimalCount .msbBtnClip_minimal .baloon span {
display:block;
font-size:12px;
line-height:16px;
color:#555;
text-align:center;
}
.masterSocialbuttonMinimalCount .msbBtnPocket_minimal .baloon,
.masterSocialbuttonMinimalCount .msbBtnGoogleplusshare_minimal .baloon {
display:none;
}
.masterSocialbuttonMinimalCount .service {
display:none;
}
.masterSocialbuttonMinimalCount .my_ul_count {
position:absolute;
margin:auto;
width:40px;
height:15px;
top:0;
right:0;
bottom:0;
left:20px;
text-align:center;
color:#999;
font-size:12px;
line-height:16px;
}
.masterSocialbuttonMinimalCount .msbIn .msbBtn.msbBtnClip_minimal {
width: 130px;
}
}