【はてなブログ】サイドバー「Twitterフォローボタン」を大きくする

どうも、ブログ運営者のポチ（@sunrise_033）です。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

そんな疑問の答えます。

この記事では、はてなブログでTwitterフォローボタンドバー大きくカスタマイズする方法を見ていきます。

4ステップで簡単にカスタマイズできます。

この部分をアピールすることで、SNSツールであるTwitterを知ってもらうことやアピールしたい時や運営側がどんな人なのかを読者に知ってもらいたい時にも有効な手段になります。

「Twitterフォローボタン」ってなに？

Twitterフォローボタンとは、自身のTwitterアカウントにアクセルするためにリンクボタンのことです。

こんな感じのボタンです。

サイトに訪れてくれた人にTwitterやっていますよと知らせるのに便利です。

ブログとTwitterを繋げるのには欠かせません。

サイドバーに「Twitterフォローボタン」を貼る方法

管理画面から「デザイン」→「カスタマイズ」→サイドバーから「モジュール追加」でHTMLを選択します。

HTML記述内にコード入力して適用させます。Twitterボタンコードの確認方法は下記記事の「Twitterボタンのコードを確認してボタンを作成する」にまとめています。参考にどうぞ。

「Twitterフォローボタン」をカスタマイズする方法

次にTwitterフォローボタンを大きくする方法を紹介します。

完成形はこちらです。

このように大きめなボタンをつけることができて、存在をアピールすることができます。それでは手順を見ていきます。

【手順1】サイトからボタンデザインを選択

ぞれぞれ解説していきます。

【手順1】サイトからボタンデザインを選択

下記のサイトからボタンデザインを選択します。このサイトはサルワカさんのデザインパーツを載せているいつもお世話になっているサイトです。

saruwakakun.com

【手順2】CSSコードを貼り付ける

好きなパーツを見つけたら、CSSコードをデザインCSSに貼り付けます。

「管理画面からデザイン」→「カスタマイズ」→一番下にある「デザインCSS」に貼り付けます。

実際に貼り付けたCSS↓

.btn-social-icon-twitter {
text-decoration: none;
display: inline-block;
text-align: center;
color: #1da1f3;
font-size: 25px;
text-decoration: none;
}

.btn-social-icon-twitter:hover {
color:#88daff;
transition: .5s;
}

.btn-social-icon-twitter__square {
border-radius: 10px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
color: #FFF;
background: #1da1f3;
}

.btn-social-icon-twitter__square i {
line-height: 50px;
}

【手順3】ロゴマークを適用させるコードを貼り付ける

次にロゴマークを適用させるコードを「ヘッダのタイトル下」に貼り付けます。

ヘッダに貼り付けるコード↓

<div style="clear:both"></div>
<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

【手順4】HTMLコードをサイドバーに貼り付ける

最後に、上記サイトから選んだHTMLコードをサイドバーに貼り付けます。

サイドバーにHTMLを貼り付ける方法は、

管理画面から「デザイン」→「カスタマイズ」→サイドバーから「モジュール追加」でHTMLコードを選択して貼り付けます。

実際に貼り付けたHTMLコード↓

<a href=“＃” class="btn-social-icon-twitter">
<span class="btn-social-icon-twitter__square"><i class="fab fa-twitter"></i></span> Follow Me
</a>

「＃」部分にツイッターアカウントURLを貼り付けます。ツイッターアカウントURLは「https://twitter.com/」にユーザー名＠の後ろ部分を入力します。

＊僕の場合は↓
https://twitter.com/sunrise_033
になります。

貼り付けると、こんな感じになります。

これで完成です。お疲れ様でした。

さいごに：ツイッターボタンを大きくしていっぱいツイッターを見てもらおう

以上がツイッターボタンを大きくしてサイドバーに貼りつける方法でした。

ツイッターとブログの相性は良いと言われています。活用していくためのヒントになれれば幸いです。

NXET→ サイドバー「カテゴリ」をタグ風にする方法

最後まで読んでいただき、ありがとうございます。

 

↓「ブログ村ランキング」参加中！