↑設置例です。カーソルを当てると少し浮き上がります。

ブログ記事の下に設置するSNSシェアボタンを作成してみたので備忘録的にコードを置いておきます。

設置したのはTwitter、Facebook、はてなブックマーク、Pocket、LINEの5種類です。

SNSシェアボタンを設置するコード

<style>
.sns_button {list-style: none; display: flex; width:100%;margin:0!important;text-align:center;} .sns_button li {width:20%;transition: 0.5s; -webkit-transition: 0.4s;} .sns_button li:hover {opacity: 0.9;transform: scale(1.1); } .sns_button li a {display:block; width:100%;font-size:22px;color:#fff;} .sns_button .twitter {background:#55acee;} .sns_button .facebook {background:#3b5998;} .sns_button .hatebu {background:#008fde;} .sns_button .pocket {background:#d3505a;} .sns_button .line {background:#00c300;}
</style>
<ul class='sns_button'>
    <li class='twitter'><a expr:href='&quot;https://twitter.com/share?text=&quot; + data:post.title + &quot;|&quot; + data:blog.title + &quot; &amp;url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-twitter'></i></a></li>
    <li class='facebook'><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-facebook-f'></i></a></li>
    <li class='hatebu'><a expr:href='&quot;https://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab'><b>B!</b></i></a></li>
    <li class='pocket'><a expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-get-pocket'></i></a></li>
    <li class='line'><a expr:href='&quot;https://social-plugins.line.me/lineit/share?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-line'></i></a></li>
                          </ul>

詳細

・設置する場所の横幅いっぱいに広がり、画面サイズに合わせて伸縮します。
・marginやpaddingなどの要素は適宜調整してください。
・Font Awesomeはv5.7.2です。
・コードを一部お借りしましたm(_ _)m
 [コピペだけ]6種類のオリジナルSNSボタンをBloggerに設置する方法を紹介する

お役立て頂けたら幸いです(´∀`)

【Blogger】忍者ツールズ風 SNSシェアボタン 設置コード【コピペOK】

↑設置例です。カーソルを当てると少し浮き上がります。

ブログ記事の下に設置するSNSシェアボタンを作成してみたので備忘録的にコードを置いておきます。

設置したのはTwitter、Facebook、はてなブックマーク、Pocket、LINEの5種類です。

SNSシェアボタンを設置するコード

<style>
.sns_button {list-style: none; display: flex; width:100%;margin:0!important;text-align:center;} .sns_button li {width:20%;transition: 0.5s; -webkit-transition: 0.4s;} .sns_button li:hover {opacity: 0.9;transform: scale(1.1); } .sns_button li a {display:block; width:100%;font-size:22px;color:#fff;} .sns_button .twitter {background:#55acee;} .sns_button .facebook {background:#3b5998;} .sns_button .hatebu {background:#008fde;} .sns_button .pocket {background:#d3505a;} .sns_button .line {background:#00c300;}
</style>
<ul class='sns_button'>
    <li class='twitter'><a expr:href='&quot;https://twitter.com/share?text=&quot; + data:post.title + &quot;|&quot; + data:blog.title + &quot; &amp;url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-twitter'></i></a></li>
    <li class='facebook'><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-facebook-f'></i></a></li>
    <li class='hatebu'><a expr:href='&quot;https://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab'><b>B!</b></i></a></li>
    <li class='pocket'><a expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-get-pocket'></i></a></li>
    <li class='line'><a expr:href='&quot;https://social-plugins.line.me/lineit/share?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fab fa-line'></i></a></li>
                          </ul>

詳細

・設置する場所の横幅いっぱいに広がり、画面サイズに合わせて伸縮します。
・marginやpaddingなどの要素は適宜調整してください。
・Font Awesomeはv5.7.2です。
・コードを一部お借りしましたm(_ _)m
 [コピペだけ]6種類のオリジナルSNSボタンをBloggerに設置する方法を紹介する

お役立て頂けたら幸いです(´∀`)

次に読まれている記事