「広告」  

有料版 "JetTheme" 設定方法

Catch-Image (Redirect)

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

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

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

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

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



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



 無料版(2022年1月現在) JetTheme との関係 

 有料版の Newspaper version は 2022年1月現在無料の 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 を投稿 


JetTheme-Paid[01] Png01

 "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]"/>



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

 人気の投稿 ガジェット 

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

JetTheme-Paid[01] Png02

JetTheme-Paid[01] Png03

↑ PC画面 (クリックで拡大)

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


JetTheme-Paid[01] Png04

↑ スマホ画面


 日付書式の変更 

 インドネシアの標準日付書式を 日本の標準日付書式に置換。
 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>


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

JetTheme-Paid[01] Png05

JetTheme-Paid[01] Png06

↑ PC画面 (クリックで拡大)


JetTheme-Paid[01] Png07

↑ スマホ画面



<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(画像リンク集) ガジェット 

JetTheme-Paid[01] Png08

JetTheme-Paid[01] Png09

↑ PC画面 (クリックで拡大)


JetTheme-Paid[01] Png10

↑ スマホ画面




 ページビュー カウンター 

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

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


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



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





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

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