WordpressTheme Simplicity sns button setting
How do I make an wordpresstheme simplicity sns button setting?
What is a wordpresstheme simplicity sns button setting? How do you make a wordpresstheme simplicity sns button setting? This script and codes were developed by Hidekichi on 10 July 2022, Sunday.
WordpressTheme Simplicity sns button setting Previews
WordpressTheme Simplicity sns button setting - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WordpressTheme Simplicity sns button setting</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="sns-group" class="sns-group sns-group-bottom"> <div class="sns-group sns-group-viral"> <div class="sns-buttons sns-buttons-icon sns-group-viral"> <ul class="snsb clearfix snsbs"> <li class="twitter-btn-icon"> <a href="http://twitter.com/share?text=Simplicity%E3%81%AE%E9%AA%A8%E7%B5%84%E3%81%BF%E3%82%92%E3%83%95%E3%83%AC%E3%82%AD%E3%82%B7%E3%83%96%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AB%E3%81%99%E3%82%8B+%E3%83%90%E3%82%A4%E3%83%A9%E3%83%ABSNS%E3%83%9C%E3%82%BF%E3%83%B3%E7%B7%A8&url=http://blazechariot.wp.xdomain.jp/simplicity%e3%81%ae%e9%aa%a8%e7%b5%84%e3%81%bf%e3%82%92%e3%83%95%e3%83%ac%e3%82%ad%e3%82%b7%e3%83%96%e3%83%ab%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ab%e3%81%99%e3%82%8b-%e3%83%90%e3%82%a4%e3%83%a9&via=ko_hidekichi" class="twitter-btn-icon-link" target="blank" rel="nofollow"> <span class="social-icon icon-twitter"></span> <span class="social-count twitter-count">1</span> </a> </li> <li class="facebook-btn-icon"> <a href="https://www.facebook.com/sharer/sharer.php?u=http://blazechariot.wp.xdomain.jp/simplicity%e3%81%ae%e9%aa%a8%e7%b5%84%e3%81%bf%e3%82%92%e3%83%95%e3%83%ac%e3%82%ad%e3%82%b7%e3%83%96%e3%83%ab%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ab%e3%81%99%e3%82%8b-%e3%83%90%e3%82%a4%e3%83%a9&t=Simplicity%E3%81%AE%E9%AA%A8%E7%B5%84%E3%81%BF%E3%82%92%E3%83%95%E3%83%AC%E3%82%AD%E3%82%B7%E3%83%96%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AB%E3%81%99%E3%82%8B+%E3%83%90%E3%82%A4%E3%83%A9%E3%83%ABSNS%E3%83%9C%E3%82%BF%E3%83%B3%E7%B7%A8" class="facebook-btn-icon-link" target="blank" rel="nofollow"> <span class="social-icon icon-facebook"></span> <span class="social-count facebook-count">0</span> </a> </li> <li class="google-plus-btn-icon"> <a href="https://plus.google.com/share?url=http%3A%2F%2Fblazechariot.wp.xdomain.jp%2Fsimplicity%25e3%2581%25ae%25e9%25aa%25a8%25e7%25b5%2584%25e3%2581%25bf%25e3%2582%2592%25e3%2583%2595%25e3%2583%25ac%25e3%2582%25ad%25e3%2582%25b7%25e3%2583%2596%25e3%2583%25ab%25e3%2583%259c%25e3%2583%2583%25e3%2582%25af%25e3%2582%25b9%25e3%2581%25ab%25e3%2581%2599%25e3%2582%258b-%25e3%2583%2590%25e3%2582%25a4%25e3%2583%25a9" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="google-plus-btn-icon-link" target="blank" rel="nofollow"> <span class="social-icon icon-googleplus"></span> <span class="social-count googleplus-count">0</span> </a> </li> <li class="hatena-btn-icon"> <a href="http://b.hatena.ne.jp/add?mode=confirm&url=http%3A%2F%2Fblazechariot.wp.xdomain.jp%2Fsimplicity%25e3%2581%25ae%25e9%25aa%25a8%25e7%25b5%2584%25e3%2581%25bf%25e3%2582%2592%25e3%2583%2595%25e3%2583%25ac%25e3%2582%25ad%25e3%2582%25b7%25e3%2583%2596%25e3%2583%25ab%25e3%2583%259c%25e3%2583%2583%25e3%2582%25af%25e3%2582%25b9%25e3%2581%25ab%25e3%2581%2599%25e3%2582%258b-%25e3%2583%2590%25e3%2582%25a4%25e3%2583%25a9&title=Simplicity%E3%81%AE%E9%AA%A8%E7%B5%84%E3%81%BF%E3%82%92%E3%83%95%E3%83%AC%E3%82%AD%E3%82%B7%E3%83%96%E3%83%AB%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AB%E3%81%99%E3%82%8B+%E3%83%90%E3%82%A4%E3%83%A9%E3%83%ABSNS%E3%83%9C%E3%82%BF%E3%83%B3%E7%B7%A8" class="hatena-btn-icon-link" target="blank" rel="nofollow"> <span class="social-icon icon-hatena"></span> <span class="social-count hatebu-count">0</span> </a> </li> <li class="pocket-btn-icon"> <a href="https://getpocket.com/edit?url=http://blazechariot.wp.xdomain.jp/simplicity%e3%81%ae%e9%aa%a8%e7%b5%84%e3%81%bf%e3%82%92%e3%83%95%e3%83%ac%e3%82%ad%e3%82%b7%e3%83%96%e3%83%ab%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ab%e3%81%99%e3%82%8b-%e3%83%90%e3%82%a4%e3%83%a9" class="pocket-btn-icon-link" target="blank" rel="nofollow"> <span class="social-icon icon-pocket"></span> <span class="social-count pocket-count">0</span> </a> </li> <li class="feedly-btn-icon"> <a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp://blazechariot.wp.xdomain.jp/feed" class="feedly-btn-icon-link" target="blank" rel="nofollow"> <span class="social-icon icon-feedly"></span> <span class="social-count feedly-count">3</span> </a> </li> <li class="comments-btn-icon"> <a href="#reply-title" class="comments-btn-icon-link" rel="nofollow"> <span class="social-icon fa fa-comment"></span> <span class="social-count comments-count">2</span> </a> </li> </ul> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
WordpressTheme Simplicity sns button setting - Script Codes CSS Codes
@charset "UTF-8";
/* original setting -> scss */
/*---------------------------------------------------- SNS
----------------------------------------------------*/
#sns-group { clear: both;
}
ul.snsb { padding: 10px 0; margin-bottom: 0; font-family: sans-serif;
}
.snsb li { float: left; list-style-type: none; margin-right: 7px;
}
ul.snsbs li { margin-right: 5px; margin-bottom: 5px;
}
ul.snsbs li a { color: #fff; text-decoration: none; font-size: 25px; font-size: 1.5625rem; background-color: #000; display: block; padding: 7px 6px 3px 6px; border-radius: 5px; width: 25px; height: 30px; position: relative;
}
ul.snsbs li a .social-count { font-size: 10px; font-size: 0.625rem; /* position:relative; */ background-color: #555; width: auto; padding: 1px 3px; border-radius: 5px; position: absolute; display: inline-block; right: 0; bottom: 0; height: 12px; line-height: 12px; font-family: Arial;
}
ul.snsbs li a:hover { opacity: 0.6;
}
ul.snsbs li a.twitter-btn-icon-link { background-color: #55acee;
}
ul.snsbs li a.facebook-btn-icon-link { background-color: #3b5998;
}
ul.snsbs li a.google-plus-btn-icon-link { background-color: #dd4b39;
}
ul.snsbs li a.hatena-btn-icon-link { background-color: #3C7DD1;
}
ul.snsbs li a.pocket-btn-icon-link { background-color: #EE4257;
}
ul.snsbs li a.line-btn-icon-link { background-color: #00c300;
}
ul.snsbs li a.evernote-btn-icon-link { background-color: #51b125;
}
ul.snsbs li a.feedly-btn-icon-link { background-color: #87bd33;
}
ul.snsbs li a.comments-btn-icon-link { background-color: #555; padding-top: 4px; padding-bottom: 6px;
}
ul.snsbs li img { border-radius: 10px;
}
img.evernote-btn-img { min-height: 62px;
}
img.evernote-btn-img-mini { display: none;
}
#sns-group-top ul { padding: 0; line-height: 20px;
}
#sns-group-top .sns-share-msg { display: none;
}
#sns-group-top .twitter-btn { width: 100px;
}
#sns-group-top .facebook-btn { width: 110px;
}
#sns-group-top .google-plus-btn { width: 70px; margin-top: -2px;
}
#sns-group-top .pocket-btn { width: 95px;
}
#sns-group-top .evernote-btn-img { display: none;
}
#sns-group-top .evernote-btn-img-mini { display: block;
}
#sns-group-top .evernote-btn-img-mini { height: 20px !important; width: auto !important;
}
.sns-follow-msg { margin: 8px 0 0 0; font-size: medium;
}
.sns-share-msg { margin-bottom: -20px; font-size: medium;
}
#header .sns-follow-msg { display: none;
}
ul.snsp { list-style: none; padding-left: 0; margin: 10px 0 15px;
}
ul.snsp li { display: inline; margin-right: 5px;
}
ul.snsp li a { color: #666; font-size: 19px; font-size: 1.1875rem; line-height: 170%; text-decoration: none;
}
ul.snsp li a i { font-size: 40px; font-size: 2.5rem; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfAQMAAADKou9EAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAB9JREFUCNdjkP///wFD/f//PyDE/////wwUgXAG2FUADfF3INqLhU0AAAAASUVORK5CYII="); background-repeat: no-repeat; background-position: 3px 5px; padding: 0; z-index: 10;
}
ul.snsp li a i.icon-feedly-square,
ul.snsp li a i.icon-line-square,
ul.snsp li a i.icon-hatebu-square { /* 画像をBase64にするためコメントアウト background-image: url("../images/white-feedly.png"); */ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcAQMAAABIw03XAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAB9JREFUCNdjkP//v4Gh/v//BxDi////H+hGIOwFOwMAuf5pDfN+XdkAAAAASUVORK5CYII="); font-size: 33.5px; font-size: 2.09375rem; position: relative; top: 1px;
}
ul.snsp li a span { width: 33px; height: 33px; background-color: #FFF; display: block; border-radius: 5px; z-index: 1;
}
ul.snsp li.twitter-page a:hover { color: #55acee;
}
ul.snsp li.facebook-page a:hover { color: #3b5998;
}
ul.snsp li.google-plus-page a:hover { color: #dd4b39;
}
ul.snsp li.instagram-page a:hover { color: #3f729b;
}
ul.snsp li.hatebu-page a:hover { color: #008fde;
}
ul.snsp li.pinterest-page a:hover { color: #cc2127;
}
ul.snsp li.youtube-page a:hover { color: #e52d27;
}
ul.snsp li.feedly-page a:hover { color: #87bd33;
}
ul.snsp li.feedly-page a img { margin-bottom: -3px; width: 32.5px; height: 32.5px; border-radius: 7px; border-width: 0px;
}
ul.snsp li.line-page a:hover { color: #00c300;
}
ul.snsp li.rss-page a:hover { color: #fe9900;
}
.fb-like iframe { max-width: none;
}
#sharebar { background: none repeat scroll 0 0 #FFF; border: 1px solid #CCC; margin: 0; padding: 0; /*position: absolute;*/ text-align: center; z-index: 99; margin-left: -110px; margin-top: -50px; width: 90px; position: fixed;
}
#sharebar ul li { display: block; margin: 5px; overflow: hidden; padding: 0; text-align: center; float: none; padding: 0;
}
#sharebar ul.snsb-balloon li, #sharebar ul.snsb-balloon li.comments-balloon-btn { margin-left: 15px; margin-bottom: 10px;
}
#sharebar .sns-share-msg { display: none;
}
.balloon-btn-set { display: block; width: 60px; height: 63px;
}
.balloon-btn-set a { display: block; color: #777; font-size: 14px; font-size: 0.875rem; text-decoration: none;
}
a.arrow-box-link { font-weight: bold; text-align: center; font-family: Arial; display: block; font-size: 14px; font-size: 0.875rem;
}
a.arrow-box-link:hover { color: #555;
}
a.evernote-arrow-box-link { font-family: 'Boogaloo', cursive; font-weight: normal;
}
a.balloon-btn-link { border: 1px solid #ddd; width: 58px; height: 20px; line-height: 22px; position: relative; top: 4px; color: white; border-radius: 3px; text-align: center; display: block;
}
a.balloon-btn-link:hover { color: white; opacity: 0.6;
}
a.twitter-balloon-btn-link { background-color: #55acee;
}
a.facebook-balloon-btn-link { background-color: #3c5a99;
}
a.googleplus-balloon-btn-link { background-color: #dd4b39;
}
a.hatena-balloon-btn-link { background-color: #3c7dd1;
}
a.pocket-balloon-btn-link { background-color: #ee4257;
}
a.line-balloon-btn-link { background-color: #00c300;
}
a.evernote-balloon-btn-link { background-color: #51b125;
}
a.feedly-balloon-btn-link { background-color: #87bd33;
}
a.comments-balloon-btn-link { background-color: #333;
}
a.comments-balloon-btn-link .fa-comment { position: relative; top: -3px;
}
.arrow-box { position: relative; background: #fff; border: 1px solid #bbb; text-align: center; width: 58px; height: 33px; border-radius: 3px; line-height: 33px; display: inline-block;
}
.arrow-box:after, .arrow-box:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.arrow-box:after { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 3px; margin-left: -3px;
}
.arrow-box:before { border-color: rgba(187, 187, 187, 0); border-top-color: #ddd; border-width: 5px; margin-left: -5px;
}
#sns-group-top .balloon-btn-set { display: block; width: 87px; height: 22px; margin-bottom: 10px;
}
#sns-group-top .balloon-btn-link { top: 0; width: 28px; float: left; line-height: 24px;
}
#sns-group-top .arrow-box { height: 20px; width: 50px; line-height: 20px; float: right; position: relative; background: #fff; border: 1px solid #bbb;
}
#sns-group-top .arrow-box:after, #sns-group-top .arrow-box:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; left: auto; position: absolute; pointer-events: none;
}
#sns-group-top .arrow-box:after { border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 3px; margin-top: -3px;
}
#sns-group-top .arrow-box:before { border-color: rgba(119, 119, 119, 0); border-right-color: #bbb; border-width: 4px; margin-top: -4px;
}
#sns-group-top .arrow-box-link { line-height: 20px; text-align: center;
}
@font-face { font-family: Boogaloo; src: url("../webfonts/boogaloo/Boogaloo-Regular.ttf") format("truetype");
}
.sns-group-viral ul.snsb li a { width: 150px; height: 35px; border-radius: 3px; margin-bottom: 5px; text-align: center; font-size: 16px; font-size: 1rem; line-height: 35px;
}
.sns-group-viral ul.snsb li a .social-count { font-size: 12px; font-size: 0.75rem; bottom: 2px; font-weight: bold; background-color: transparent;
}
.sns-group-viral .social-icon:after { margin-left: 7px; position: relative; top: -2px; font-family: arial;
}
.sns-group-viral .fa-comment:after { top: 0;
}
.sns-group-viral .icon-twitter:after { content: 'Twitter';
}
.sns-group-viral .icon-facebook:after { content: 'Facebook';
}
.sns-group-viral .icon-googleplus:after { content: 'Google+';
}
.sns-group-viral .icon-hatena:after { content: 'Hatena';
}
.sns-group-viral .icon-pocket:after { content: 'Pocket';
}
.sns-group-viral .icon-line:after { content: 'Line';
}
.sns-group-viral .icon-evernote:after { content: 'Evernote';
}
.sns-group-viral .icon-feedly:after { content: 'Feedly';
}
.sns-group-viral .icon-fa-comment:after { content: 'Comment';
}
#sharebar .sns-group-viral ul.snsb li a { width: 68px;
}
#sharebar .sns-group-viral .social-icon:after { display: none;
}
/* original setting -> scss end */
/******************************************************************************* custom setting
*******************************************************************************/
#sns-group-top ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; line-height: normal;
}
#sns-group-top ul li { float: none; line-height: normal; list-style-type: none; margin: 2px 4px; padding: 0; height: 35px; -webkit-box-flex: 1; -ms-flex: 1 25%; flex: 1 25%;
}
#sns-group-top .balloon-btn-set { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 90px;
}
#sns-group-top .balloon-btn-link { top: 0; width: 28px; height: 22px; border: 1px solid #ddd; border-radius: 3px; text-align: center; display: block; line-height: normal; padding: 2px; color: #fff;
}
#sns-group-top .arrow-box { position: relative; background: #fff; border: 1px solid #bbb; text-align: center; width: 58px; height: 22px; border-radius: 3px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding: 2px;
}
#sns-group-top .arrow-box a { line-height: normal;
}
#sns-group-top .arrow-box:before, #sns-group-top .arrow-box:after { border-color: rgba(119, 119, 119, 0); border-right-color: #bbb; border-width: 4px; margin-top: -4px; right: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; left: auto; position: absolute;
}
#sns-group-top .arrow-box:after { border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 3px; margin-top: -3px;
}
#sns-group-top .arrow-box:before { border-color: rgba(119, 119, 119, 0); border-right-color: #bbb; border-width: 4px; margin-top: -4px;
}
ul.snsbs li a { color: #fff; text-decoration: none; background-color: #000; display: block; padding: 7px 6px 3px; border-radius: 3px; text-align: center; font-size: 1rem; width: auto; position: relative;
}
.sns-group-bottom .sns-group-viral ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.sns-group-bottom .sns-group-viral ul li { -webkit-box-flex: 1; -ms-flex: 1 12.5%; flex: 1 12.5%; min-width: 100px; margin: 2px; float: none; line-height: normal;
}
.sns-group-bottom .sns-group-viral ul li a { border-radius: 3px; line-height: normal; padding: 4px 4px 2px; font-size: 0.85rem; width: auto;
}
.sns-group-bottom .sns-group-viral ul.snsb { padding: 0;
}
#sns-group.sns-group-bottom .arrow-box > a { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
@media only screen and (max-width: 50em) { .sns-group-bottom .sns-group-viral ul.snsb { margin: 0; padding: 0; } .sns-group-bottom .sns-group-viral ul li { -webkit-box-flex: 1; -ms-flex: 1 40%; flex: 1 40%; } .sns-group-bottom .sns-share-msg, .sns-group-bottom .sns-pages { margin: 0 0 -20px 10px; font-size: 1.5rem; font-weight: bold; } .sns-group-bottom .sns-pages .snsp { line-height: normal; } .sns-group-bottom .sns-pages .snsp li > a { float: none; font-size: 19px; font-size: 1.1875rem; text-decoration: none; padding: 5px; } .sns-group-bottom .snsb { padding: 10px 0; margin: 10px 0 0 10px; font-family: sans-serif; line-height: normal; } .sns-group-bottom .snsb li { float: none; } .sns-group-bottom .snsb li > a { color: #fff; text-decoration: none; font-size: 25px; font-size: 1.5625rem; padding: 7px 7px 5px; border-radius: 5px; position: relative; }
}
WordpressTheme Simplicity sns button setting - Script Codes JS Codes
/*
オリジナルのSNS.css等をまとめたものが最初に書いてあります。
スクロールしていくと original setting -> scss end というのがありますので
そこまでは特に変更する必要ないだろうと思われる部分です。
cssは下の方に書いてあるものが上に書いてあるものを上書きするので、
original setting -> scss end 以下の custom setting の部分が
子テーマに書いてあれば多分イケルんじゃないかなぁと思います。
メディアクエリの部分は、自分の環境に合わせてmax-width等を変更してください
50em は 16px * 50 で 800px相当です。
*/
| Developer | Hidekichi |
| Username | Hidekichi |
| Uploaded | July 10, 2022 |
| Rating | 3 |
| Size | 9,369 Kb |
| Views | 32,384 |
Do you need developer help for WordpressTheme Simplicity sns button setting?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Hidekichi (Hidekichi) Script Codes
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Review test | Otro_user_gil | 4,054 Kb |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
| Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
| Web Spiral - p5.js | TWAIN | 2,183 Kb |
| Subtle site navigation with description | Necks | 3,206 Kb |
| Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
| Draggable directive | YahyaKacem | 2,277 Kb |
| Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
| Slide In Panel | Vikvarg | 2,811 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!