【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

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

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

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

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
うさぎ
はてなブログでツイッターの「SNSボタン」をサイドバーに設置できるのかな?大きくカスタマイズしてボタンを目立たせたい。

そんな疑問の答えます。

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

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

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

目次

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

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

f:id:sanrisesansan:20200814145913j:plain

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

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

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

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

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

f:id:sanrisesansan:20200814150355j:plain

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

「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

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

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

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

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

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

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

あわせて読みたい
はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

 

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

↓「ブログ村ランキング」参加中!
ブログランキング・にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

カスタマイズ性の高いテンプレートやSEO対策機能で、プロフェッショナルなブログを作り、ブログの魅力と集客力を高めましょう!

\ サーバーやインストール不要、2年版でお得!

\ はてなPROで出来るカスタマイズまとめ

コメント

コメントする

目次