さんログ

色々と発信する雑記ブログ。食レポ、おすすめ発信や情報、メンタル/不思議系など。

タイトルのテキスト
タイトルのテキスト
タイトルのテキスト

簡単4ステップ!Twitterフォローボタンのカスタマイズ方法【はてなブログ】

f:id:sanrisesansan:20200814160411p:plain

はてなブログツイッターの「SNSボタン」をサイドバーに設置できるのかな?大きくカスタマイズしてボタンを目立たせたい!

そんな疑問の答えます。

今回は、はてなブログTwitterフォローボタンドバー大きくカスタマイズする方法を見ていきます。
4ステップで簡単にカスタマイズできるので、Twitterを知ってもらうことやアピールしたい時にもおすすめです。

 


スポンサードリンク
 

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

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

f:id:sanrisesansan:20200814145913j:plain


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

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

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

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

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

f:id:sanrisesansan:20200814150355j:plain

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

www.sunrise033.com

 

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

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

完成形はこちらです。

f:id:sanrisesansan:20200814011153j:plain

 

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

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

1.サイトからボタンデザインを選択

2.CSSコードを貼り付ける

3.HTMLコードをサイドバーに貼り付ける

4.HTMLコードをサイドバーに貼り付ける

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

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

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

saruwakakun.com

 

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

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

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

f:id:sanrisesansan:20200814150608j:plain


実際に貼り付けた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】ロゴマークを適用させるコードを貼り付ける

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

f:id:sanrisesansan:20200814151144j:plain

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

<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コードを選択して貼り付けます。

f:id:sanrisesansan:20200814151231j:plain

 

実際に貼り付けた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になります。

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

f:id:sanrisesansan:20200814154045j:plain

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

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

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

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

 

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

合わせて読みたい

www.sunrise033.com

 

この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

 ブログ村ランキング」参加中!

ブログランキング・にほんブログ村へ