Blogger + JetTheme ①

ブログの引っ越し

当ブログはtakemi.blogに移行しました。

作成日時

2023/02/26

概要

本ブログにJetThemeを適用しました。かっこいいデザインで気に入っています。

特にダークモードの切り替えがあるのと、上部のヘッダーがアニメーションするのが好みです。

今回はデザインを色々修正することになったのでメモを残します。

同様の修正を行いたい方は各項目を参考にしてください。

Theme入手

公式サイトを辿ると以下に行き着きます。その中のDownload filesって部分からダウンロードできます。

https://github.com/jettheme/core

Theme適用

圧縮ファイルを解凍すると以下の3ファイルを入手できます。

• blank.xml
• jettheme-v2.xml
• jettheme-v2.min.xml

簡単に言うとblank.xmlは初期化用のファイル。デザインの切り替えでWidgetが残ったりするので、それを全消しするために使います。

でっ、jettheme-v2.xmlが実質的な本体。jettheme-v2.min.xmlは名前的に軽量版？。使ってないので不明です。

適用方法は「テーマ -> カスタマイズ -> HTMLを編集」から入手したxmlの内容を全コピーします。

この時にWidgetが残るのが気になる場合、先にblank.xmlを利用して一度全部を消してください。

修正前に補足

以降は筆者が作業した内容の説明です。レイアウトからGUIを利用して修正できる部分は書きません。

また、ある程度プログラムを知っている前提で書いています。

記事のTitle表示を削除

私の場合、記事内にTitleと同文を記述するために内容が被るので削除します。

以下を検索すると2箇所見つかります。これは通常記事(1個目)とページ用(2個目)です。

<h1 class='entry-title mb-4'><data:post.title/></h1>

これを以下に変更。コメントアウトしてますが不要なら消して良いかと。

<!-- <h1 class='entry-title mb-4'><data:post.title/></h1> -->

投稿日時から最終更新日時に変更

投稿日時よりも更新日時を表示したほうが有益だと思ったので修正。対象箇所を見つけるために以下を検索します。

<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span></div>

この中のdata:post.dateをdata:post.lastUpdatedに変更します。

<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.lastUpdated.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.lastUpdated format data:jwidget.allBylineItems.timestamp.label : data:post.lastUpdated'/></span></div>

最終更新日時を右寄せに変更

右寄せが好みなので修正。以下を検索します。

<div class='entry-meta mb-3 text-secondary d-flex flex-wrap fw-light'>

対象箇所にjustify-content-endを追加すれば右寄せになります。

<div class='entry-meta mb-3 text-secondary d-flex justify-content-end flex-wrap fw-light'>

共有リンクのアイコンを右寄せに変更

こちらも右寄せに変更。以下を検索(social-share mb-3推奨)します。

      <div class='social-share mb-3'>
        <div class='d-flex fs-5'>

修正方法は先程と同じです。

<div class='d-flex justify-content-end fs-5'>

強制大文字を解除

よくあるデザインで一部の文字(Widgetのタイトル)が強制的に大文字になります。普通に見ずらいので解除します。

以下を検索します。

#primary .widget-title {
font-weight: 300;
text-transform: uppercase;
}
#footer .widget-title {
text-transform: uppercase;
}

この中のuppercaseをnoneに変更しましょう。

#primary .widget-title {
font-weight: 300;
text-transform: none;
}
#footer .widget-title {
text-transform: none;
}

さらに一部はtext-uppercaseが直接指定されています。

以下が該当箇所、2箇所あるので検索してtext-uppercaseを消します。

<div class='widget-title position-relative mb-3 text-uppercase fw-light'>

と

<div class='widget-title position-relative  mb-3 text-uppercase fw-light'><span>

パンくずリストの削除

自動でパンくずリストが表示されるのですが、複数ラベルが名前順？で表示されるのみで微妙に感じたので削除します。

機能ごと不要であれば以下を全部消します。

<div itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList' style='--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' width='8' fill='none' viewbox='0 0 24 24' stroke='%23686868'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M 0.5,0.5 4,4 0.5,7.5'/%3E%3C/svg%3E");'>
<ol class='breadcrumb d-block text-nowrap fs-7 overflow-hidden text-truncate'>
<b:if cond='data:view.search.query'>
  <li class='breadcrumb-item d-inline-block'>Search for: <data:view.search.query/></li>
<b:else/>
  <li class='breadcrumb-item d-inline-block' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
    <a expr:href='data:blog.canonicalHomepageUrl' itemprop='item' rel='tag' title='Home'><span itemprop='name'>Home</span></a>
    <meta content='1' itemprop='position'/>
  </li>
  <b:if cond='data:post.labels'>     
    <b:loop index='i' values='data:post.labels where (l => l.name not contains "#") take data:skin.vars.maxLabel' var='label'>
      <li class='breadcrumb-item d-inline-block' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:label.url.canonical + "?max-results=10"' expr:title='data:label.name' itemprop='item' rel='tag'><span itemprop='name'><data:label.name/></span></a>
        <meta expr:content='data:i + 2' itemprop='position'/>
      </li>
    </b:loop>
  </b:if>
  <b:if cond='data:view.search.label'>
    <li aria-current='page' class='breadcrumb-item d-inline-block active'><b:eval expr='data:view.search.label'/></li>
  </b:if>
  <b:if cond='data:view.isArchive'>
    <li aria-current='page' class='breadcrumb-item d-inline-block active'>
    <b:loop index='i' values='[data:view.archive.year,data:view.archive.month,data:view.archive.day]' var='dates'>
      <b:if cond='data:i == 0'>
        <a expr:href='data:blog.canonicalHomepageUrl + data:dates'><data:dates/></a>
      </b:if>
      <b:if cond='data:i == 1'>
        / <a expr:href='data:blog.canonicalHomepageUrl + data:view.archive.year +(data:dates gte 10 ? "/" : "/0" )+ data:dates'>
        <b:eval expr='data:dates gte 10 ? data:dates : "0" + data:dates '/>
        </a>
      </b:if>
      <b:if cond='data:i == 2'>
        / <data:dates/>
      </b:if>
    </b:loop>
  </li>
  </b:if>
</b:if>
</ol>
</div>

念のため記述を残しておきたい場合は以下みたいなタグで囲めば良いと思います。

<span style='display:none'>
  ここで囲む
</span>

記事下部のラベル表示かつ右寄せに変更

ハッシュタグという概念が追加されるために通常のラベルが表示されません。代わりに「#」が付いたラベルがハッシュタグとして扱われるのですが、既存のラベルを変えるのは面倒いので仕組みを変更します。

以下を検索して変更箇所を見つけます。

<b:loop index='i' values='data:post.labels where (l => l.name not contains "#") skip data:skin.vars.maxLabel' var='label'>

ここからskip data:skin.vars.maxLabelを削除します。

<b:loop index='i' values='data:post.labels where (l => l.name not contains "#")' var='label'>

また、右寄せにしたいので以下を検索します。

<div class='entry-tag'>

これにd-flex justify-content-endを追加します。

<div class='entry-tag d-flex justify-content-end'>

Markdown対応

Markdownで記事を書けないと辛いので対応します。利用するLibraryは以下です。

https://github.com/markedjs/marked

Body部分に以下を追記します。親切に<!-- Your Style and Script before </body> is here -->って感じにユーザーコードを書く場所があるので下に書きます。

<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/>
<script>
  const mdEls = document.querySelectorAll('.markdown');
  for (let i in mdEls) {
    const mdEl = mdEls[i];
    const converted = document.createElement('div');
    converted.innerHTML = marked.parse(mdEl.value);
    mdEl.parentNode.replaceChild(converted, mdEl);
  }
</script>

なお、利用する場合はMarkdown部分を以下で囲みます。投稿テンプレートに設定しておくと楽です。

<textarea border-style:dotted="border-style:dotted" class="markdown" disabled="disabled">
  ここにMarkdown記述
</textarea>

Codeのハイライト対応

highlight.jsを使ってプログラムのコードをHighlight対応します。これはHead部分に追記します。

これも<!-- Your Style and Script before </head> is here -->って感じにユーザーコードを書く場所があるので下に書きます。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/stackoverflow-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>

ちなみにstackoverflow-darkと書かれた部分を変更するとデザインが変わります。

デザインは以下から選べるので、変更したい場合は参考にしてください。

https://highlightjs.org/static/demo/

Code部分の枠サイズを調整

何もしないとJetThemeのpreタグと干渉して枠が二重？になるので修正します。

特に気にならない人は対応しなくて良いです。では、以下を検索します。

pre {
background-color: var(--jt-bg-light);
margin-bottom: 1rem;
padding: 1rem;
font-size: 0.75rem;
}

ここから不要な項目を消します。ついでに私は文字サイズも変えました。

pre {
/*background-color: var(--jt-bg-light);*/
/*margin-bottom: 1rem;*/
/*padding: 1rem;*/
font-size: 0.8rem;
}

Google Analytics対応

自分用のメモです。<head>の次に書けと言われるので、手動追加を選ぶと出力されるスクリプトを直ぐ下に追記します。

おわりに

HTMLを直接編集するため、記述ミスがあると悲しいことになります。

都度Backupを取るかテスト用ブログでお試しあれ。

追記: 2023/03/02

続き