SNSボタン «

SNSボタン

※Feedlyのリンク先はFeedlyサイトの「Ad contents」から取得

CSS

/*------------------------------------------
SNSボタン
-------------------------------------------*/
ul#sns_btn {
    width:100%;
    clear: both;
    padding: 0px;
    margin: 0px 0px 40px 0px;
}

ul#sns_btn:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

ul#sns_btn li.sns_btnInner {
    width:16%;
    float: left;
    padding: 0px;
    margin: 0px 1% 0px 0px;
    list-style-type: none;
}

ul#sns_btn li.sns_btnInner:nth-child(6n) {
    width:15%;
    margin: 0px 0px 0px 0px;
}

@media (max-width: 659px) {
    ul#sns_btn li.sns_btnInner {
        width:32%;
        margin: 0px 2% 5px 0px;
    }
}

@media (max-width: 659px) {
    ul#sns_btn li.sns_btnInner:nth-child(3n) {
        width:32%;
        margin: 0px 0px 5px 0px;
    }
    ul#sns_btn li.sns_btnInner:nth-child(6n) {
        width:32%;
        margin: 0px 0px 5px 0px;
    }
}

ul#sns_btn li.sns_btnInner a {
    font-size: 12px;
    line-height: 100%;
    color:#ffffff;
    display: block;
    padding: 8px 0px;
    margin: 0px;
    background-color:#f5f5f5;
    text-align:center;
    text-decoration: none;
    border-radius: 3px;
}

@media (max-width: 659px) {
    ul#sns_btn li.sns_btnInner a {
        font-size: 14px;
        padding: 10px 0px;
    }
}

ul#sns_btn li.sns_btnInner a.twitter {
    background-color: #00acee;
}
ul#sns_btn li.sns_btnInner a.twitter:before {
    font-family: FontAwesome;
    content: "f099";
    padding-right: 5px;
}

ul#sns_btn li.sns_btnInner a.facebook {
    background-color: #3b5998;
}
ul#sns_btn li.sns_btnInner a.facebook:before {
    font-family: FontAwesome;
    content: "f09a";
    padding-right: 5px;
}

ul#sns_btn li.sns_btnInner a.google_plus {
    background-color: #dd4b39;
}
ul#sns_btn li.sns_btnInner a.google_plus:before {
    font-family: FontAwesome;
    content: "f0d5";
    padding-right: 5px;
}

ul#sns_btn li.sns_btnInner a.hatena {
    background-color: #00a4d4;
}
ul#sns_btn li.sns_btnInner a.hatena:before {
    font-family: FontAwesome;
    content: "f12a";
    padding-right: 5px;
}

ul#sns_btn li.sns_btnInner a.pocket {
    background-color: #EE4056;
}
ul#sns_btn li.sns_btnInner a.pocket:before {
    font-family: FontAwesome;
    content: "f265";
    padding-right: 5px;
}

ul#sns_btn li.sns_btnInner a.feedly {
    background-color: #76B626;
}
ul#sns_btn li.sns_btnInner a.feedly:before {
    font-family: FontAwesome;
    content: "f09e";
    padding-right: 5px;
}

HTML

<ul id="sns_btn">
            <li class="sns_btnInner"><a class="twitter" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title(" "," ",0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterで共有">Twitter</a></li>

<li class="sns_btnInner"><a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title(" "," ",0)); ?>" target="_blank" title="facebookで共有">facebook</a></li>

<li class="sns_btnInner"><a class="google_plus" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Google+で共有">Google+</a></li>

<li class="sns_btnInner"><a class="hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(the_title(" "," ",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加">はてブ</a></li>

<li class="sns_btnInner"><a class="pocket" href="http://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="pocketで共有">pocket</a></li>

<li class="sns_btnInner"><a class="feedly" href='https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2Flehmanportal.com%2Ffeed%2F' target='blank'>Feedly</a></li>
</ul>

snipetsNakazawa's Collection

SNSボタン

CSS

HTML

CONTENTS