【サイドバーでYouTubeボタンを作成】Subscribeボタンの統一化

１．以前までのサイドバー

今まではYouTubeとTwitterのみ公式のフォローボタンを設定し、

Instagramに関しては非公式のボタンを採用していました。

しかし、各社でボタンサイズが異なったり、レイアウトが異なるため、なんか気持ち悪いなとずっと思っていたので

統一感あるボタン表示にしました！

２．完成版のサイドバッジ

それがこれです。

統一感があって素晴らしいでしょう！

しかし、どこかで見たことあるという方もいるかも知れません。

そうです。

下記サイトを参考にしました。

www.yuuu-nii.com

でもこのブログに掲載されているボタンは

はてなブログのボタンなのです。

そもそも、はてなブログのボタンは公式で用意されているので、

私にとって不要であり、むしろYouTubeのボタンを設置したいと思ったので自分なりにアレンジしました。

ちなみに公式のYouTubeボタンを設置したい方は下記ブログを参考にしてみてください！

maistylecreate.com

３．それでは作成方法の紹介（HTML編）

基本は上述のYUUU BroGさんの記事を参考にしています。

ーーーーーーー引用文（一部改変）ーーーーーーーー

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

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

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

<div class="sidebar__follow-btn">



<a class="twitter" href="https://twitter.com/intent/follow?screen_name=IDを設定" target="_blank">

 

Twitter

</a>



<a class="instagram" href="https://www.instagram.com/ユーザー名を設定"　target="_blank">

 

Instagram



<a class="YouTube" href=" http://www.youtube.com/channel/IDを設定?sub_confirmation=1" target="_blank">

 
YouTube
</a>
</div>

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

青字で記載されている内容については下記を参考にしてください。

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

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

Instagram
インスタのURLで「ユーザー名を設定」となっているところを、自分のユーザー名に差し替えてください。

https://www.instagram.com/ユーザー名を設定

YouTube
YouTubeも同様に「IDを設定」となっているところを、自分のIDに差し替えてください。

http://www.youtube.com/channel/IDを設定?sub_confirmation=1

YouTubeのIDの調べ方は下記サイトを参考にしてください。

medifund.jp

４．作成方法の紹介（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 .YouTube {
color: #FF0000;
border: 1px solid #FF0000;
background: #fff;
}
.sidebar__follow-btn .YouTube:hover{
background:#FF0000;
}
.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;
}