【ブログカスタマイズ】サイドバーにSNSフォローボタンを追加！インスタ、ツイッターなど

今回は主にはてなブロガーさん向けのカスタマイズ記事になります。

突然ですが、みなさんはどんなSNSを利用しているでしょうか。

ブログを運営するにあたって、SNSというのはとても大事なツールです。

ブログの更新をお知らせしたり、情報収集に活用してみたり。また自分の記事SNSを通して拡散され、多くの人に読んでもらえることもあります。

また自分のプロフィールにSNSへのリンクや、フォローボタンを設置しておくことで、交流の機会ができたりします。

そこで今回は、ブログのサイドバーに『Twitter』『Instagram』のフォローボタンを簡単に追加する方法をまとめてみました。

SNSフォローボタンの追加方法

SNSフォローボタンの追加方法

今回はインスタ、ツイッター、はてなブログの読者登録ボタンの3つを横並びにしたパーツを作成しました。

利用していないSNSや不要なものは削除してお使いいただけます。

四角形のボタン＋アイコン＋テキスト

マウスホバー時に背景に色が付きます。スマホだとタップしたときに切り替わるようになっています。

-デモ-

Hatena
Twitter
Instagram

HTML

編集画面の「デザイン」→「サイドバー」内にある、プロフィールの「編集」を押します。

自己紹介の欄はhtmlで記述できるようになっているため、ここにコードを入れます。

まずは以下のコードをコピペしてください。

<div class="sidebar__follow-btn">
    <!-- Twitter -->
    <a class="twitter" href="https://twitter.com/intent/follow?screen_name=IDを設定" target="_blank">
        <i class="blogicon-twitter lg"></i><br>
        <span class="inner-text">Twitter</span>
    </a>
    <!-- Instagram -->
    <a class="instagram" href="URLを設定" target="_blank">
        <i class="blogicon-instagram lg"></i><br>
        <span class="inner-text">Instagram</span>
    </a>
    <!-- はてな -->
    <a class="hatena" href="https://blog.hatena.ne.jp/はてなのID/ブログのURL/subscribe" target="_blank">
        <i class="blogicon-hatenablog lg"></i><br>
        <span class="inner-text">Hatena</span>
    </a>
</div>

Twitter

次にボタンを押したときに、各SNSアカウントのフォロー画面に移行させるための設定を行っていきます。

ツイッターのaタグの「IDを設定」となっているところを、自分のIDに差し替えてください。※”@”は不要です。

https://twitter.com/intent/follow?screen_name=IDを設定

Instagram

インスタのaタグの「ユーザー名」となっているところに自分のユーザー名が入ります。

https://www.instagram.com/ユーザー名?ref=badge

はてな読者登録ボタン

読者登録ボタンは、aタグの「はてなのID」と「ブログのURL」となっているところを、自分のIDとURLに差し替えてください。

https://blog.hatena.ne.jp/はてなのID/ブログのURL/subscribe

デザインcss

編集画面「デザインCSS」

編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。

ここに以下のコードをコピペしてください。

.sidebar__follow-btn{
    width: 100%;
    display: flex;
    justify-content: center;
}
.sidebar__follow-btn a {
    width: 80px;
    height: 80px;
    margin:1%;
    box-sizing: border-box;
    font-size: 18px;
    text-decoration: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap:wrap;
    transition: all .3s;
}
.sidebar__follow-btn a:hover {
    color:#fff;
}
.sidebar__follow-btn .inner-text {
    width:100%;
    text-align:center;
    font-size:12px;
}
.sidebar__follow-btn .hatena {
    color: #38393C;
    border: 1px solid #38393C;
    background: #fff;
}
.sidebar__follow-btn .hatena:hover{
    background:#38393C;
}
.sidebar__follow-btn .twitter{
    color: #55acee;
    border: 1px solid #55acee;
    background: #ffffff;
}
.sidebar__follow-btn .twitter:hover{
    background:#55acee;
}
.sidebar__follow-btn .instagram {
    color: #cc4895;
    border: 1px solid #cc4895;
    background: #ffffff;
}
.sidebar__follow-btn .instagram:hover{
    background:#cc4895;
}

円形のボタン＋アイコン

こちらは丸いデザインのフォローボタン。テキスト無しでアイコンのみなので、よりスッキリして見えますね。

-デモ-

HTML

作業の工程は先ほどと同じです。サイドバーにコードを追加。

<div class="sidebar__follow-btn -circle">
    <!-- Twitter -->
    <a class="twitter" href="https://twitter.com/intent/follow?screen_name=IDを設定" target="_blank">
        <i class="blogicon-twitter lg"></i>
    </a>
    <!-- Instagram -->
    <a class="instagram" href="URLを設定" target="_blank">
        <i class="blogicon-instagram lg"></i>
    </a>
    <!-- はてな -->
    <a class="hatena" href="https://blog.hatena.ne.jp/はてなのID/ブログのURL/subscribe" target="blank">
        <i class="blogicon-hatenablog lg"></i>
    </a>
</div>

デザインCSS

先にご紹介したCSSに、丸いデザインのコードを加えたものがこちら↓

.sidebar__follow-btn{
    width: 100%;
    display: flex;
    justify-content: center;
}
.sidebar__follow-btn a {
    width: 80px;
    height: 80px;
    margin:1%;
    box-sizing: border-box;
    font-size: 18px;
    text-decoration: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap:wrap;
    transition: all .3s;
}
.sidebar__follow-btn a:hover {
    color:#fff;
}
.sidebar__follow-btn .inner-text {
    width:100%;
    text-align:center;
    font-size:12px;
}
.sidebar__follow-btn .hatena {
    color: #38393C;
    border: 1px solid #38393C;
    background: #fff;
}
.sidebar__follow-btn .hatena:hover{
    background:#38393C;
}
.sidebar__follow-btn .twitter{
    color: #55acee;
    border: 1px solid #55acee;
    background: #ffffff;
}
.sidebar__follow-btn .twitter:hover{
    background:#55acee;
}
.sidebar__follow-btn .instagram {
    color: #cc4895;
    border: 1px solid #cc4895;
    background: #ffffff;
}
.sidebar__follow-btn .instagram:hover{
    background:#cc4895;
}
.sidebar__follow-btn.-circle a{
    font-size: 22px;
    border-radius: 50%;
}

色背景ボタン

背景にイメージカラーを設定したバージョンも作成してみましたのでお好みでどうぞ。htmlは先ほどご紹介したものと一緒です。

ちなみにマウスオーバー時の色の変化は、先ほどと逆の挙動になっています。

-デモ-

Twitter
Instagram
Hatena

CSSの変更点としては、color・border・backgroundの指定を上記のものと入れ替えているだけです。

.sidebar__follow-btn a:hover{
    background:#fff;
}
.sidebar__follow-btn .hatena {
    color: #fff;
    border: 1px solid #38393C;
    background: #38393C;
}
.sidebar__follow-btn .hatena:hover{
    color:#38393C;
}
.sidebar__follow-btn .twitter{
    color: #fff;
    border: 1px solid #55acee;
    background: #55acee;
}
.sidebar__follow-btn .twitter:hover{
    color:#55acee;
}
.sidebar__follow-btn .instagram {
    color: #fff;
    border: 1px solid #cc4895;
    background: #cc4895;
}
.sidebar__follow-btn .instagram:hover{
    color:#cc4895;
}