JetThemeのHTMLカスタマイズ備忘録

 私が行っているJetThemeのHTMLカスタマイズを備忘録として残しておこうと思います。

この記事で使用しているJetThemeのバージョンはver. 2.9です。他のバージョンでは変わっている箇所がある可能性があります。

注意

このカスタマイズを行う場合、自己責任で行ってください。HTMLを編集する関係上、間違えると不具合が発生する可能性があります。また、一部の編集はHTMLの知識が殆どない自分が、こうすればいけるんじゃないか、と思って編集した物の為、そもそも記法が間違っている可能性もあります。不具合が発生しても、筆者は責任を負いません。

編集する前には必ずバックアップを取りましょう

前提 テーマのHTMLを編集する方法

bloggerのホーム画面→テーマ→カスタマイズ横の下矢印→HTML を編集でテーマを編集することができます。

シェアボタンを一部削除

JetThemeにはデフォルトでシェアボタンが付いていますが、日本ではあまり使われていないものや、趣味のブログとはあまり関わりがなさそうなビジネス特化SNSへのリンクもあります。

シェアBefore

個人的にあまり使わないかなと言うものを削除しました。

シェアAfter
  1. 以下を検索
<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#3b5998' target='_blank' title='Facebook Share'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-facebook'/></svg></a>

検索で出てくるコードは、Facebookのシェアボタンのコードです。この下に

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Tumblr
  • WhatsApp
  • Telegram
    と続いています。
  1. 必要ないものを削除またはコメントアウト

自分が必要ないと感じたものを消しましょう
例: Telegramの場合

<a class='me-2 mb-2 btn btn-sm jt-icon-center text-white rounded-pill' expr:href='&quot;https://t.me/share/url?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferrer' style='background-color:#0088cc' target='_blank' title='Share to telegram'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-telegram'/></svg></a>

を削除またはコメントアウトしてください。

記事を確認し、シェアボタンから消えていれば完了です。

日本語化

JetThemeは外国製のテーマなので、日本語になっていない箇所がいくつかあります。レイアウトページからタイトルを変えられる物(例: Recent PostやPopular Postsなど)もありますが、一部は(おそらく)HTMLを編集しないと変えることができません。
私は個人的に

  • ヘッダーとフッターは(説明以外)英語
  • 記事内は日本語
としたかったので、日本語化しました。

Latest Postsの日本語化

トップページにある、最新の投稿が表示される箇所のタイトル部分です。

  1. 以下を検索。
<b:tag class='widget-title position-relative fs-6 mb-3' expr:name='data:view.isHomepage ? &quot;h2&quot; : &quot;div&quot;'><span>Latest Posts</span></b:tag>
  1. spanタグの中にある latest posts を好きな言葉に書き換える。 (例: 最新の投稿)

これで完了です。

Table of Contentsを日本語化

記事に見出しをつけると自動で生成される目次部分です。

  1. 以下を検索。
<span class='fw-light pe-3'>Table of content</span>
  1. spanタグの中にある Table of content を好きな言葉に書き換える。 (例: 目次)

これで完了です。

記事の下にある、関連記事が表示される箇所のタイトル部分です。

  1. 以下を検索。
<div class='custom-posts visually-hidden related-posts' data-func='related_temp' data-items='10' data-shuffle='4' data-title='Related Post' expr:data-no-item='data:post.url.canonical'><b:with value='data:post.labels where (l =&gt; l.name not contains &quot;#&quot;)' var='labels'><b:loop index='i' values='data:labels' var='label'><data:label.name/><b:if cond='data:i != data:labels.size - 1 '>,</b:if></b:loop></b:with></div>
  1. data-title=の ‘related posts’ を好きな言葉に書き換える。 (例: 関連記事)

このとき最初と最後についている ' を消さないようにしましょう。

これで完了です。

Previous PostとNext Postを日本語化

記事の下にある、前と次の投稿へのリンク部分です。

Previous Post

  1. 以下を検索。
<span class='d-block ps-2 fs-7 fw-light'>Previous Post <svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-arrow-r'/></svg></span>
  1. Previous Post を好きな言葉に書き換える。 (例: 前の投稿)

Next Post

  1. 以下を検索。
<span class='d-block pe-2 fs-7 fw-light'><svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-arrow-l'/></svg>Next Post</span> 
  1. Next Post を好きな言葉に書き換える。 (例: 次の投稿)

これで完了です。

コメント欄を日本語化

記事の下にあるコメント欄です。

コメント数

  1. 以下を検索。
<span><b:eval expr='data:post.numberOfComments gt 0 ? data:post.numberOfComments + &quot; Comments&quot; : &quot;No Comment&quot;'/></span>
  1. No Comment を好きな言葉に書き換える。 (例: コメントなし)
  2. Comments (&quotの後ろにある、numberOfがついていない方)を好きな言葉に書き換える (例: コメント)

Add Comment

  1. 以下を検索。
<a class='btn btn-sm jt-btn-primary border-2 fw-bold py-2 px-5' expr:href='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}' id='comment-button' rel='nofollow noopener noreferrer' target='_blank'><svg aria-hidden='true' class='me-1 fs-6 jt-icon'><use xlink:href='#i-comment'/></svg>Add Comment</a>
  1. Add Commentを好きな言葉に書き換える。 (例: コメントする)

Reply

  1. 以下を検索。
<a class='comment-reply btn btn-sm jt-btn-light rounded-pill px-4' expr:data-comment-id='data:commentLevel1.id' expr:href='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;,parentID: data:commentLevel1.id}' rel='nofollow noopener noreferrer' target='_blank'>Reply</a>
  1. Reply を好きな言葉に書き換える (例: 返信)

これで完了です。

検索欄を日本語化

右上の虫眼鏡マークをクリックすると出てくる部分です。

  1. 以下を検索。
<input class='form-control fs-7 border-0 rounded-0 bg-transparent text-reset' expr:value='data:view.isSearch ? data:view.search.query : &quot;&quot;' id='search-input' name='q' placeholder='Enter your search' required='required' type='text'/>
  1. Enter your search を好きな言葉に書き換える。 (例: 記事を検索)

  2. 以下を検索。

<button class='btn btn-sm fw-bold py-2 px-4 rounded-pill border-0 jt-btn-primary m-0' type='submit'>Search</button>
  1. Search を好きな言葉に書き換える。 (例: 検索)

これで完了です。

Homeを日本語化

左上のパンくずリストの部分です。

  1. 以下を検索
<a expr:href='data:blog.canonicalHomepageUrl' itemprop='item' rel='tag' title='Home'><span itemprop='name'>Home</span></a> 
  1. spanタグ内の Home (title=の方ではない)を好きな言葉に書き換える。 (例: ホーム)

これで完了です。

またカスタマイズが増えたら追記していきます。

前の投稿
コメントなし
コメントする
comment url