【Blogger】VTrick の日本語対応カスタマイズ

ブログ運営 #Blogger #VTrick #カスタマイズ

VTrick は海外テーマなので、使用する場合は少しカスタマイズをしたほうが良いかなと思う部分があります。

この記事では日本語対応カスタマイズをいくつか紹介したいと思います。

投稿日の日付形式の変更

デフォルトだと、日付の形式がおそらく 2月 7, 2023 という形式になっていると思います。

これを 2023/2/7 のような形式に修正します。

記事一覧・個別記事などの日付

テンプレートで以下の日付出力コードを検索し、希望の形式のコードに置き換えてください。

<data:post.date/>

2023/2/7の形式に変更

<data:post.date.year/>/<data:post.date.month/>/<data:post.date.day/>

Bloggerの時刻のフォーマット／投稿の年月日と曜日の並び替えのカスタマイズ（些細な日常）

曜日を表示したい場合は、上記参考サイトをご参照ください。

2023/02/07の形式に変更（１桁の月日の場合に最初に 0 がつく）

<b:eval expr='data:post.date.year + (10 > data:post.date.month ? "/0" : "/") + data:post.date.month + (10 > data:post.date.day ? "/0" : "/") + data:post.date.day'/>

Bloggerに更新日を表示する | バグ取りの日々

更新日の追加

記事に更新日を追加する方法です。

テンプレートで、以下の記述を検索します。

<!-- Post Timestamp -->

その下の行に、先ほど日付形式を変更した<time class='published'～</time>の記述が含まれていると思います。

その最後部</time>タグの後ろに、次のコードを追加します。

2023/2/7の形式

<time class='lastupdated' expr:datetime='data:post.date.iso8601'><data:post.lastUpdated.year/>/<data:post.lastUpdated.month/>/<data:post.lastUpdated.day/></time>

Bloggerの時刻のフォーマット／投稿の年月日と曜日の並び替えのカスタマイズ（些細な日常）

2023/02/07の形式（１桁の月日の場合に最初に 0 がつく）

<time class='lastupdated' expr:datetime='data:post.lastUpdated.iso8601'><b:eval expr='data:post.lastUpdated.year + (10 > data:post.lastUpdated.month ? "/0" : "/") + data:post.lastUpdated.month + (10 > data:post.lastUpdated.day ? "/0" : "/") + data:post.lastUpdated.day'/></time>

Bloggerに更新日を表示する | バグ取りの日々

以下の CSS を追加します。余白や「更新日」の文言は適宜修正ください。

.lastupdated {
    margin-left: 10px;
}
.lastupdated:before {
    content: '更新日';
    margin-right: 3px;
}

日付形式の変更、更新日の追加をすると、このような感じになります。

日本語だと動作しない目次の対処方法

VTrick の自動目次は日本語だと動作しません。

見出しの文字列がそのまま ID になるようですが、日本語の文字には対応していないようです。

簡単な対応方法として、見出しタグに別途 ID を振る方法があります。手動で振っても良いのですが面倒なので、見出しに上から順番に ID を振るスクリプトを使うと良いと思います。

以下のコードを、目次スクリプトの前に設置します。

    var i=1;$("h2,h3").each(function(){$(this).attr("id","toc_"+i);i++})

    <b:if cond='data:view.isPost or (data:view.isPage and data:skin.vars.pagetoc == &quot;1px&quot;)'>
    <script>
    //<![CDATA[
    var i=1;$("h2,h3").each(function(){$(this).attr("id","toc_"+i);i++})
    var toc_html='<div id="tocid" class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+toc_title+'"><span class="tocify-title-text">'+toc_title+'</span></a><ol id="tocify"></ol></div></div>',toc_head=$("#post-body h2,#post-body h3,#post-body h4");if(toc_head.length>1){toc_head.first().before(toc_html);var _0xb767x3=".tocify-wrap";$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#tocify").slideToggle(170)})}),$("#tocify").toc({content:"#post-body",headings:"h2,h3"}),$("#tocify li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")).offset().top-20},500),!1})})}
    //]]>
    </script>
    </b:if>

目次が動作しているか確認の上、ご利用ください。

目次をデフォルトで開く

目次はデフォルトで閉じていますが、開いておきたい場合は目次スクリプト内に次のような修正を加えます。

    var toc_html='<div id="tocid" class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+toc_title+'"><span class="tocify-title-text">'+toc_title+'</span></a><ol id="tocify" style="display:block"></ol></div></div>',toc_head=$("#post-body h2,#post-body h3,#post-body h4");if(toc_head.length>1){toc_head.first().before(toc_html);var _0xb767x3=".tocify-wrap";$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#tocify").slideToggle(170)})}),$("#tocify").toc({content:"#post-body",headings:"h2,h3"}),$("#tocify li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")).offset().top-20},500),!1})})}

目次をデフォルトで開くのは、管理画面から「テーマ」→「カスタマイズ」→「詳細設定」→「TOC Options」→「Expand Table of Content」の箇所で設定可能かと思ったのですが、反応しなかったようなので上記の方法で無理やり開きました。

「一致する検索結果はありません」のデフォルトメッセージの変更

トップページの記事一覧で「投稿をもっと読み込む」を押して記事をロードしていき、表示する記事がなくなると「一致する検索結果はありません」と表示されます。

この文言は Blogger で「noMorePosts」の日本語版規定メッセージとなっているようですが、トップページでは検索しているわけではないので違和感があります。

以下コードを検索し、赤字の部分を自分の好きな文言に置き換えることで修正できます。

<span class='no-more load-more btn'><b:include data='{ message: &quot;noMorePosts&quot; }' name='theme-custom-lang'/></span>
<b:else/>
<span class='no-more load-more btn show'><b:include data='{ message: &quot;noMorePosts&quot; }' name='theme-custom-lang'/></span>

<span class='no-more load-more btn'>すべての記事が表示されました</span>
<b:else/>
<span class='no-more load-more btn show'>すべての記事が表示されました</span>

他にも規定メッセージが表示される箇所は、このように文言を直接置き換える形で修正可能だと思います。

ブログ運営

#Blogger #VTrick #カスタマイズ