「広告」  

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

JetTheme[03] (CatchImage)

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

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

 「記事上・記事下の2箇所」に設置しますが、もちろん 片方のみでもOK!

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


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

2021/12/09 Pinterest 付き「6ボタン」のコードを 追加掲載!



JetTheme[03] Png01

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



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

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

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



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


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

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

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



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


JetTheme[03] Png03


 (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 付き「6ボタン」 にする場合は、 まるごと 以下で置換

<!-- ==	日本版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 」ボタンが表示される(キャッシュのクリアが必要かもしれません)


JetTheme[03] Png02



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

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


JetTheme[03] Png04

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

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



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

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

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


 記事下「(ハッシュ)タグ」表示を、「タグ+カテゴリ」表示に変更! 

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

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

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

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

<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ボタン」を表示した場合です。

JetTheme[03] Png05

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





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

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

 Twitterボタンにて、「記事タイトルに #& が含まれていると、(URL添付の)それ以降の文字列が消えてしまいます。
 また、 % が含まれているとエラーになります。 」

 ふじやん さんが教えてくれました。 HTMLのみで(単純に)実装すると、 Twitter で「記事タイトル」により不具合が発生するそうです。

 HTMLのみで回避する方法は JetTheme が採用した「V2テンプレート」の場合、まだ見つかっていません。( QooQ のような「旧テンプレート」では、HTMLのみでも回避する方法あり )



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

  [1] 「記事タイトル」に上記3文字を含めなければ発生しないので、無視
  [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) コード編集画面 右上の「保存」ボタンをクリックし、修正内容を保存





Macブログ ランキング アイコン
最後まで読んでいただき、ありがとうございます。 また、お越しくださいませ。
// アタル
For follow LINE Reader Group!Subscribe to this blog on Feedly!

Next Post Previous Post
No Comment
Add Comment
comment url
  「広告」