設置のきっかけ
はてなブログ既存の「読者になる」ボタンが、表示されないことが増えました(下の画像参照)。ボタン自体の読み込みが遅いからなのか、他のカスタマイズをした影響なのか、私には原因がわかりません。
でもこのまま放置しておくのはイヤなので、カスタマイズの読者登録ボタンを設置することにしました。
読者登録・フォローボタン
参考サイト
ボタンのコードは以下のサイトのものを使わせていただきました。
SNSフォローボタンをフラットにカスタマイズする方法を初心者にもわ分かりやすく解説します。 - DREAMARK
コードも説明も、本家様が詳しく書いてくださっているので、このサイトに転載はしません。
サイドバーに設置したので、PCでは右側、スマホでは下の方に表示されます。開いた画面のサイズに合わせて、自動的にボタンの幅が変わる優れものです。
テーマ「CONTENTS」について
ちなみに私のサイトは、先述のサイトの筆者である、JOE (id:dreamark)さんが作成したテーマ「CONTENTS」をベースとして使用させていただいております。ありがとうございます。
改めてテーマのサイトを見ると、気づいてなかったカスタマイズが元々施されていることに気づきました。まだ全然使いこなせていない。
ブログ開設当初は何のことだかさっぱりわからなかったので、わかるようになっただけ進歩したとは言えますが。
使いやすいように考えられているテーマ、ありがたいです。せっかく用意されている仕様は、今後のカスタマイズ候補としておきます。
ボタン内容の調整
完成イメージ
微調整させていただき、出来上がったものがこちら。
(見本)
変更点
今回は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で貼り付けたら設置完了。
プロフィール文の下に直で貼り付けたらうまく表示されなかったので、別枠にしました。
以上。
元々、はてなブログのボタンは表示が重たかったので、これでサイトの表示自体も少しは早くなった?かもです。(計測し忘れましたが、体感では早くなりました。)
なにより、ボタンの文字が表示されない問題はなくなったので良かったです。
#はてなブログ に投稿しました。
— やぁのん (@yaanon_21) January 15, 2021
既存の「読者になる」ボタンが、うまく表示されなくなったので、カスタマイズで読者登録&各種フォローボタンを設置しました。
-
読者登録・フォローボタンを設置(はてな「読者になる」ボタン不具合につき) - はんこキャプターやぁのんhttps://t.co/cFpl6I6tFY