長い事放置してた、シェアボタン変更をやろうかと。
シェアボタン
こちらの記事を参考にしつつ、一部書き換えて使ってます。
<div class="sns-header"> <ul class="sns-area"> <li> <a class="sns-twitter sns-link" href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=sugaryo1224" title="このエントリーをtwitterで呟く" target="_blank" > <i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a> </li> <li> <a class="sns-facebook sns-link" href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank" > <i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a> </li> <li> <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button sns-bookmark sns-link" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" > <i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a> </li> <li> <a class="sns-pocket sns-link" href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" > <i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a> </li> </ul> </div>
上記はヘッダ用、フッタ用は div.sns-header
を div.sns-footer
に書き換えるだけ。
で、CSSはこれ。
.sns-header, .sns-footer { padding: 0px; } .sns-area { margin: 30px auto 10px; padding: 0; overflow: hidden; table-layout: fixed; display: table; width: 100%; } .sns-area li { list-style-type: none; display: table-cell; vertical-align: middle; } .sns-area li:last-child { margin-right: 0 } .sns-link { position: relative; display: block; color: #fff; text-align: center; text-decoration: none; outline: none; overflow: hidden; height: 42px; line-height: 42px; } .sns-link::after { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background-color: rgba(255,255,255,.3); border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .sns-link:hover { text-decoration: none; } .sns-link:hover::after { -webkit-animation: circle .75s; animation: circle .75s; } @-webkit-keyframes circle { 50% { opacity: 1; } 100% { width: 300px; height: 300px; } } @keyframes circle { 50% { opacity: 1; } 100% { width: 300px; height: 300px; } } .sns-twitter { background: #55acee; } .sns-facebook { background: #3a5795; } .sns-bookmark { background: #00A5DE; } .sns-pocket { background: #ED4055; } .blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .blogicon-chevron-down { margin-right: 5px; } @media only screen and (max-width: 767px) { .sns-txt { display: none; } .blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .blogicon-chevron-down { margin-right: 0; } }
基本的に全部、オリジナルのコピペですが .sns-header, .sns-footer { padding: 0px; }
だけ弄ってます。
(24pxの左右パディングを消した)
テーマ
テーマは Fresh Green
のテーマに変更しました。
ちなみに今まで使ってたテーマは Brooklyn
ですね。