「JetTheme」テンプレート（テーマ）

JetTheme で Contact　"Google Forms" 未利用者の方、
『問い合わせメール』が送信できるか　テストしてみてね

自分の環境だと、有料（Newspaper）版に加え　無料版も [SEND] ボタンが機能しません。

応急処置で『mailto:』に変更❗️

➡️
https://twitter.com/Ataruchi/status/1550771167257956352?s=20&t=fchJziZZtYfCQ8Gr9VkBcA

Defer.js を利用した Twitter、Instagram、TikTok の遅延読み込みコードを載せておきます‼️

function jtCallback()　内の　/*Your Script is here to maintain performance.*/
行の後に、組み込んで下さい。（XMLコードのバックアップ後に…）
//
const twitterEmbed = document.getElementsByClassName('twitter-tweet');
const instaEmbed = document.getElementsByClassName('instagram-media');
const tiktokEmbed = document.getElementsByClassName('tiktok-embed');
//const rakutenEmbed = document.getElementsByClassName('rakuten-embed');

try {

if (twitterEmbed.length !== 0) Defer.js('https://platform.twitter.com/widgets.js', 'twitter-js', 1000);
if (instaEmbed.length !== 0) Defer.js('https://www.instagram.com/embed.js', 'insta-js', 1000);
if (tiktokEmbed.length !== 0) Defer.js('https://www.tiktok.com/embed.js', 'tiktok-js', 1000);
//if (rakutenEmbed.length !== 0) Defer.js('https://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js', 'rakuten-js', 1000);// NG for document.write

} catch (error) {
console.log(error)
}
//

Twitterタイムライン埋め込みの場合、classが異なることを「ふじやん」さんがTwitterで教えてくれました‼️

対応するには、No.3 の twitterEmbed 変数を以下のように変更します。
（JavaScriptで、 OR は || の記号を用います）

//（省略）
const tw_EmbedTW = document.getElementsByClassName('twitter-tweet');//Twitter TWeet
const tw_EmbedTL = document.getElementsByClassName('twitter-timeline');//Twitter TimeLine
//（省略）
if (tw_EmbedTW.length !== 0 || tw_EmbedTL.length !== 0) Defer.js('https://platform.twitter.com/widgets.js', 'twitter-js', 1000);
//（省略）

>>4

Twitter「タイムライン」を埋めこむ方法は、以下を参照ください❗️
https://help.twitter.com/ja/using-twitter/embed-twitter-feed

>>4　JavaScript　論理演算子のまとめ

「 || 論理和 」、「 && 論理積 」、「 ! 論理否定 」のため　ド・モルガンの法則を利用して、

if (tw_EmbedTW.length !== 0 || tw_EmbedTL.length !== 0)

　は、以下のようにも記述可能です‼️

if (!(tw_EmbedTW.length === 0 && tw_EmbedTL.length === 0))

「同一ではない !== 」の逆は「同一 === 」となり、
「等しい == 」「等しくない != 」と使い分ける点も注意してくださいね。
（こんがらかった方は、以下を参照ください❗️）
https://web-engineer-wiki.com/javascript/comparison/

ページ右下の「back-to-top」ボタンと同様、「go-to-bottom」を付加するには…

AdSense申請時は「back-to-top」のbottomを50px

<div class='position-fixed d-none' id='back-to-top' style='right:10px;bottom:30px;z-index:1031'><a aria-label='Back to Top' class='btn btn-sm jt-btn-light rounded-circle jt-icon-center' href='#back-to-top' onclick='window.scroll({top:0,left: 0,behavior:&apos;smooth&apos;});'><svg aria-hidden='true' class='jt-icon' height='1em' style='stroke: #ffbf00;' width='1em'><use xlink:href='#i-arrow-t'/></svg></a></div>

<div class='position-fixed' id='go-to-bottom' style='right:10px;bottom:10px;z-index:1030'><a aria-label='Go to Bottom' class='btn btn-sm jt-btn-light rounded-circle jt-icon-center' href='#go-to-bottom' onclick='const element = document.documentElement; const bottom = element.scrollHeight - element.clientHeight; window.scroll({top:bottom,left: 0,behavior:&apos;smooth&apos;});'><svg aria-hidden='true' class='jt-icon' height='1em' width='1em'><use xlink:href='#i-arrow-b'/></svg></a></div>

>>7

スマホ表示にて少しでも邪魔にならないよう、２つのアイコンを重ねています。
（z-indexにて重なった部分は、「back-to-top」ボタンを優先）

「go-to-bottom」ボタンのclass、動的に d-none を加えれば非表示にできますが、常に表示しています。

『onclick=』は、; （セミコロン）で区切れば、JavaScript を複数分　記述可能ですよ。
（このくらいであれば、scriptタグで関数を作成し、わざわざ関数呼び出しする必要は無いかと…）

〜 onclick='hoge()' 〜

<script>
function hoge() {
let element = document.documentElement;
let bottom = element.scrollHeight - element.clientHeight;
window.scroll({top:bottom,left: 0,behavior:&apos;smooth&apos;});
}
</script>

JetTheme の「目次」を、任意の場所に表示する方法

https://twitter.com/Ataruchi/status/1612399438290620419?s=20&t=AUkvkgBfWtZ9FSh5NSBPvQ

JetThemeの「目次」を『日本語』対応にする方法

JavaScript （js）ファイル内の「正規表現」に、全角英字＋全角数字＋日本語漢字（Unicode指定）の指定文字を加えます！
指定した文字以外でなければ、　"_"（アンダースコア） に置換されます。

[Core] [News] バージョン共通
【修正前】
/[^\w!?]/g

【修正後】
/[^\wａ-ｚＡ-Ｚ０-９\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf!?]/g

【参考】正規表現（注意）この環境では、バックスラッシュ　Windows-PCと同様、　\　で表示
[^ABC]　は、（文字A or 文字B or 文字C）以外
\w　は　[A-Za-z0-9_]　に相当（半角の英数字とアンダースコアに一致）

JetTheme の作者 Nov さんに報告済みのため、圧縮した jsファイル（日本語対応の目次版）を公開しました‼️
Ver.0.5.5のみですが、このファイル内のコードの著作権は Nov さんのものです。（ファイル先頭に、コメントでも表記済み）


【Core（無料）バージョン】
① jsファイル呼び出しをコメント化
<!--
<script src='https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main.js'/>
-->

② 以下コードを挿入
<script src='https://past.gadgets-geek.net/js/Wito_JT_core_055min.js' charset='utf-8'/>


【News（有料）バージョン】
① jsファイル呼び出しをコメント化
<!--
<script src='https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main-news.js'/>
-->

② 以下コードを挿入
<script charset='utf-8' src='https://past.gadgets-geek.net/js/Wito_JT_news_055min.js'/>

自力でインライン化できる方はファイル内のjsコードをそのままコピーしてもかまいませんし、ファイル置き場がある方はファイル名を変更後にアップロードして利用ください。

「RFC2936とRFC3986」によると、URLに利用可能な 1バイト文字は　\w　-　（ハイフン）のみ
（注）　_　（アンダバー・アンダースコア）は　\w　に含まれます
　　　\w　は　[A-Za-z0-9_]　に相当（半角の英数字とアンダースコアに一致）

また、クエリ文字列（URLパラメーター）として、　?　&　=　3文字を使用

【修正後】こちらの方が妥当❓
/[^-\wａ-ｚＡ-Ｚ０-９\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]/g

（注）　^　直後の　-　は範囲を示すメタ文字ではなく、そのまま文字として認識されます

よって、「　-　と　\w　全角英数字　日本語漢字　」以外の文字を　_　（アンダバー・アンダースコア）に置換します‼️

JetTheme で CSS独自追加分も「Defer.js」利用の方がサムネイル画像とかきちんと表示されるみたい…
ファイル置き場を用意できる方向けの投稿で、「body」タグに付与されるクラス名で読み込むCSSファイルを切替。

function jtCallback()　内の　/*Your Script is here to maintain performance.*/
行の後に、組み込んで下さい。（XMLコードのバックアップ後に…）
//
try {
const ele_body = document.getElementsByTagName('body')[0];//bodyタグは1つだけ
if (ele_body.classList.contains('is-single')) {//投稿
Defer.css('https://past.gadgets-geek.net/css/my_post_min.css', 'post-css', 200);
} else if (ele_body.classList.contains('is-home')) {//投稿一覧
Defer.css('https://past.gadgets-geek.net/css/my_home_min.css', 'home-css', 200);
} else if (ele_body.classList.contains('is-page')) {//ページ
Defer.css('https://past.gadgets-geek.net/css/my_page_min.css', 'page-css', 200);
} else {//is-search, is-archive, etc
Defer.css('https://past.gadgets-geek.net/css/my_home_min.css', 'home-css', 200);
}
// console.log(ele_body.classList);
} catch (error) {
console.log(error);
}
//

>>2

後日、Google Forms（ https://www.google.com/intl/ja_jp/forms/about/ ）に　変更しました‼️