JLS.co

Japan Life Specter

はてなブログにTwitterフォローボタンをサイドバーにつける方法

f:id:JLSco:20161207232346p:plain

 Life Specterです。Twitterは多くの人が活用しているアプリケーションで、多くの情報を手に入れることができます。またブログ等を書いている人は、自分の書いた記事をどこかで役に立てて欲しいと願っています。今回はTwitterフォローボタンをはてなブログのサイドバーにつける方法について書きたいと思います。

 ステップ1 Twitterボタン作成サイトにてボタン作成

Twitterボタン作成サイトにアクセスします。下記にリンクを貼っておきます。

Twitterボタン作成サイト

Twitterボタン作成サイトにアクセスすると画像1が表示されます。

画像1

f:id:JLSco:20161207233300p:plain

 Twitterボタン作成サイトにてボタンを作成します。今回は読者にフォローして欲しいという目的からフォローボタンを作成します。画像2のようにフォローボタンをクリックします。

画像2

f:id:JLSco:20161207233416p:plain

 今回はカスタマイズも行いました。フォローボタンを大きくするために、画像3、ボタン(大)のチェックをクリックします。チェックすると出来上がりの大きさが変わります。

 画像3のようにフォローボタン下のコードをコピーします。

画像3

f:id:JLSco:20161207233915p:plain

ステップ2 はてなブログに挿入する

 自身のはてなブログの「デザイン」→「カスタマイズ」→「サイドバー」へ移動します。移動すると画像4が表示されます。モジュールの追加をクリックします。

画像4

f:id:JLSco:20161207234359p:plain

 モジュールの追加をクリックすると、画像5表示されます。そこで「HTML」をクリックします。

画像5

f:id:JLSco:20161207234656p:plain

 「HTML」をクリックしたら、画像6のように任意の題名を入力し、下のコードを入れるところに先ほど画像3でコピーしたコードをペーストします。ペースト後、適用クリックします。最後に変更を保存をクリックします。

画像6

f:id:JLSco:20161207234338p:plain

ステップ3 表示確認

 画像7のように表示されることを確認したら、完成です。

画像7

f:id:JLSco:20161207235245p:plain

最後に

 今回はサイトのカスタマイズとしてはてなブログTwitterフォローボタンをサイドバーにつける方法について書きました。大きな派手さはありませんが、自分をアピールするために使えるボタンだと思います。是非参考にしてみてください。