有料版 JetTheme (Newspaper) 設定方法

　Google Bloggerブログ テンプレート（テーマ） "JetTheme" 有料版 Newspaper version の設定方法を解説致します！

　今なら サブドメイン毎に PayPal で 7$ で、お値打ちかも？
　（2022年1月23日現在）

　[1] 「AdSense狩り」対策あり　←目的で購入
　[2] 「スライドショーを含む、人気投稿」ガジェット
　[3] 「ラベルによるカスタム投稿」ガジェット

など、有料版のみ利用可能な機能の設定方法を　以下にまとめました。

　　XMLコードを修正する前に、必ず「バックアップ」を取りましょう！　

　ちなみに、Bloggerブログでは　ページレイアウトの編集画面では ガジェット ( Gadget ) と名付けられていますが、 HTML（XMLファイル）では ウィジェット ( widget ) と記載されています。
　同義の解釈で問題ありませんが　部品を意識して呼ぶ場合は ガジェット ( Gadget ) 、JavaScriptを含めコードを意識して呼ぶ場合は ウィジェット ( widget ) と　用語を使い分けているようですね。

　無料版（2022年6月現在） JetTheme との関係　

　有料版の Newspaper version は 2022年6月現在無料の Core version の上位互換のため、Core を六十数カ所 修正すると Newspaper となる。
　（筆者は　DIFFツールを利用して、カスタマイズ済みのCore版に差分を当て　Newspaper版にアップグレード済み）

　サブドメインごとに「ライセンスキー」が発行（サブドメイン数分、購入が必要）されるため、レイアウト画面　最下段に表示される License Key ガジェット に「ライセンスキー」をセットしてアクティベートする。

　JetTheme（Core/Newspaper）共通設定　

　Newspaper 追加機能を除き共通の設定となるため、筆者がまとめた「 Core版 ガイダンス投稿記事 」リンクを以下に添付。

　　先に、Core版の設定を行う必要あり！　

　セキュリティ関連　

　Anti Boom Adsense　

-------------------------
#   Anti Boom Adsense   #
-------------------------

<Variable name="safeAds" description="Safe Adsense" type="string" value="true"/>
[!] true or false

<Variable name="limitAdsClick" description="limit Adsense User Click" type="string" value="3"/>
[!] Limit Adsense Clicks Per User, number

　XMLファイル　60行め辺りの # Anti Boom Adsense # 以降を表示
　(1) false を true に変更し、有効化
　(2) ユーザー別で　6時間ごとに　AdSense広告をクリックできる回数を制限
　　（上記サンプルだと、6時間ごとに 3回まで ）

　JetTheme SafeLink　

　最初、"Microsoft Defender for Office 365" にて提供される「メール内のURLが安全（フィッシング詐欺でない）かどうか検証する」 機能を想像したが、違うようで作者に確認した。
　インドネシアでいう "SafeLink" とは、「 aタグ リンク先のURL 」をクリックするまで隠しておく機能とのこと。　ブログサイトやホームページの改ざん対策になるのかもしれない。

　筆者は「ウイルス対策ソフト」インストール済みのユーザーが多い日本では必要ないと判断し、適用せず。（危険なサイトに誘導されると、ブラウザアクセスがブロックされる機能があるため）

-------------------------
#   JetTheme SafeLink   #
-------------------------

<Variable name="safeLinkUrl" description="Safe Link Url" type="string" value="/p/safelink.html"/>
[!] Set url go safelink page ( / ) = homepage, ( /p/safelink.html ) = SafeLink Page

<Variable name="safeLinkGenerate" description="Generate Url SafeLink" type="string" value=".safelink"/>
[!] tag name, class, id, ex : ( .safelink ) , ( #post-body a )

<Variable name="ignoreSafeLink" description="Ignore SafeLink Url" type="string" value=""/>
[!] Ignore Generate SafeLink, ex : ( blogger.com ) ( blogger.com,facebook.com )

　XMLファイル　71行め辺りの # JetTheme SafeLink # 以降を表示
　(1) "safeLinkUrl" にて、SafeLink を生成する「自サイト内の固定ページのURL」を設定
　　（このページの記述内容は、後述）

　(2) "safeLinkGenerate"　には、SafeLink 適用時に付加する CSS クラス（id）名を設定

　(3) "ignoreSafeLink" には、SafeLink 非適用の URL（ドメインなど）を設定（複数指定時は　, カンマ で区切る）

　固定ページにて、/p/safelink.html を投稿　

　"SafeLink" の機能を利用する準備として、自サイト内の 以下のURLを有効にする。 　ページで safelink のタイトルで投稿し、 /p/safelink.html のURLを有効に！
　以下は、HTMLモードにて　貼り付けする HTMLコード。（#Advertisementガジェットのように、その上または下に「広告コード」を追加することもできるとのこと）

<div data-before="Generate Url" data-after="Get Link" data-url="#safelink" data-target="_blank" class="generate-url"></div>

　上記サンプルの .safelink 指定の場合、SafeLink を適用する aタグのクラスに safelink を付加。（ <a class="safelink" ...省略...）
　あるいは、#post-body a[href] を指定し、投稿記事内のすべてのリンクをセーフリンクにグローバルに作成することも可能。
　その場合の "Generate Url SafeLink" のコードを以下に示す。

<Variable name="safeLinkGenerate" description="Generate Url SafeLink" type="string" value="#post-body a[href]"/>

　投稿一覧ページ　追加ガジェット　

　人気の投稿　ガジェット　

　指定期間ごとの「人気の投稿」を表示。　一番左上の投稿表示部分が「（投稿一覧の）スライドショー」。
　「スライドショー」とは一定の間隔で画像が変わる効果で、自サイトのトップページが華やかに！

↑ PC画面　（クリックで拡大）

　上記画面のように、サイドバー部分にまで　またがる横長の広告が　簡単に設置可能に！

↑ スマホ画面

　日付書式の変更　

　インドネシアの標準日付書式を　日本の標準日付書式に置換。
　yyyy/M/d　yyyy/MM/dd　yyyy-M-d　yyyy-MM-dd　などが利用可能なはずだが、表示日付書式を全統一するのであれば　yyyy/M/d　となる。


　(1) XMLファイル内を　yyyy　で検索し、（ヒットする箇所で）最後の箇所を修正

　(2) 以下コード内の　d MMM, yyyy　→　yyyy/M/d　のように日付書式を変更

<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><b:eval expr='data:post.lastUpdated format &quot;d MMM, yyyy&quot;'/></small>

　data:post.lastUpdated とあるので、更新日付表示となる。　その左側に表示される「SVGアイコン」も（時計から）更新日付用に変更すると分かりやすいだろう。
　更新日付用のSVGアイコンは自分で用意する必要があり、「筆者と同じSVGアイコンを Core版で 組み込んだ方」は　以下コードで置換。

<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon bi-arrow-clockwise'><use xlink:href='#bi-arrow-clockwise'/></svg><b:eval expr='data:post.lastUpdated format &quot;yyyy/M/d&quot;'/></small>

　ラベルによるカスタム投稿　ガジェット　

↑ PC画面　（クリックで拡大）

↑ スマホ画面

<div class="row">
<div data-label="Blogger カスタマイズ" data-title="JetTheme Template カスタマイズ" class="custom-posts visually-hidden col-lg-8" data-items="5" data-func="layout1_temp"></div>
<div data-label="AppleScriptTask" data-title="AppleScriptTask（Called by VBA）" class="custom-posts visually-hidden col-lg-4"  data-items="2" data-func="layout2_temp"></div>
</div>
<br />

　・data-label="ラベル名" にてラベル指定（カテゴリ or ハッシュタグ）すると、最新投稿順（降順）で表示される
　・class="row" の divタグで囲むと、PC表示の段落（ただし、スマホでは　縦表示）となる
　・「col-lg-数字」のクラスは、表示サイズ
　・data-items="数字" にて、表示数指定

　当ガジェット　実サンプル　

　Special Categories（画像リンク集）　ガジェット　

↑ PC画面　（クリックで拡大）

↑ スマホ画面

　ページビュー　カウンター　

　投稿ページを読んだユーザー数を有効にするには、”Google Firebase” に登録してユーザー数のストレージとして機能するリアルタイムデータベースのURLを取得し、作成したリアルタイムデータベースのURLを value="" 内にセット。
　当サイトでは利用する予定がないため、”Google Firebase” は無料プランのみで「ページビューカウンター」表示可能かどうかわかりません。

　XMLファイル　52行め辺りの # Jettheme PageView # 以降を表示

<Variable name="firebaseUrl" description="Firebase Url" type="string" value=""/>

　お疲れ様です。　有料版 "JetTheme" の設定方法は、以上となります！

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