魂を揺さぶるヨ!

ブログを通じて「魂を揺さぶり情熱を燃やせる何か」を探し人生を楽しみたいと考えている30代の男です。 アウトドア、インドア、なんでも好きです。哲学や心理学にも興味があります。

サイドバーのプロフィールにTwitterのフォロワーの人数を表示する方法【図解あり!】

スポンサーリンク


こんにちはユレオです!


前回Twitterのフォローボタンにフォロワーの人数が表示する方法記事にしました。 

www.tamashii-yusaburuyo.work

  

さーて、ではさっそくサイドバーのプロフィールに張り付けようとしたところ、思わぬ落とし穴があったので記事にします。

 

うーん、これどうやってんだろ? 

f:id:soul-vibration:20170702095403j:plain

 

プロフィールには元の機能でTwitterのフォローボタンが追加できるのですが、どうやってもフォロアー数を表示させることができません。

f:id:soul-vibration:20170702100516j:plain

 

そんなわけでユレオは悩んだのですが、解決方法があったのでまとめました。

 

設定手順1 Twitter公式のフォローボタンを取得する。

 1:Twitterのフォローボタンを作成ページに行きます。

  https://about.twitter.com/ja/resources/buttons#follow

 

2:Twitterのフォローボタンをカスタムします。

  デザインはどんな形でも構いませんので各項目に従って進めてください。

f:id:soul-vibration:20170701210946j:plain

設定が必要なのは以下の通りです。

 

 ①:ボタンの選択。タイプは「フォローする」を選んでください。

 

 ②:ユーザー名を入力。(例:tamashii_yusa)

 

 ③:ボタンのカスタマイズ。

 

  「ユーザー名の表示」のチェックは外すのをお勧めします。

 

 ④:設定後に出力されたコード内を全てコピーします。

 

設定手順2 はてなブログ画面

1:はてなブログの デザイン→カスタマイズ→サイドバー→モジュールを追加を押します。

f:id:soul-vibration:20170702100925j:plain

 2:モジュールの追加で各種設定を行います。

f:id:soul-vibration:20170702101728j:plain

 ①:モジュールをHTMLにする。

 

 ②:タイトルを入力。プロフィールでも自己紹介でもなんでOK。

 

 ③:コードを張り付ける。

 

 ④:「data-show-count="false"」という部分を「"true"」に変更します。

  

3:画面を切り替えるとサイドーのプロフィールにフォローボタンとフォロワー数が表示されます。

f:id:soul-vibration:20170702102148j:plain

 

4:HTMLの編集でプロフィールをカスタムします。

 HTMLなので読者ボタンや写真を張るなど自由自在にカスタムできます。

f:id:soul-vibration:20170702102654j:plain

 

 

以上で終了です。

 

記事の内容としては「プロフィールを自在にカスタムする方法」になりますね。

 

結構な方のブログではサイドバーのモジュールがプロフィールと見せかけてHTMLだったりするわけです。

 

 

  合わせてお読みください 

 

スポンサーリンク