オリジナルSNSフォローボタンをサイトに配置する。

f:id:xxxxkun:20180209074111j:plain

どうもスナ(@morisuna808)です。

SNSボタンをカスタマイズします。

 

記事の上下にあるSNSはてなブログ,Twitter,Instagram)のフォローボタンを設置します。

f:id:xxxxkun:20180209013502j:plain

 

HTMLコードをいじる前に下記のコードを設定→詳細設定→検索エンジン最適化→head要素を追加の場所に貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

HTMLコード

はてなブログスマホ版)でコピペする場所は、デザイン→スマホ→記事→記事上or記事下である。

 

下記のコードをコピペする前に、何箇所か変更点があります。

このままコピペすると僕のSNSボタンが配置されてしまうので自分のSNSの情報を書き込みます。

URLやユーザ名を入力するだけなので簡単な作業だと思います。

f:id:xxxxkun:20180209073029p:plain

 

 

<!-- フォローボタン -->
<center>
<div class="content-inner-follow-buttons" >
<div class="follow-title"><span style="font-size: 8px">フォローする</span></div>
<a class="hatena" href="http://blog.hatena.ne.jp/xxxxkun/www.morisuna808.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/xxxxkun/www.morisuna808.com/subscribe', '', 'width=500,height=400'); return false;">
<i class="blogicon-hatenablog lg"></i>

<span class="inner-text">Hatena</span>
</a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=morisuna808" target="_blank">
<i class="blogicon-twitter lg"></i>

<span class="inner-text">Twitter</span>
</a>
<a class="instagram" href="https://www.instagram.com/morisuna808/" target="_blank">
<i class="blogicon-instagram lg"></i>

<span class="inner-text">Instagram</span>
</a>
</div>
</center>

 

CSSコード

 

 コード貼り付け場所は、デザイン→スマートフォン→記事→記事下です。 

 

<style>
/*スマホ版フォローボタン*/
.content-inner-follow-buttons{
    text-align: center;
    width:100%;
    letter-spacing: -.40em;
}
.content-inner-follow-buttons .follow-title {
    letter-spacing: normal;
    width:100%;
    color:#666;
    margin-bottom:5px;
}
.content-inner-follow-buttons a {
    display: inline-block;
    letter-spacing: normal;
    width:30%;
    text-align: center;
    text-decoration: none;
    padding:6% 0;
    margin:1%;
}
.content-inner-follow-buttons .inner-text {
    font-size:13px;
}
.content-inner-follow-buttons .hatena {
    color: #ffffff;
    background: #38393C;
}
.content-inner-follow-buttons .facebook {
    background: #305097;
    color: #ffffff;
}
.content-inner-follow-buttons .twitter {
    background: #55acee;
    color: #ffffff;
}
.content-inner-follow-buttons .instagram {
    background: #3f729b;
    color: #ffffff;
}
.content-inner-follow-buttons .feedly {
    background: #6cc655;
    color: #ffffff;
}
.content-inner-follow-buttons .googleplus {
    background: #db4a39;
    color: #ffffff;
}
</style>

 

 

ここにFacebookGoogle+のボタンも追加したいと思ったら、HTMLコードの共通した<a href="のコードを追加すれば反映されます。