"JetTheme" 日本版「SNSボタン」への変更

　Blogger "JetTheme" テンプレートはクールで高速表示が売りですが、残念ながら「 SNS（Share）ボタン 」は海外仕様で　日本向けではありません。

　移行前の「 QooQ SNSボタン 」が軽くてお気に入りだったので、"JetTheme" 用の QooQ風 「SNSボタン」を作成しました！

　「記事上・記事下の２箇所」に設置しますが、もちろん　片方のみでもＯＫ！

　JavaScript を一切使用しないならではの、問題点もあります。
　　SNSボタンは　左から順に　[1] Twitter　[2] Facebook　[3] はてなブックマーク　[4] Pocket　
　[5] LINE　の５つ。

　ふじやん さん作成 JavaScript利用の（問題点回避を含めた）オリジナル「SNSボタン」も併せて　ご紹介！

　上記画面のように、（マウス）ポインタを当てると　「ボタンの説明テキスト」が表示されます！

　記事上　「 日本版 SNSボタン 」へ変更する　

　忘れずに、「XMLファイル」をバックアップ！　

　いつでも元に戻せるように、現状の「XMLファイル」をバックアップ！
　◆ Blogger 管理画面 で　[テーマ] 画面を開き、中央のオレンジ色 [カスタマイズ] 右側の「🔽」ボタンをクリックし、一番上の「バックアップ」を選択

　「XMLファイル」を直編集する！　

　◆ Blogger 管理画面 で　[テーマ] 画面を開き、中央のオレンジ色 [カスタマイズ] 右側の「🔽」ボタンをクリックし、下から２番目の「HTMLを編集」を選択

　なお、検索は「HTMLを編集」画面で　コード内の先頭（1行目の最後とか）をクリック後　[command (Ctrl)] + [F]　で可能です。
キーワード入力後 [return] キーを押してください。

　コード内でクリックした場所以降を対象として「再検索」するには、再度　[command (Ctrl)] + [F]　で可能で、キーワードの変更が無ければ　そのまま　[return] キーを押してください。



　(1) デフォルトの「SNSボタン」設定箇所を「 JetShare 」で検索し、ジャンプ

　(2) <div class='d-flex fs-5'>　から　次の　</div>　までの行を　まるごと　以下で置換

<!-- ==	日本版SNSボタン by Ataruchi	begin ===== -->
        <div class='d-flex justify-content-center fs-5'>
<a class='me-4 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferrer' style='background-color:#55acee' target='_blank' title='ツイッターでつぶやく'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>
<a class='me-4 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url.canonical + &quot;&amp;t=&quot; + data:post.title' rel='nofollow noopener noreferrer' style='background-color:#3b5998' target='_blank' title='フェイスブックでシェア'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-facebook'/></svg></a>
<a class='me-4 mb-2 btn btn-sm jt-icon-center text-white rounded-pill pe-1 fw-bolder' expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#008fde' target='_blank' title='はてなブックマークに追加'>B!</a>
<a class='me-4 mb-2 btn btn-sm jt-icon-center text-white rounded-pill fw-bolder' expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' rel='nofollow noopener noreferrer' style='background-color:#ef3f56' target='_blank' title='Pocketに保存'>P</a>
<a class='me-4 mb-2 btn btn-sm jt-icon-center text-white rounded-pill fw-bolder' expr:href='&quot;https://social-plugins.line.me/lineit/share?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#00B900' target='_blank' title='LINEで送る'>L</a>
        </div>
<!-- ==	日本版SNSボタン by Ataruchi	 end  ===== -->

　Pinterest 付き「６ボタン」　にする場合は、　まるごと　以下で置換

<!-- ==	日本版SNSボタン by Ataruchi	begin ===== -->
        <div class='d-flex justify-content-center fs-5'>
<a class='me-3 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferrer' style='background-color:#55acee' target='_blank' title='ツイッターでつぶやく'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>
<a class='me-3 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url.canonical + &quot;&amp;t=&quot; + data:post.title' rel='nofollow noopener noreferrer' style='background-color:#3b5998' target='_blank' title='フェイスブックでシェア'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-facebook'/></svg></a>
<a class='me-3 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + 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-3 mb-2 btn btn-sm jt-icon-center text-white rounded-pill pe-1 fw-bolder' expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#008fde' target='_blank' title='はてなブックマークに追加'>B!</a>
<a class='me-3 mb-2 btn btn-sm jt-icon-center text-white rounded-pill fw-bolder' expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' rel='nofollow noopener noreferrer' style='background-color:#ef3f56' target='_blank' title='Pocketに保存'>P</a>
<a class='me-3 mb-2 btn btn-sm jt-icon-center text-white rounded-pill fw-bolder' expr:href='&quot;https://social-plugins.line.me/lineit/share?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#00B900' target='_blank' title='LINEで送る'>L</a>
        </div>
<!-- ==	日本版SNSボタン by Ataruchi	 end  ===== -->

　(3) 「SNSボタン」を　記事下　に表示しない場合は　コード編集画面　右上の「保存」ボタンをクリックし、修正内容を保存
　　記事下　に表示しない場合、(4) 以降を行う必要はありません。　
　 ブラウザで再表示すると、記事上のみ「 日本版 SNS 」ボタンが表示される（キャッシュのクリアが必要かもしれません）

　記事下「 日本版 SNSボタン 」を追加する　

　(4) 「 JetShare 」で再検索し、「 (2) の呼び出し部分 」までジャンプ

　緑色の枠線で囲んだ部分が、記事下「（ハッシュ）タグ」表示部分のコード。

　 なお、筆者は記事下部分に「ブログの管理人情報」を表示させたくないため、　<b:if cond='data:post.author.aboutMe'>　から　</b:if>　の行までをコメントにしています！
　 また、筆者は「（ハッシュ）タグ」表示部分をカスタマイズし　「タグ＋カテゴリ」表示（タグ表示後に、カテゴリが表示されます）に変更しています。　（ このカスタマイズは (6) を参照 ）

　(5) 記事下　表示のため、（ハッシュ）タグ表示部分の「前後どちらか」（お好きな方）に　以下の行を追加
　 上記画面では、（ハッシュ）タグ表示部分の　後に　「日本版SNSボタン」を表示しています。

　 なお、末尾に　<!-- 記事上 SNSボタン -->　のコメントが入った行を　コメントか　削除すると、　記事上の「SNSボタン」を非表示に！

<b:include data='post' name='JetShare'/>	<!-- 記事下 SNSボタン -->

　記事下「（ハッシュ）タグ」表示を、「タグ＋カテゴリ」表示に変更！　

　(6) 記事下「（ハッシュ）タグ」表示を、「タグ＋カテゴリ」表示に変更します！　再カスタマイズを考慮し、元のコードはコメントにしておくと良いでしょう。

　「 #付きのタグ」を利用しないと　記事下ラベル表示部分には　何も表示されないため、「カテゴリ（ラベル）」のみ利用の方でも　ラベル表示されるよう...

　（上記画面の）緑色の枠線で囲んだ部分を以下のコードに置き換えると、　「 #付きのタグ」の後に、「カテゴリ」が表示されるようになります。
　なお、ラベルを「カテゴリ」と「 #付きのタグ」に分類する場合、投稿ごと　１カテゴリ　に再分類するよう、推奨致します。（大分類扱い）

　このカスタマイズを行うと、下記画面のような「記事下ラベル」表示に！

<div class='entry-label'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:class expr:cond='data:i == 0' name='mb-4'/>
<a class='btn jt-btn-light rounded-pill me-2 mb-2 px-3' expr:href='data:label.url.canonical + &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a>
</b:loop>
</div>

　(7) コード編集画面　右上の「保存」ボタンをクリックし、修正内容を保存
　 ブラウザで再表示すると、（記事上と）記事下に「 日本版 SNS 」ボタンが表示される（キャッシュのクリアが必要かもしれません）

　以下は、テストのため　ハッシュタグ表示部分の　前後両方に　「日本版 SNSボタン」を表示した場合です。

　お疲れ様でした！　以上で、今回の「カスタマイズ」は完了です。　

　軽くなるように、「 HTML ＋ CSS のみ」で実装した場合の問題点　

　（ JavaScript を一切使用しないならではの問題点 ）　

　上記対応方法は、以下の３つがあります。（ [1] は対応ではないが...）

　　[1] 「記事タイトル」に上記３文字を含めなければ発生しないので、無視
　　[2] JetTheme オリジナル実装のように、潔く　記事URLのみを添付し、「記事タイトル」を添付せず
　　[3] 不具合対応済みの JavaScript 実装の オリジナル「SNSボタン」を組み込む


　[2] 対応のコードは、リンク部分を修正するだけですが（念のため）後で追加しておきます。

　[3] 対応は、以下の　ふじやん　さんの記事をご紹介！

　Twitter不具合対応 [2] （記事URLのみ添付）　

　(2) で置換した部分内の Twitter 行のみを　修正する！

　(a) デフォルトの「SNSボタン」設定箇所を「 JetShare 」で検索し、ジャンプ

<a class='me-4 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferrer' style='background-color:#55acee' target='_blank' title='ツイッターでつぶやく'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>

　(b) 上記の行を　下記の行で　置換

<a class='me-4 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#55acee' target='_blank' title='ツイッターでつぶやく'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-twitter'/></svg></a>

　(c) コード編集画面　右上の「保存」ボタンをクリックし、修正内容を保存

最後まで読んでいただき、ありがとうございます。　また、お越しくださいませ。
// アタル