Blogger無料テンプレート「JetTheme」のHTML設定について

2023/04/23 2021/09/23

はじめに

前回の記事では「JetTheme」の管理画面の設定について説明しましたが、今回はHTMLの設定について解説したいと思います。

この部分を設定しておかないと、SEOで損する恐れが出るので、一度ご覧になると良いかと思います。

JetThemeの設定（HTML）

HTML編集を開くと、SEOやレイアウトのカスタマイズに関する11種類の変数が定義されてます。

コード

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:render='true' b:responsive='true' b:templateUrl='https://www.jettheme.com' b:templateVersion='2.8.2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/><head>
<b:include data='blog' name='JetAll-head-content'/>
<b:if cond='!data:view.isLayoutMode'>
<b:skin><![CDATA[/*

[!] Find (JetAll-head-content) to edit Open Graph and other Meta Tags

---------------------------
# JetTheme v2.8.2 Setting #
---------------------------

<Variable name="tagline" description="Tagline" type="string" value=""/>
[!] Homepage tagline, ex: BlogName - Tagline

<Variable name="separator" description="Separator" type="string" value=" - "/>
[!] Title separator ( – ), ( | ), ( • )

<Variable name="description" description="Description" type="string" value=""/>
[!] Default meta description, recommended 155–160 characters

<Variable name="cover" description="Cover" type="string" value=""/>
[!] Default meta image, size recommended 1600x700 px

<Variable name="logo" description="Logo" type="string" value=""/>
[!] Schema logo, size recommended 175x55 px

<Variable name="favicon" description="Favicon" type="string" value=""/>
[!] Favicon high resolution, required format (.png), min size 200x200 px

<Variable name="analyticId" description="Analytic ID" type="string" value=""/>
[!] New Google Analytic 2021

<Variable name="caPubAdsense" description="caPubAdsense ID" type="string" value=""/> 
[!] number only

<Variable name="autoTOC" description="Table of content" type="string" value="true"/>
[!] true or false

<Variable name="positionTOC" description="Position TOC" type="string" value="noscript"/>
[!] tag name, class, id

<Variable name="maxLabel" description="Limit Label" type="string" value="3"/>
[!] Limit Label Display

ここでは各変数のvalue=""に何を設定すれば良いのかを説明したいと思います。

taglineの設定

tagline（タグライン）とはキャッチコピーより重要なもので、不変的なメッセージ・スローガンを一言で表したものです。

例：Nike の「Just Do It.」がタグラインです。

14行目の<Variable name="tagline" description="Tagline" type="string" value=""/>のvalue=""にvalue="強く伝えたいメッセージ"を入れて下さい。

separatorの設定

ブログのタイトルとタグラインの区切りを変更したい場合は、17行目の<Variable name="separator" description="Separator" type="string" value=" - "/>のvalue=" - "を任意の記号に変更して下さい。

なお、区切り記号の前後には半角スペースが必要です。

descriptionの設定

Bloggerの管理画面の設定の説明に入力している場合は自動で入るので、20行目のdescriptionは設定不要です。

coverの設定

画像がない記事をSNSで共有する場合、ここに設定した画像が共有されます。

23行目の<Variable name="cover" description="Cover" type="string" value=""/>のvalue=""に共有したい画像のURLを入れて下さい。

「JetTheme」では1600×700pxが推奨サイズですが、TwitterやFacebookでピッタリきれいにOGP画像を表示するのは、縦横のアスペクト比が1：1.91、横幅1200px以上の画像です。

一般的には1200×630pxが推奨されてますが、ピッタリに合わせたいので当ブログのアイキャッチ画像は1200×628pxに統一し、このサイズを使用してます。

logoの設定

「ウィジェット」の「Logo」で設定済の場合は、ここでの設定は不要です。

faviconの設定

29行目<Variable name="favicon" description="Favicon" type="string" value=""/>のvalue=""にファビコンのURLを指定します。

なお「設定」の「ファビコン」でファビコン画像をアップロードできますが、高解像度のファビコン画像を使用しても16×16pxに変換されてしまいます。

しかし「JetTheme」では32×32px,96×96px,144×144px,150×150px,180×180pxの５種類のファビコンが設定されるので、Retinaのブラウザ、iOS/Safariのホーム画面でもファビコンはボケずに表示されます。

使用する画像形式はpng形式かico形式のどちらでもOKで、200×200px以上が推奨です。またico形式のファイルはBloggerにアップロード可能です。

透過PNG画像をico形式に変換する場合は、Faviconジェネレーターが便利です。

なお最近のブラウザではSVG画像も利用できるようになったので、SVG職人の方はSVG形式のファビコンを設定しては如何でしょうか。Manaさんの記事が参考になると思います。

2021年10月03日　追記

BloggerにはSVGファイルをアップロードできないので、SVG画像のファビコンは設定できないことが分かりました。残念です。

analyticIdの設定

設定画面でGoogle アナリティクスプロパティ IDが設定済の場合は、ここでの設定は不要ですが、「JetTheme」はGoogle アナリティクス4（GA4）のID設定が可能です。

GA4を使っている方は、<Variable name="analyticId" description="Analytic ID" type="string" value=""/>のvalue=""にvalue="G-XXXXXXXXXXの測定ID（G-英数字10桁）を入力下さい。

caPubAdsenseの設定

アドセンスの広告を表示する場合は、ここにアドセンスのIDを設定します。

35行目の<Variable name="caPubAdsense" description="caPubAdsense ID" type="string" value=""/>の value=""にvalue="XXXXXXXXXXXXXXXX"のバブリッシャID（数字16桁）を入力して下さい。

autoTOCの設定

目次を非表示にする場合は、38行目の<Variable name="autoTOC" description="Table of content" type="string" value="true"/>のvalue="true"をvalue="false"に変更して下さい。

なお目次の内容はデフォルトでは閉じられてますが、表示状態にしたい場合は、<input id="toc-toggle" class="d-none" autocomplete="off" type="checkbox"/>のtype="checkbox"をtype="checkbox" checkedに変更して下さい。

2021年9月26日　追記

「JetTheme」の目次は見出しに全角文字が含まれていると上手くジャンプしないことが分かりました。うーん残念。

解決策が見つかる迄は、スケ郎さん製作の「[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）」か、スケ郎さん製作を改良されたFumaさんの「自動生成目次のオプション機能を追加してみました」の導入をおススメします。

2021年11月29日　追記

ふじやんさんからjs@0.4.8のmain.jsから[B](/[^\w!?]/g,"_")[B](/__/g,"_")を削除し、インライン化すると目次のジャンプが上手く動くと情報提供して頂きました。

お困りの方は自己責任でお試し下さい。

さっきのはバージョン 0.4.7
0.4.8 だとこうなってるかも
[B](/[^\w!?]/g,"_")[B](/__/g,"_")
— ふじやん (@fujiyanx) November 28, 2021

2022年2月12日　追記

js@0.5.3ではmain.jsから[D](/[^\w!?]/g,"_")[D](/__/g,"_")を削除し、インライン化すると目次のジャンプが上手く動きます。

positionTOCの設定

目次の位置は変更可能で、指定したtag name, class, idの前に表示できます。

例えば、記事内のh3タイトルの前に目次を表示する場合は、<Variable name="positionTOC" description="Position TOC" type="string" value="noscript"/>のvalue="noscript"をvalue=".entry-text h3"に修正します。

maxLabelの設定

記事のラベル表示数は、デフォルトは最大3つの設定となってます。

ラベルの表示数を変更したい場合は、<Variable name="maxLabel" description="Limit Label" type="string" value="3"/>のvalue="3"の数字を変更して下さい。

その他の設定

次に、サイトマップ、コンタクトフォームの設定を説明します。これは「Setting Template JetTheme」のページで解説されてますが、ここでいっしょに説明した方が良いと思ったので、コードを転載させて頂きました。

サイトマップの設定

「Setting Template JetTheme」のページにサイトマップを設定するHTMLが公開されてますので、このHTMLをコピー＆ペーストでHTMLビューで貼り付け、Sitemapというタイトルで固定ページを作成して下さい。

次に作成したサイトマップのページURLをMenuのSitemapにリンクを登録下さい。

参考に上記HTMLのコピーを表示しておきます。

コード

<div class="custom-posts sitemap-posts" data-label="false" data-func="sitemap_temp" data-callback="sitemap_cb" data-items="1"><div class='text-center'><div class='spinner-grow text-light' role='status'><span class='visually-hidden'>Loading...</span></div></div></div>

コンタクトフォームの設定

「Setting Template JetTheme」のページにコンタクトフォームを設定するHTMLが公開されてますので、このHTMLをコピー＆ペーストでHTMLビューで貼り付け、Contactというタイトルで固定ページを作成して下さい。

次に作成したコンタクトフォームのページURLをMenuのContactにリンクを登録下さい。

なお、メッセージを入力するウィンドウは3行しか表示されないので、行数は増やした方が親切だと思います。

例えば入力ウインドウを10行に変更したい場合は、13行目のrows='3'をrows='10'に修正して下さい。

クリックしてコードを表示

<form class='contact-form-blogger'>
  <div class='contact-form-wrap row'>
    <div class='col-md-6 mb-3'>
      <label class='form-label fs-7 fw-bold' for='field-name'>Your Name（お名前）</label>
      <input class='form-control bg-transparent jt-border-light text-reset' id='field-name' name='name' required='' type='text' placeholder='Enter Name'/>
    </div>
    <div class='col-md-6 mb-3'>
      <label class='form-label fs-7 fw-bold' for='field-email'>Email Address（メールアドレス）</label>
      <input class='form-control bg-transparent jt-border-light text-reset' id='field-email' name='email' required='' type='email' placeholder='Enter Email'/>
    </div>
    <div class='col-12 mb-3'>
      <label class='form-label fs-7 fw-bold' for='field-message'>Message（お問い合わせ内容）</label>
      <textarea class='form-control bg-transparent jt-border-light text-reset' id='field-message' name='message' required='' rows='10' placeholder='Enter Message'></textarea>
    </div>
    <div class='col-12 mb-3'>
      <button class='btn btn-sm fw-bold py-2 px-5 jt-btn-primary' type='submit'>SEND</button>
    </div>
  </div>
  <div
       data-success="Thank you message sent successfully.（メッセージは正常に送信されました。）"
       data-error="Message failed to send. Please try again an hour later.（メッセージの送信に失敗しました。1時間後にもう一度お試しください。）"
       class="contact-form-msg d-none border border-3 rounded text-center p-3 fs-7">
  </div>
</form>

2023年2月9日　追記

上記コンタクトフォームはメール送信が実行できない状況です。Googleフォーム等を実装してご対応下さい。

日付の書式変更

別記事にまとめたので、下記をご参照下さい。

まとめ

「JetTheme」はSEOにしっかり対応できるよう設計されてますので、HTMLの変数を適切に設定することで、SEOの改善が期待できると思います。

HTMLの編集は多少面倒なのですが、この記事を手掛かりに対応して頂けると幸いです。

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

ツイッターで♡いいねする

https://t.co/IzzRWG3TR8

「JetTheme」のHTML設定について記事を書いてみました。

HTMLの設定がよくわからない、という方はご一読下さい。#Blogger #JetTheme #HTML
— heavy-peat (@AfterWork_Lab) September 23, 2021

それでは今回の記事はこれでおしまい。

Reika 5/04/2022

あトんさんこんにちは
こちらの記事を参考に目次を開いて表示はできたのですが、目次位置の変更ができません。
あトんさんのように記事内トップ画像の下に中央配置したいのですが、何を指定しても変わりません。今は .entry-header を入れています。

他にやるべきことがあるのでしょうか？
お手隙の時に教えて頂けると有難いのですが…
よろしくお願いいたします。
- あトん 5/07/2022
  
  Reikaさん、質問ありがとうございます。
  
  目次の要素の中央寄席は下記CSSを当て、function toc_temp(e)のjavascriptに記述されているclassのd-inline-blockは削除してます。
  
  #toc-post {
  max-width: 650px;
  margin: 3em auto;
  }
  
  目次のタイトル（Table of content）の中央寄席は下記CSSを当ててます。
  
  .pe-3 {
  padding-right: 0 !important;
  margin: auto;
  }
  
  どうぞ参考にして下さい。
- Reika 5/07/2022
  
  あトんさん
  ご丁寧にありがとうございます。
  全くの初心者レベルですが、参考にさせて頂きます。