JetThemeの記事内（記事タイトル下）にはシェアボタンがあります。
かなり多いですよね(笑)
日本ではあまり使わないようなものも含まれていると思います。
JetThemeを使っている別ブログバラを咲かせてばらびっと！では不要なものは削除し、はてなブックマークを追加して使っています。
本記事ではこの記事内シェアボタンの変更方法を解説します！
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
不要なシェアボタン削除方法
HTML編集でdata:jwidget.allBylineItems.shareを検索します。
その3行下からがシェアボタンです。
facebook・Twitter・Pinterest……と並んでいるので、不要なものをコメントアウト<!--
-->で非表示にします。
自分の場合はfacebook・Twitter・Pinterest以降は全て非表示にしています。
<b:if cond='data:jwidget.allBylineItems.share'>
<div class='social-share mb-3'>
<div class='d-flex fs-5'>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#3b5998' target='_blank' title='Facebook Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-facebook'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#55acee' target='_blank' title='Tweet This'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&media=" + data:post.featuredImage' rel='nofollow noopener noreferrer' style='background-color:#cb2027' target='_blank' title='Pin It'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-pinterest'/></svg></a>
<!-- <a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#2554bf' target='_blank' title='Linkedin Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-linkedin'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#314358' target='_blank' title='Tumblr Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-tumblr'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://wa.me/?text="+ data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#25d366' target='_blank' title='Share to whatsapp'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-whatsapp'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://t.me/share/url?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#0088cc' target='_blank' title='Share to telegram'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-telegram'/></svg></a> シェアボタン調整 -->
</div>
</div>
</b:if>
後でいじりやすいようにコメントアウト内に「シェアボタン調整」と記してあります。
（不要なら削除してください。）
はてなブックマーク追加方法
シェアボタンはSVGアイコンが用いられています。
はてなブックマークも探せばSVGアイコンがあるのですが、四角い枠があって使いにくいです。
そのためシンプルに背景色と文字だけで表現します。
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill fw-bold' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#00A4DE; font-family: Segoe UI, Verdana;' target='_blank' title='はてなブックマークに追加'>B!</a>
このコードを前項のコードに挿入します。
Pinterestの次に挿入すると以下のようになります。
<b:if cond='data:jwidget.allBylineItems.share'>
<div class='social-share mb-3'>
<div class='d-flex fs-5'>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#3b5998' target='_blank' title='Facebook Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-facebook'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#55acee' target='_blank' title='Tweet This'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&media=" + data:post.featuredImage' rel='nofollow noopener noreferrer' style='background-color:#cb2027' target='_blank' title='Pin It'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-pinterest'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill fw-bold' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#00A4DE; font-family: Segoe UI, Verdana;' target='_blank' title='はてなブックマークに追加'>B!</a>
<!-- <a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#2554bf' target='_blank' title='Linkedin Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-linkedin'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#314358' target='_blank' title='Tumblr Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-tumblr'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://wa.me/?text="+ data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#25d366' target='_blank' title='Share to whatsapp'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-whatsapp'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://t.me/share/url?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#0088cc' target='_blank' title='Share to telegram'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-telegram'/></svg></a> シェアボタン調整 -->
</div>
</div>
</b:if>
TwitterをXに変更
XがTwitterのままになっているので、変更しておきましょう。
以下のブログ様が分かりやすかったので、そちらを参考にするのがオススメです。
参考ブログ様
日本語に変更
シェアボタンにマウスカーソルを合わせると説明文が表示されるのですが、「Facebook Share」や「Pin It!」のように英語表記になっています。
これもついでなので、日本語表記にしてしまうと良いでしょう。
文言は自分好みに変更してくださいね。
<b:if cond='data:jwidget.allBylineItems.share'>
<div class='social-share mb-3'>
<div class='d-flex fs-5'>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#3b5998' target='_blank' title='Facebookでシェア'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-facebook'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#000' target='_blank' title='Xでポスト'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&media=" + data:post.featuredImage' rel='nofollow noopener noreferrer' style='background-color:#cb2027' target='_blank' title='Pinterestでシェア'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-pinterest'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill fw-bold' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#00A4DE; font-family: Segoe UI, Verdana;' target='_blank' title='はてなブックマークに追加'>B!</a>
<!-- <a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#2554bf' target='_blank' title='Linkedin Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-linkedin'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#314358' target='_blank' title='Tumblr Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-tumblr'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://wa.me/?text="+ data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#25d366' target='_blank' title='Share to whatsapp'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-whatsapp'/></svg></a>
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='"https://t.me/share/url?url=" + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#0088cc' target='_blank' title='Share to telegram'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-telegram'/></svg></a> シェアボタン調整 -->
</div>
</div>
</b:if>
もしこれまでの変更全て自分と同じもので良ければ、上記をコピーしてそのまま置き換えても構いません。
シェアボタンを自分好みに変更しよう！
元のままだと数が多いしちょっと海外向けなので、上記のやり方を参考に自分好みのシェアボタンに変更してみましょう！
