vier

Let's be more curious.

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

「JetTheme」のHTML設定

はじめに

前回の記事では「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の5種類のファビコンが設定されるので、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-XXXXXXXXX"を入力下さい。


caPubAdsenseの設定

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

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


autoTOCの設定

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

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


2021年9月26日 追記

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

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


positionTOCの設定

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

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


maxLabelの設定

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

ラベルの表示数を変更したい場合は、44行目の<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>


日付の書式変更

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

www.heavy-peat.com



まとめ

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

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


気軽に足跡残してね!

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

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

New Post Old Post
No Comment
Add Comment
comment url