ＲＳＳフィードとＦｅｅｄｌｙのアイコンをＷｏｒｄＰｒｅｓｓ(ＳＴＩＮＧＥＲ７)にウィジェットで表示させてみた
2020/04/01
ＳＴＩＮＧＥＲ７の“ＲＳＳボタン”は目立たない
今のところＷｏｒｄＰｒｅｓｓのテーマで、“ＳＴＩＮＧＥＲ７”ってのを使ってるんですが。
その“ＳＴＩＮＧＥＲ７”の仕様なのか、あるいは元々のＷｏｒｄＰｒｅｓｓのデザインなのか分かりませんが、一応デフォルトで右のサイドバーにＲＳＳボタンが表示されるようになってまして。
ところがそれが、細長い四角に小さなＲＳＳフィードのマークと「購読する」という文字が書いてあるだけで、実に目立たなくて気づく人いなくね？って感じなんですよね。
というわけで、もっと分かりやすく目立つようなフィードのアイコンをつけたいなと、いろいろ調べてやってみましたので記録しておこうかなと。
ちなみに現在右最上部と左最下部にあるアイコンが、今回取り付けたＲＳＳフィードとＦｅｅｄｌｙのアイコンです。
まずはＦｅｅｄｌｙのアイコンを用意
最初にＦｅｅｄｌｙのアイコンを用意するんですが、これにはＦｅｅｄｌｙの公式のサイトで“Ｆｅｅｄｌｙボタン”を作って、それをそのまま利用することに。
まずは、Ｆｅｅｄｌｙボタン作成用ページへ行きまして。
まず「Ｓｔｅｐ１」として、いろいろあるボタンの中から一番大きいやつを選んで、その画像をクリックします。
次に「Ｓｔｅｐ２」としてブログのフィードのＵＲＬを入力するんですが、このＵＲＬは上で目立たないと言った、デフォルトでブログに表示されている“ＲＳＳボタン”のリンクのＵＲＬをコピーして利用します。
よくある間違いで、フィードのＵＲＬと勘違いしてサイトのＵＲＬを入力してしまうことがあるようなので、そこは十分に注意しましょう。
そして最後に「Ｓｔｅｐ３」として、生成された“Ｆｅｅｄｌｙボタン”のコードをクリップボードにコピーすればオッケーです。
ＲＳＳフィードのアイコンを用意
上記で作った“Ｆｅｅｄｌｙボタン”と並べて表示するにあたって、ＲＳＳフィードのアイコンも似た雰囲気のものが欲しいなと思ったんですが。
なんとそれを作ってた方がいらっしゃいまして、あぁ・・・ネットの世界ってすばらしい！
というわけで、「並べて使おうと、ｆｅｅｄｌｙの購読ボタンっぽいデザインのＲＳＳボタンを作ってみた。ので公開。 - ｓａｂｏｔｅｍ ＊ ｂｌｏｇ」の記事からボタンアイコンをありがたく頂戴することに。
ダウンロードしたＺＩＰファイルの中から“Ｆｅｅｄｌｙボタン”と同じサイズの画像を選びまして、それをサーバーのどこかにアップロードしておきます。
私は、記事で使う画像と同じフォルダに放り込んでやりましたよと。
ブログのサイドバーに“Ｆｅｅｄｌｙボタン”と“ＲＳＳボタン”を設置
それでは、ボタンのアイコンが準備できましたので、これらをブログのサイドバーに表示されるように設定します。
ＷｏｒｄＰｒｅｓｓの管理画面の「外観」から「ウィジェット」を選びまして、そこの「ヘッダー用ウィジェット」のところに「テキスト」のウィジェットをドラッグ＆ドロップしてやります。
すると「テキスト」ウィジェットの設定ダイアログが開きますから、「タイトル」と「内容」を記入します。
「タイトル」は自分が管理しやすくするためのものなので、適当に「ＲＳＳ＆Ｆｅｅｄｌｙ」とか何とか書けばよろしいかと。
そして「内容」のほうですが、ここで“Ｆｅｅｄｌｙボタン”を作ったときにクリップボードにコピーしたコードを利用するわけで。
そのコードを２つ貼り付けまして。
なぜ２つかというと、１つはそのまま“Ｆｅｅｄｌｙボタン”として使用して、もう１つは“ＲＳＳボタン”として使用するんですね。
“ＲＳＳボタン”として使うほうには、上記でアップロードしたＲＳＳアイコンを表示させたいので、画像のｉｍｇタグのところをＲＳＳアイコンのＵＲＬに変えてやります。
同様にリンクもＲＳＳフィードのリンクにしたいので、ａタグのリンク先をＲＳＳフィードのＵＲＬに変えてやります。
このＵＲＬは、“Ｆｅｅｄｌｙボタン”を作るときに使った、ブログのＲＳＳフィードのＵＲＬと同じですね。
さて、これで“Ｆｅｅｄｌｙボタン”と“ＲＳＳボタン”が出来上がりましたが、このままだとボタンが上下に並んでしまいます。
私はこれを左右に並べたかったので、ＣＳＳのｆｌｏａｔ属性を使って並び方を変えてやりました。
というわけで、「テキスト」のウィジェットの「内容」に書き込んだコードは、以下のように。
<span style="float:left;">
<a href='https://blog.o-kay.biz/?feed=rss2' target='blank'><img src='【ＲＳＳボタンのアイコン画像のＵＲＬ】' alt='rss feed' width='131' height='56'></a>
</span>
<span style="float:left;">
<a href='https://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fo-kay.biz%2Fblog%2F%3Ffeed%3Drss2' 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>
</span>
<br clear="both"/>
上の黄色い部分が“ＲＳＳボタン”のコードで、下の青い部分が“Ｆｅｅｄｌｙボタン”のコードをそのまま貼り付けたところですね。
最後にウィジェットの“保存”ボタンをクリックしたら、完成です！
ブログを表示してみて、どのようになってるか確認しまして。
問題無ければデフォルトのフィードのボタンは必要ないので、ＷｏｒｄＰｒｅｓｓの管理画面の「ＳＴＩＮＧＥＲ管理」で、「ＲＳＳボタンを表示しない」にチェックを入れて表示を消してやりました。
まとめ
今回は「ヘッダー用ウィジェット」を使用して、ブログの右最上部と左最下部へボタンを表示するようにしましたが、普通にサイドバーに表示する場合は「サイドバーウィジェット」に同じ手順で設置するといいですね。
とにかく私は、フィードのボタンは目立つところに表示しないと意味が無いと思ってますので、でかいボタンが表示されてナカナカ満足のできになりましたよ。
