前回記事ではSNSのシェアボタンを修正しました。今回はSNSのシェアボタンに追加作業をしようと思います。今回追加するのはPinterestです。
↓前回の記事
HTMLの編集を行う
HTMLの編集画面を開いて"SNSボタン"で検索をかけます。
(HTMLの編集画面への行き方が分からない人はこちら参照してください。)
検索をかけると他のSNSのシェアボタンの設定があるので、他のSNSのボタンの記述を真似して下記2点の対応をします。
Pnterestの場合
①Pinterestの行を追加します。(私の場合は466行目でに追加しました。)
②Pinterestの背景色の追加(私の場合は492,493行目に追加しました。背景色はアイコンの色に近い色を選択してます。)
次にURLの追加/アイコンの追加を行います。
"single-share"で検索すると下記のように各種SNSのURLの設定をしている場所があると思います。
今回はここの末尾にpinterest用のものを追加します。
<a class='single-share-pinterest' expr:href='"https://jp.pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl' target='_blank' title='Pinterestに保存'><i class='fa-brands fa-pinterest fa-bounce'/></a>
もしうまく表示できない人がいたら、Fontawsome 6の設定が出来てないかもしれません。Fontawsome 6の設定については下記の記事を参照してください。
また、今回追加したアイコンは動くアイコンです。もし、動かないアイコンにしたい場合は下記のコードをコピペしてください。
<a class='single-share-pinterest' expr:href='"https://jp.pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl' target='_blank' title='Pinterestに保存'><i class="fa-brands fa-pinterest"></i></a>
作業はこれでおしまいです。保存して変更が反映されているか確認するとPinterestのアイコンが保存できたことが確認できました。
まとめ
今回はSNSシェアボタンでPinterestのシェアボタンを追加しました。
今後新しいSNSが登場したらこのやり方で追加していきたいと思います。
また、他のQooQのカスタマイズについては下記にまとめているので、よろしければ参照お願いします。
.png)
0 件のコメント:
コメントを投稿