私のブログで使用しているQooQのバージョンが1.31というものなのですがこのバージョンのQooQだと、SNSのシェアボタンは下記のようになっています。(もしかしたら最新バージョンでアップデートされているかもしれませんが、、、)
また、作業をする前は必ずバックアップを取ってください
↓(関連)ＳＮＳのシェアボタンを追加する
現状の把握
ブログのHTMLを確認し、"twitter"で検索すると下記のように".single-share-twitter"という文字列を発見することが出来ます。中身を確認するとURLなどがあるため、この辺りの記述でSNSシェアボタンを作っていることが分かります。(HTMLの確認の仕方が分からない方はこちらの記事を参考にしてください。)
また、SNSシェアボタンは画像ではなく文字列で表示しているだけという事もわかります。(例えば上記図のオレンジでマーカした場所が小文字のtとなっており、この文字を表示しているだけです。)
他にも"twitter"で検索すると下記のように".single-share-twitter"という文字列を発見することが出来ます。
蛇足になりますが、#55aceeという色は下記のような色でなんとなく、Twitterのカラーと同じであるという事が分かります。
今回は文字列をXに変更するという作業とbackgroundの色を黒っぽくする作業を実施していきます。
実際に変更作業を実施する
現状が分かったので、ここからはメンテナンス作業をしていきます。
まず変更するのは下記の場所です。
変更したのは下記の2か所です。
①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"で完全な黒であることが分かります。
Xのアイコンのカラーコードが分かったので、下記オレンジで印をつけた場所をXのカラーコードに変更します。
修正が終わったので、保存して変更が正しく反映されているか確認します。
Fontawsomeを使ってアイコンの修正をする
このままでもいいと思いますが、各SNSのアイコンを使用したいと考え、修正方法をまとめていきます。
今私のブログはFontawsome 5を使用しているのですが、XのアイコンがFontawsome 6以降じゃないと無いため、まずはFontawsome 6対応をします。
Fontawsome 6の対応
Fontawsome 5の途中から会員登録が必要となったみたいなので、まずは会員登録をします。
私の環境が原因なのか不明ですが、なぜかChorome環境だとサイトが上手く表示できなかったため、edgeから下記サイトにアクセスします。
アクセスしたら会員登録を行います。
会員登録が終わったらKitと呼ばれるものが生成されていると思うので、Kitの確認を行います。
このコードをコピーしてください。(アカウントごとにユニークなIDが割り当てられてそうでしたので、念のため一部塗りつぶしています)
私の場合は下記の場所に張り付けてました。
これでFontaesome6を使う準備が終わりました。
(補足)Fontawsome 6は下位互換性があり
私はFontawsome 5を使用していたのですが、Fontawsome 5で使用していた記述を特に変更することなく、使用することが出来ているため下位互換性があることが分かります。
但し、Fontawsome 4の下位互換性は完ぺきではないみたいで、お手当てが必要みたいです。詳細は下記リンク先を参照お願いします。
もし、Fontawsome 4から移行する方がいたら上記リンク先に対処方が記載されているため、ご確認お願いします。
Xのアイコンを表示するようにする
Fontawsome のサイトでXのアイコンを調べると下記ページが出てきます。
ここに記載されている文字列をコピーしてください。(クリックするだけでコピーが出来ます)
コピーが出来たら先ほどメンテナンスした箇所でaタグの後のt→Xに変更した箇所をコピーしたURLに差し替えます。
<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でもシェアできるように改造していきたいと思います。
.png)
0 件のコメント:
コメントを投稿