Maximal Life

渋谷で働く営業本部長のブログ

はてなブログ:サイドバーのプロフィールに SNS ボタンなどを設置する方法

f:id:ss17935:20190202115755j:plain

 

サイドバーのプロフィールをもう少しカスタマイズしてみたいと思いました。

現状は標準のプロフィールの画像を大きくしただけ。↓

 

f:id:ss17935:20190211201933p:plain

 

 

”読者になるボタン”、”Twitter フォローボタン”も標準のプロフィールで表示させてます。

これだと、順番の入れ替えすらできません。

ましてや他の SNS ボタンの設置なんてできません。

これを解決するには、すべて HTML で記述するしかないのです。

HTML なんてまったく分かりませんが、コピペだけでカスタマイズしてみました。

 

 

読者になるボタンを設置する

プロフィールの設定でチェックを入れるだけでも表示は可能です。

ただし設置位置などを自由に変更するためには HTML で記述します。

でも、自分で考える必要はありません。

「設定」→「詳細設定」→「読者になるボタン」

と移動すると、そこに HTML が記述してあります。

それをコピーして「サイドバー」の”ブログの説明”に貼り付けます。

これで”読者になるボタン”が表示されます。

 

Twitter フォローボタンを設置する

こちらもチェックのみで設置できるのですが、あえて HTML で記述します。

これにより自由度が増します。

こちらは以下を「サイドバー」の”ブログの説明”に貼り付けます。

 

<div class="hatena-follow-button-box btn-twitter"><a href="https://twitter.com/ss17935" class="twitter-follow-button" data-show-count="false" data-lang="ja"> @ss17935をフォロー</a></div>

 

もちろんこれもネットを徘徊してみつけたコードです。

赤字の部分は自分のアカウントに修正する必要があります。

 

Feedly ボタンを設置する

こちらは HTML で書かないと設置できないボタンです。

以下のコードを「サイドバー」の”ブログの説明”に貼り付けます。

 

<p><a href="https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2Fss17935.hatenablog.com%2Ffeed" target="blank"><img id="feedlyFollow" src="https://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png" alt="follow us in feedly" width="131" height="56" /></a></p>

 

赤字のリンク先は自分用に書き換える必要があります。(多分)

 

 

f:id:ss17935:20190211204150p:plain

 

こんな感じになりました。

Feedly のボタンが挿入されてます。

Twitter のボタンもカスタマイズできると思うのですが、今はやり方がわかりません。

こちらはそのうち調べて実装したいと思います。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ