私のブログで使用しているQooQのバージョンが1.31というものなのですがこのバージョンのQooQだと、SNSのシェアボタンは下記のようになっています。(もしかしたら最新バージョンでアップデートされているかもしれませんが、、、)
左端がTwitterのシェアボタンなのですが、最近時はTwitterがXになっているので、少しメンテナンスしていきたいと思います。また、作業をする前は必ずバックアップを取ってください
↓(関連)SNSのシェアボタンを追加する
現状の把握
ブログのHTMLを確認し、"twitter"で検索すると下記のように".single-share-twitter"という文字列を発見することが出来ます。中身を確認するとURLなどがあるため、この辺りの記述でSNSシェアボタンを作っていることが分かります。(HTMLの確認の仕方が分からない方はこちらの記事を参考にしてください。)
他にも"twitter"で検索すると下記のように".single-share-twitter"という文字列を発見することが出来ます。
蛇足になりますが、#55aceeという色は下記のような色でなんとなく、Twitterのカラーと同じであるという事が分かります。
今回は文字列をXに変更するという作業とbackgroundの色を黒っぽくする作業を実施していきます。
実際に変更作業を実施する
現状が分かったので、ここからはメンテナンス作業をしていきます。
まず変更するのは下記の場所です。
①titleを"Xでポストする"に変更(黄色マーカ)
②tとなっていた文字をXに変更(オレンジマーカ)
Class名がtwitterになっていて、それをXに直そうか迷いましたが、Xに直さなくても影響がないと考え、ここは修正しませんでした。(気になる人は直してもいいかもしれないです。)
一応変更後のコードはこちらになります。該当箇所のコードを下記に置き換えてください。
<a class='single-share-twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.canonicalUrl + "&text=" + data:post.title' target='_blank' title='Xでポストする'>X</a>
この修正を実施した後に保存して作業内容が反映されているか確認します。
文字がXになっているのとマウスオン時に表示される文字列が"Xでポストする"に変更されたのが確認できます。
次に背景色の変更です。今のままだと水色っぽい色なので黒色に変更していきます。Xのアイコンの色をカラーピッカーツールで確認します。
(カラーピッカーツールはマイクロソフトのPowertoysを使用しています。)
ネットでアイコンを調べて、カラーコードを確認すると"000000"で完全な黒であることが分かります。
修正が終わったので、保存して変更が正しく反映されているか確認します。
Fontawsomeを使ってアイコンの修正をする
このままでもいいと思いますが、各SNSのアイコンを使用したいと考え、修正方法をまとめていきます。
今私のブログはFontawsome 5を使用しているのですが、XのアイコンがFontawsome 6以降じゃないと無いため、まずはFontawsome 6対応をします。
Fontawsome 6の対応
Fontawsome 5の途中から会員登録が必要となったみたいなので、まずは会員登録をします。
私の環境が原因なのか不明ですが、なぜかChorome環境だとサイトが上手く表示できなかったため、edgeから下記サイトにアクセスします。
アクセスしたら会員登録を行います。
会員登録が終わったらKitと呼ばれるものが生成されていると思うので、Kitの確認を行います。
このコードをコピーしてください。(アカウントごとにユニークなIDが割り当てられてそうでしたので、念のため一部塗りつぶしています)
私の場合は下記の場所に張り付けてました。
(補足)Fontawsome 6は下位互換性があり
私はFontawsome 5を使用していたのですが、Fontawsome 5で使用していた記述を特に変更することなく、使用することが出来ているため下位互換性があることが分かります。
但し、Fontawsome 4の下位互換性は完ぺきではないみたいで、お手当てが必要みたいです。詳細は下記リンク先を参照お願いします。
もし、Fontawsome 4から移行する方がいたら上記リンク先に対処方が記載されているため、ご確認お願いします。
Xのアイコンを表示するようにする
Fontawsome のサイトでXのアイコンを調べると下記ページが出てきます。
ここに記載されている文字列をコピーしてください。(クリックするだけでコピーが出来ます)
念のため今回使用したコードを張り付けておきます。該当箇所をこちらのコードに差し替えお願いします。
<a class='single-share-twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.canonicalUrl + "&text=" + data:post.title' target='_blank' title='Xでポストする'>
<i class='fa-brands fa-x-twitter'/>
</a>
変更したら保存して、変更が反映されているか確認します。
(補足)Fontawsome 6でアイコンの設定を変えてみる
アイコンのページを見ていたら"Styling Tools"というものがあるのを見つけました。
①色
②サイズ
③アニメーションの有無
④アイコンの回転
とりあえず今回はBounceというものを選んでみます。
設定を変えるとコードも変更されるため、再度こちらのコードを先ほどの場所に張り付けます。
再度保存して反映されているか確認したところ、無事繁栄されていることが分かります。(アニメーションなので、実際に私のブログの記事を見て確認お願いします。アイコンがジャンプするようになりました。やかましいと思う人もいるかもしれませんが一旦これで様子を見てみます。)
まとめ
今回はQooQのSNSシェアボタンを修正し、Twitter→Xに変更しました。SNSのシェアボタンの作り方が分かったので、他のSNSでもシェアできるように改造していきたいと思います。
0 件のコメント:
コメントを投稿