ゆうう兄のまったり奮闘記

YUUU BROG -ゲームとイラストとWebデザイン-

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

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

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

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

 

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

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

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

 

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

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

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

 

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

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

-デモ-

 

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は先ほどご紹介したものと一緒です。

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

-デモ-

 

 

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;
}

 

はてなブログではデフォルトで使用できるアイコンがたくさんあるので、ボタンもおしゃれなものを簡単に作れるのがよいですね!

ぜひ試してみてください!

「こだわり」が収入になる! インスタグラムの新しい発信メソッド (DOBOOKS)

「こだわり」が収入になる! インスタグラムの新しい発信メソッド (DOBOOKS)

  • 価格: 1,760円
    (2019.09.04 17:50時点)
  • 作者: 艸谷真由
  • 出版社/メーカー: 同文舘出版
  • 発売日: 2019/05/22
  • メディア: 単行本(ソフトカバー)

 

あわせて読みたい
www.yuuu-nii.com www.yuuu-nii.com