【WordPress】サイドバーにSNSフォローボタンを表示させる方法

いろんなブログ等を見ているとサイドバーにフォローボタンが表示されているのをよく見かけるけど「あれってどうやるんだろう？」と思い自分で調べて配置してみたのでそれについてまとめようと思います。

WordPressの状態は下記の感じです。

• WordPressのバージョン5.2.2
• テーマはStartMagazine

snsボタンの追加方法

追加するときにデザインはこちらのブログを参考にしました。

8種類のSNSフォローボタンのCSSカスタマイズ18選

style.cssの修正

使っているテーマに読み換えてください。

ここではstart-magazineを使っているので下記のファイルパスになっています。

wp-content/themes/start-magazine/style.css

style.cssの末尾に以下のコードを貼り付けます。

    /* アイコン周り全体 */
.followbtn{
    font-family:'Arial',sans-serif;
    display:inline-block;
    position:relative;
    width:90%;
    height:50px;
    font-size:23px;
    border-radius:5px;
    color:#fff!important;
    text-decoration:none;
}
.followbtn i{
    position:relative;
    bottom:5px;
}
/* Twitter */
.fl_tw{
    background:#55acee;
}
/* Instagramアイコン位置 */
.insta_btn .fa-instagram{
    font-size:26px;
}
/* Instagram紫グラデ背景色 */
.insta_btn{
    background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    overflow:hidden;
}
/* Instagramオレンジグラデ背景色 */
.insta_btn:before{
    content: '';
    position:absolute;
    top:26px;
    left:-75px;
    width:100%;
    height:100%;
    background:-webkit-radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 80%);
    background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 80%);
}
/* アイコンボタンホバー時 */
.followbtn:hover{
    text-decoration:none;
    opacity:.8;
}
/* ボタン内テキスト調整 */
.followbtn div{
    font-size:16px;
    position:relative;
    bottom:14px;
}
/* ulタグの内側余白を０にする */
ul.snsbtn{
    padding:0!important;
}
.snsbtn_list:before{
    content: none!important;
}
/* アイコンボタンの位置調整 */
.snsbtn{
    display:flex;
    flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtn li{
    flex:0 0 48%;
    text-align:center!important;
}

サイドバーにカスタムHTMLを挿入＆編集

1. WordPressの管理画面の外観を選択
2. カスタムHTMLをドラッグアンドドロップ
3. HTML編集

HTMLの内容

    
<ul class="snsbtn">
    <li class="snsbtn_list"><a  href="https://twitter.com/自分のツイッターのアカウント名を入れる" class="followbtn fl_tw"><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
    <li class="snsbtn_list"><a href="https://www.instagram.com/自分のインスタのアカウント名を入れる/" class="followbtn insta_btn"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
</ul>

以上が設定方法でした。もしWordPressを使っていてサイドバーにSNSフォローボタンを追加したいという要望があればこの記事が参考になれば幸いです。