はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ

読者登録・フォローボタンを設置(はてな「読者になる」ボタン不具合につき)

記事名と
URLをコピー

設置のきっかけ

はてなブログ既存の「読者になる」ボタンが、表示されないことが増えました(下の画像参照)。ボタン自体の読み込みが遅いからなのか、他のカスタマイズをした影響なのか、私には原因がわかりません。

f:id:yaanon:20210113201524j:plain

でもこのまま放置しておくのはイヤなので、カスタマイズの読者登録ボタンを設置することにしました。

読者登録・フォローボタン

参考サイト

ボタンのコードは以下のサイトのものを使わせていただきました。
SNSフォローボタンをフラットにカスタマイズする方法を初心者にもわ分かりやすく解説します。 - DREAMARK

コードも説明も、本家様が詳しく書いてくださっているので、このサイトに転載はしません。

サイドバーに設置したので、PCでは右側、スマホでは下の方に表示されます。開いた画面のサイズに合わせて、自動的にボタンの幅が変わる優れものです。

テーマ「CONTENTS」について

ちなみに私のサイトは、先述のサイトの筆者である、JOE (id:dreamark)さんが作成したテーマ「CONTENTS」をベースとして使用させていただいております。ありがとうございます。

改めてテーマのサイトを見ると、気づいてなかったカスタマイズが元々施されていることに気づきました。まだ全然使いこなせていない。
ブログ開設当初は何のことだかさっぱりわからなかったので、わかるようになっただけ進歩したとは言えますが。

使いやすいように考えられているテーマ、ありがたいです。せっかく用意されている仕様は、今後のカスタマイズ候補としておきます。 

ボタン内容の調整

完成イメージ

微調整させていただき、出来上がったものがこちら。

f:id:yaanon:20210113202349j:plain

(見本)

変更点

今回は4点、自分用に直して設定しました。

  1. Facebookページのリンクへ飛ぶ
  2. Facebookの新アイコンに変更
  3. YouTubeボタンに変更
  4. マウスオーバーでボタンの内容が出るようにする

Facebookページのリンクを設定

Facebookボタンにリンクを設定したら、Facebookページではなく個人のFacebookに飛んでしまいました。調べると、Facebookページのフォローボタンは、ブログに貼れない、とのこと。
[FB]Facebook ページは「フォロー」ボタンが効かない模様 | WEBデザインのTIPSまとめサイト「ウェブアンテナ」

「いいね」ボタンは設置できますが、Facebookページの「いいね」は、近いうちに廃止されるとか。
Facebook、ページでの「いいね」を廃止し、「フォロー」に一本化へ - ITmedia NEWS

だから、Facebookページのリンクに飛ぶのみのボタンにしました。ページを開きさえできれば、そこからフォローしてもらえますものね。

コードはFacebookボタンのhref=の直後にリンクを書くだけ。

Facebookの新アイコンに変更

2019年5月にロゴが変わったとのことなので、ロゴを変更。
【2020年更新】Facebookロゴが新しくなりました(新旧比較画像・ダウンロードリンクあり)

公式サイトの注意書きはこちらからご確認を→「f」ロゴ

ロゴのコードはFont Awesomeのサイトで確認しました。

i class="fab fa-facebook"

YouTubeボタンに変更

Feedryは使っていないので、YouTubeのボタンに変更。先述のFont AwesomeのサイトからYouTubeのアイコンをコピー。自分のYouTubeリンクに飛ぶように設定しました。

ロゴの色味は下記のサイトのコードを参照しました。
主要SNS・WEBサービスのブランドカラーコードまとめ – ukaR

ボタンタイトルを追記

わかりやすくしたい、という自己満足的な要素ではあります。でも、画面読み上げツールを使っている人には、少しは役立つのかな?なんて。

title="Twitterでフォロー"

上記のようなコードで、ボタンにマウスカーソルを重ねたら何のボタンなのかが表示されるようにしました。

サイドバーに貼り付け

サイドバーにHTMLで貼り付けたら設置完了。
プロフィール文の下に直で貼り付けたらうまく表示されなかったので、別枠にしました。

以上。

元々、はてなブログのボタンは表示が重たかったので、これでサイトの表示自体も少しは早くなった?かもです。(計測し忘れましたが、体感では早くなりました。)

なにより、ボタンの文字が表示されない問題はなくなったので良かったです。