お知らせ: X対応のものに変更しました。
前の方法
はFont Awesomeを使ったので、外部読み込みをなくしてちょっとでも軽くしたい人向け
こんな感じになります
https://qooq-labo.blogspot.com/ (現在デモ)
追記
ごめんなさい
Pocketの部分がPinterestになってました(修正しました)
まぁこういう勘違いが起こるわけです
<body>タグのすぐ下に追加
<!-- /*! Bootstrap Icons | MIT License | github.com/twbs/icons */ -->
<svg style='display: none;' xmlns='http://www.w3.org/2000/svg'>
<symbol id='twitter' viewBox='0 0 16 16'>
<path d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z'/>
</symbol>
<symbol id='facebook' viewBox='0 0 16 16'>
<path d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z'/>
</symbol>
<symbol id='line' viewBox='0 0 16 16'>
<path d='M8 0c4.411 0 8 2.912 8 6.492 0 1.433-.555 2.723-1.715 3.994-1.678 1.932-5.431 4.285-6.285 4.645-.83.35-.734-.197-.696-.413l.003-.018.114-.685c.027-.204.055-.521-.026-.723-.09-.223-.444-.339-.704-.395C2.846 12.39 0 9.701 0 6.492 0 2.912 3.59 0 8 0ZM5.022 7.686H3.497V4.918a.156.156 0 0 0-.155-.156H2.78a.156.156 0 0 0-.156.156v3.486c0 .041.017.08.044.107v.001l.002.002.002.002a.154.154 0 0 0 .108.043h2.242c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157Zm.791-2.924a.156.156 0 0 0-.156.156v3.486c0 .086.07.155.156.155h.562c.086 0 .155-.07.155-.155V4.918a.156.156 0 0 0-.155-.156h-.562Zm3.863 0a.156.156 0 0 0-.156.156v2.07L7.923 4.832a.17.17 0 0 0-.013-.015v-.001a.139.139 0 0 0-.01-.01l-.003-.003a.092.092 0 0 0-.011-.009h-.001L7.88 4.79l-.003-.002a.029.029 0 0 0-.005-.003l-.008-.005h-.002l-.003-.002-.01-.004-.004-.002a.093.093 0 0 0-.01-.003h-.002l-.003-.001-.009-.002h-.006l-.003-.001h-.004l-.002-.001h-.574a.156.156 0 0 0-.156.155v3.486c0 .086.07.155.156.155h.56c.087 0 .157-.07.157-.155v-2.07l1.6 2.16a.154.154 0 0 0 .039.038l.001.001.01.006.004.002a.066.066 0 0 0 .008.004l.007.003.005.002a.168.168 0 0 0 .01.003h.003a.155.155 0 0 0 .04.006h.56c.087 0 .157-.07.157-.155V4.918a.156.156 0 0 0-.156-.156h-.561Zm3.815.717v-.56a.156.156 0 0 0-.155-.157h-2.242a.155.155 0 0 0-.108.044h-.001l-.001.002-.002.003a.155.155 0 0 0-.044.107v3.486c0 .041.017.08.044.107l.002.003.002.002a.155.155 0 0 0 .108.043h2.242c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157H11.81v-.589h1.525c.086 0 .155-.07.155-.156v-.56a.156.156 0 0 0-.155-.157H11.81v-.589h1.525c.086 0 .155-.07.155-.156Z'/>
</symbol>
</svg>
まぁ一応ライセンスは入れてねという事で
置換用コード
<a class='single-share-twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.canonicalUrl + "&text=" + data:post.title' target='_blank' title='Xにポスト'><svg class='bi' height='24' width='24'><use xlink:href='#twitter'/></svg></a> <a class='single-share-facebook' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title' target='_blank' title='フェイスブックでシェア'><svg class='bi' height='24' width='24'><use xlink:href='#facebook'/></svg></a> <a class='single-share-hatena' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.canonicalUrl' title='はてなブックマークに追加'>B!</a><a class='single-share-pocket' expr:href='"https://getpocket.com/edit?url=" + data:post.canonicalUrl + "&title=" + data:post.title' target='_blank' title='Pocketに保存'>P</a><a class='single-share-line' expr:href='"https://social-plugins.line.me/lineit/share?url=" + data:post.canonicalUrl' target='_blank' title='LINEで送る'><svg class='bi' height='24' width='24'><use xlink:href='#line'/></svg></a>
QooQのバージョンはv2.00です(現在の最新版)
追記
Pocketの提供が2025年7月8日をもって終了 したので、消しています。
追加CSS
.bi {
vertical-align: -0.4em;
fill: currentColor;
}
変更CSS
.single-share-twitter{
background: #000;
}
まぁ適当に調整したんですが、はてブもSVGアイコン見付けて持ってきた方がいいかも
0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。