JetThemeカスタマイズ
<!-- markdown-mode-on -->
<style>
.entry-text h2,
.entry-text h3,
.entry-text h4,
.entry-text h5,
.entry-text h6 {
margin-top: 2em;
margin-bottom: 1rem;
}
</style>
<h2 id="概要" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
<strong>
概要
</strong>
<a href="#概要" title="概要">
<i class="headlink" style="display: none;">
</i>
</a>
</h2>
<p>
Bloggerのテーマテンプレートに
<a href="https://www.jettheme.com/">
Jettheme
</a>
を使うときのカスタマイズ。
<br/>
色々なWebブログから引張ってきたり、自分で試行錯誤したりのカスタマイズを備忘録にしておきます。
<img alt="jettheme logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6tkuCAB6zwNyTYCvTrA07cGstQGH7GBjCipsk3a6HoUiKVea-159v4oK4uq7qhXUjbbnX0Hm5Fds5sw7iiCzhqObJHwcnKQEf9-0iAqgpH6bSzH6FxQCVVBh-XrghyphenhyphenMUwaIjVewBQXI/s1600/jettheme-cover.png" width="320"/>
</p>
<p>
引用元はこのブログ
</p>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_10" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGv4WwPnFcaBKnUDC2th1oRnKQDYntoQMVw6QC6EcUSIXJXCAVy-MiPxw3YQ9kq8Oqm9-gzhFt2aYWQHPSzYwxQRN_dvHKD05fNySE1d5yLYSP5mZaEP8w9_jh55I247r2X9kzOXGr9uHMzaAD1ni0UbWfuipzxMeVEemKNnhvLexkmo_xdjPw8_N0g/s1600-e365-rw/eyecatch-jettheme-ichiran.png" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ
</p>
<p class="blogcard-description bd-link">
JetTheme を導入しますにあたって、いくつかカスタマイズを行いました。当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきましたいと思います。
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_10" width="16"/>
www.limosuki.com
</div>
</a>
</figure>
<p>
</p>
<a name="more"></a>
## ヘッダ高さ
ヘッダ高さが大きく感じるので、低くしてみました。
オリジナルは、#header { min-height: 50px; } となっていますが、ロゴ（テキスト表示）の関係か、73px でした。
<br/>
低くするには、以下のCSSを追加します。`/*Your custom CSS is here*/` の直下に置きました。
```css
/*Your custom CSS is here*/
#header {
height: 2.6em;
min-height: 20px;
}
```
<h2>
オリジナルロゴ作成
</h2>
<div>
引用元ブログの”
<a href="https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_3" target="_blank">
タイトルロゴに SVG 画像を設定
</a>
”に沿って変更します。
</div>
<h2>
（別法）テキストロゴでもOK
</h2>
<div>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://8-stars.blogspot.com/2023/02/bloggerjettheme.html#toc_headline_8" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="JetTheme+Bloggerの初期設定 | No.8" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTkDlUiHlr8CTpNNYUcc_t4JZr9Gc02qRRPyOdvGUCVL4ACxIfTajOuUBRJkrXFcBr5uZEFJK3VE7hS1e1TRJ3rSSNDE2bV2bES70s8czPBY5GJ9YlIMlNKzLOJIUYuT0-ZWwR618UmK8JD_P_45bGXx5xMfQDKseE-r33mWV22g5M-F392aYyT3swMw/w640-h336-rw/jettheme-001.jpg" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
JetTheme+Bloggerの初期設定 | No.8
</p>
<p class="blogcard-description bd-link">
ようやく新しいテンプレート「JetTheme」のカスタマイズが終わりました。といっても、まだ細かな部分が調整・確認しきれていませんが、まずは公開です。 カスタマイズの情報を今後のバージョンアップに備えた自分用のメモとして。 同テンプレートを使用されている先輩方も詳しく解説されてい...
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://8-stars.blogspot.com/2023/02/bloggerjettheme.html#toc_headline_8" width="16"/>
8-stars.blogspot.com
</div>
</a>
</figure>
<p style="text-align: left;">
Headr分類のLogoウィジェットへは次のように書き込みます。
<br/>
<span class="text-gradient" id="blog-title">私の図書館</span>
</p>
<div>
<br/>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/a/AVvXsEiWLqI7Ao5QFyMhL1gUgwFEU85szPCwPQURHSWFHFbjlN5MpF3rlkB67y4DNibBV-6TezLvut6cTdDgzkrBpfvE6Fnm7Jf1JEl-eorV3YcUZy2UHw95kiz7vhxh-n9AlzWYdiisZm3XqQxYhlnhLjorFnsJVKLDGGnIIbLKcgnhuEnV2F9abzb701jsPOGZ" style="margin-left: 1em; margin-right: 1em;">
<img alt="logo setting" data-original-height="505" data-original-width="555" height="364" src="https://blogger.googleusercontent.com/img/a/AVvXsEiWLqI7Ao5QFyMhL1gUgwFEU85szPCwPQURHSWFHFbjlN5MpF3rlkB67y4DNibBV-6TezLvut6cTdDgzkrBpfvE6Fnm7Jf1JEl-eorV3YcUZy2UHw95kiz7vhxh-n9AlzWYdiisZm3XqQxYhlnhLjorFnsJVKLDGGnIIbLKcgnhuEnV2F9abzb701jsPOGZ=w400-h364" width="400"/>
</a>
</div>
<br/>
<br/>
</div>
<div>
テキストのスタイルはCSSに書きます。
</div>
<div>
<br/>
</div>
<pre><code class="language-css">
/*テキストロゴにグラデーションなどの装飾*/
.text-gradient {
background: -moz-linear-gradient(left, #FFAC08, #f67938);/*左から右へグラデーション*/
background: -webkit-linear-gradient(left, #FFAC08, #f67938);
background: linear-gradient(to right, #FFAC08, #f67938);/* 背景にグラデーションを適用する */
-webkit-background-clip: text;/* 背景を文字の形に切り取る */
-webkit-text-fill-color: transparent;/* 文字を透明にする */
}
@media (min-width: 992px) {
#blog-title {
font-size: 2.0em;
margin: 0px !important;
}
/*ヘッダー高さ調整*/
#header-main {
margin-top: 1em;
}
}
@media (max-width: 991.98px) {
#blog-title {
font-size: 1.5em;
margin: 0px !important;
}
/*ヘッダー高さ調整*/
#header {
max-height: 5rem;
}
}
@media (max-width: 575.98px) {
#blog-title {
font-size: 1em !important;
}
/*ヘッダー高さ調整*/
#header {
max-height: 4rem;
}
}
</code></pre>
<p style="text-align: left;">
グラデーションのつけ方はここで調べました。（コピペしました。）
</p>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://kouhekikyozou.com/css_text_gradation" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集 ｜ 向壁虚造" height="100" loading="lazy" src="https://kouhekikyozou.com/wp-content/uploads/css_text_gradation.png" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集 ｜ 向壁虚造
</p>
<p class="blogcard-description bd-link">
CSSで文字色にグラデーションをかけるテクニックを紹介。また、コピペですぐ実装できるサンプルデザイン＆コードも掲載しています。linear-gradientやbackground-cripで美しいグラデーション文字を作れます。
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://kouhekikyozou.com/css_text_gradation" width="16"/>
kouhekikyozou.com
</div>
</a>
</figure>
<h2 id="Home_ページを横1列に変更" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
トップページを横1列のカード形式に変更
<a href="#Home_ページを横1列に変更" title="Home_ページを横1列に変更">
<i class="headlink" style="display: none;">
</i>
</a>
</h2>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://www.limosuki.com/2021/11/jettheme-top-customize.html" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="【Blogger】JetTheme のトップページをリスト形式にしますカスタマイズ | リモスキ" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEjWtPoxhq422RdmRlklINLa2BYQmTkYsltO0ls3eohV0mAHaBso-6kCgzSfrpL6U4TKdPN7du5n34B9MkVzrJ_y0M3_rdRcYui3ytP-h9bzCOvr7m5MwCc8fSSGqVBjK8ubar4UfiDnhjEwAVc1qyPMoDzE-8xKgCJ_7QOwD6tNbADV6dhOY65icWQNSw=s0-rw-e365" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
【Blogger】JetTheme のトップページをリスト形式にしますカスタマイズ | リモスキ
</p>
<p class="blogcard-description bd-link">
JetTheme のトップページ記事一覧をリスト形式にしますカスタマイズ方法をご紹介します。
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://www.limosuki.com/2021/11/jettheme-top-customize.html" width="16"/>
www.limosuki.com
</div>
</a>
</figure>
<h2 id="右上のシェアボタンのみを消す" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
右上のシェアボタンのみを消す
<a href="#右上のシェアボタンのみを消す" title="右上のシェアボタンのみを消す">
<i class="headlink" style="display: none;">
</i>
</a>
</h2>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://www.plz-reference.com/2022/09/blogger-jettheme.html" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="【Blogger】JetThemeの導入とカスタマイズ - plz-reference-blog" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3jjs15fII5y7ad90D7Jb8fH4JU7kpgsICjSGqFawjEsXsi7j8v1IQamhV8SsSt-oYpwCycenCUy7fQekQlHL7gfZl--2SlXEMLf6RCgq64MuR0xYLXX1waLBOxBc0hFxQEDM2bVyGbcY5K-Czzpgvhr0_OaoK5La9S7084Mbts7-MwJ4QCQh8B-Fy/w400-h210/jettheme.png" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
【Blogger】JetThemeの導入とカスタマイズ - plz-reference-blog
</p>
<p class="blogcard-description bd-link">
Blogger用のシンプルかつ高速でおしゃれなJetThemeの導入方法と、カスタマイズをいくつかまとめてみました。
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://www.plz-reference.com/2022/09/blogger-jettheme.html" width="16"/>
www.plz-reference.com
</div>
</a>
</figure>
<h2 id="日付の書式を変更" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
ヘッダーが見え隠れするのを止める
</h2>
<div>
<br/>
</div>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_2" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGv4WwPnFcaBKnUDC2th1oRnKQDYntoQMVw6QC6EcUSIXJXCAVy-MiPxw3YQ9kq8Oqm9-gzhFt2aYWQHPSzYwxQRN_dvHKD05fNySE1d5yLYSP5mZaEP8w9_jh55I247r2X9kzOXGr9uHMzaAD1ni0UbWfuipzxMeVEemKNnhvLexkmo_xdjPw8_N0g/s1600-e365-rw/eyecatch-jettheme-ichiran.png" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ
</p>
<p class="blogcard-description bd-link">
JetTheme を導入するにあたって、いくつかカスタマイズを行いました。当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきたいと思います。
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_2" width="16"/>
www.limosuki.com
</div>
</a>
</figure>
<h2 id="日付の書式を変更" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
見出しデザイン
</h2>
<div>
デフォルトでは見出しがわかりにくいので、デザインを変えました。ユーザCSSの最後に以下を追加します。
</div>
<div>
<br/>
</div>
<pre><code class="language-css">/*--記事内の見出し--*/
.entry-text h2 { /* 2重下線 */
font-color: var(--ts-main-font);
font-size: 1.5rem;
border-bottom: double 5px var(--ts-main);
padding: 0 0 0.2rem 0.1rem;
margin: 2.5rem 0 1rem 0;
}
.entry-text h3 { /* 文字範囲下線 */
display: inline-block;
font-size: 1.25rem;
border-bottom: solid 2px var(--ts-main);
padding: 0 0 0 0.3rem;
margin: 2rem 0 1rem 0;
}
.entry-text h4 { /* 行頭太線 */
font-size: 1.0rem;
border-left: solid 0.2rem var(--ts-main);
padding: 0 0 0 0.5rem;
margin: 2rem 0 1rem 0.5rem;
}
</code></pre>
<h2 id="日付の書式を変更" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
日付の書式を変更
<a href="#日付の書式を変更" title="日付の書式を変更">
<i class="headlink" style="display: none;">
</i>
</a>
</h2>
<p>
「ブログの投稿」から、フォーマットが変更できるようになりました。
</p>
<img alt="ブログ投稿" src="https://blogger.googleusercontent.com/img/a/AVvXsEgaTgDYOhsKNFeh7zH7TEN2k2cUcP1Vj_FUDuCA-9zsdj9u2OVdXu3PUDcPT-rP0GPkZn6mRq6QM3GynL_hCjdPIxXliIuNygGpOsNRh-wW2EyZvJ0IRBmRFjHwI8d-wCAI7LgJTUauhBf5XBLYfipt7W_ht0CT3c7y8D_lVHIFYyaUD7pzhGhL9v3Dpjaz" width="800"/>
<h2 id="更新日の追加" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
更新日の追加
<a href="#更新日の追加" title="更新日の追加">
<i class="headlink" style="display: none;">
</i>
</a>
</h2>
<p>
日付はトップ(Home)ページの記事一覧と個別記事に表示されています。ここでは、個別記事だけをアイコン付きの更新日表示に変更点します。
</p>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://www.heavy-peat.com/2021/09/add-update-date.html" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="「JetTheme」の日付の書式変更と更新日の追加方法 - after work lab" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IoLBkcGPNgEYO3-M2wc5gH2j-cGXCFtRWFHb8l403lsyuVISqUmksEGYHL4RGT2ybDBA2PMuQeeFNZ04xO6zYV9CAkSV-4rlrBHaBA-9IeipGyYsqSTHiIMh30t2wEMe6Ucszd5rT4tv/s800-e365-rw/update-3314287_1200-628.jpg" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
「JetTheme」の日付の書式変更と更新日の追加方法 - after work lab
</p>
<p class="blogcard-description bd-link">
はじめに この記事は「JetTheme」の日付の書式と更新日を追加しますカスタマイズ方法の説明です。 デフォルトの表示に不満を持っています方は参考にご覧ください。 なお、上手く行かなかったとき元に戻す為に、変更前に必ずxmlファイルのバックアップを取り保存しておい...
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://www.heavy-peat.com/2021/09/add-update-date.html" width="16"/>
www.heavy-peat.com
</div>
</a>
</figure>
<ul>
<li>
SVGアイコンの登録
</li>
<li>
コードの修正
</li>
</ul>
この2項目を行います。
<div>
<br/>
<div>
最初に、SVGアイコンの登録を引用元どおりに行いました。
</div>
<div>
<a href="https://iconsvg.xyz/" target="_blank">
SVGアイコンサイト
</a>
から持ってきたアイコンは
<svg aria-hidden="true" class="me-1 jt-icon">
<use xlink:href="#i-rotate-left">
</use>
</svg>
です。これを「レイアウト」の一番下にある「JetTheme Setting」分類にある「SVG icons」に登録します。
</div>
<div>
<p style="text-align: left;">
「SVG icons」の編集を開き、アイコンサイトからコピペした下記の構文を登録します。このとき大きさの調整のため、
<b>
width="14" height="14"
</b>
に変更しています。
</p>
<pre><code class="language-html">
<symbol id="i-rotate-left" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M2.5 2v6h6M21.5 22v-6h-6"/><path d="M22 11.5A10 10 0 0 0 3.2 7.2M2 12.5a10 10 0 0 0 18.8 4.2"/>
</path></path></symbol></code></pre>
<p>
<br/>
</p>
<p>
続いて、
<b>
<b:includable id='JetPost' var='post'>
</b>
を探して、その10行ほど下にある
</p>
<pre><code class="language-html">
<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>
</code></pre>
<p>
をごっそりと次の内容に書き換えます。引用元と同じく
<b>
i-rotate-left
</b>
でアイコン登録をしたので、更新日に付与する
<b>
SVGアイコン
</b>
のidは
<b>
i-rotate-left
</b>
にしています。
</p>
<pre><code class="language-html"><!-- 更新日追加 Start-->
<div class='me-3'>
<svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg>
<span class='small date-format' expr:data-date='data:post.date.iso8601'>
<data:post.date.year/>/
<b:eval expr='data:post.date.month lt 10 ? "0" + data:post.date.month : data:post.date.month'/>/
<b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>
</span>
<b:if cond='data:post.date != data:post.lastUpdated'>??
<svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-rotate-left'/></svg>
<span class='small date-format' expr:data-date='data:post.lastUpdated.iso8601'>
<data:post.lastUpdated.year/>/
<b:eval expr='data:post.lastUpdated.month lt 10 ? "0" + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/
<b:eval expr='data:post.lastUpdated.day lt 10 ? "0" + data:post.lastUpdated.day : data:post.lastUpdated.day'/>
</span>
</b:if>
</div>
<!-- 更新日追加 End -->
</code></pre>
<h2 id="ナビゲーションメニューを中央配置にします" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
<a href="https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_11">
ヘッダメニューを中央配置
</a>
← 引用元へジャンプ
<a href="#ナビゲーションメニューを中央配置にします" title="ナビゲーションメニューを中央配置にします">
<i class="headlink" style="display: none;">
</i>
</a>
</h2>
<pre><code class="language-html"><ul class='navbar-nav px-4 p-lg-0 container' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='menu'>
</code></pre>
<p>
を書き換えます。引用元の右寄せは好みに合わなかったので、中央配置にしています。
<br/>
<b>
justify-content-end ---> justify-content-center
</b>
</p>
<pre><code class="language-html"> <ul class='navbar-nav px-4 p-lg-0 container justify-content-center' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='menu'>
</code></pre>
<h2 id="RATED_POST_（関連記事）" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
RELATED POST （関連記事）
<a href="#RATED_POST_（関連記事）" title="RATED_POST_（関連記事）">
<i class="headlink" style="display: none;">
</i>
</a>
</h2>
### 関連記事の表示設定について
<ul>
<li>
"RELATED POST" は、Blogger管理＞設定＞読者の権限＞一般公開 でなければ、表示されません。他にも、"#You may also like" やページャなども同様です。
</li>
<li>
また、ラベル(label)を設定していなければ、"RELATED POST" は表示されません。"RELATED POST" は同じラベルにあるカテゴリの記事から、抽出しています。他にも、Jettheme標準のサイトマップも同様です。
</li>
</ul>
<p style="text-align: left;">
<span style="font-size: large;">
<br/>
</span>
</p>
<figure class="blogcard b-link">
<a aria-label="記事詳細へ(別窓で開く)" href="https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_10" rel="noopener noreferrer" target="_blank">
<div class="blogcard-content">
<div class="blogcard-image bi-link">
<div class="blogcard-image-wrapper biw-link">
<img alt="【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ" height="100" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGv4WwPnFcaBKnUDC2th1oRnKQDYntoQMVw6QC6EcUSIXJXCAVy-MiPxw3YQ9kq8Oqm9-gzhFt2aYWQHPSzYwxQRN_dvHKD05fNySE1d5yLYSP5mZaEP8w9_jh55I247r2X9kzOXGr9uHMzaAD1ni0UbWfuipzxMeVEemKNnhvLexkmo_xdjPw8_N0g/s1600-e365-rw/eyecatch-jettheme-ichiran.png" width="100"/>
</div>
</div>
<div class="blogcard-text">
<p class="blogcard-title bt-link">
【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ
</p>
<p class="blogcard-description bd-link">
JetTheme を導入しますにあたって、いくつかカスタマイズを行いました。当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきましたいと思います。
</p>
</div>
</div>
<div class="blogcard-footer bf-link">
<img alt="ファビコン" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_10" width="16"/>
www.limosuki.com
</div>
</a>
</figure>
<p>
<a href="https://www.limosuki.com/2021/11/jettheme-customize-list.html#toc_10">
上記の引用元
</a>
に沿って行うと、4 記事表示から 6 記事に変更できました。
</p>
<h3 id="余白調整" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
余白調整
<a href="#余白調整" title="余白調整">
<i class="headlink" style="display: none;">
</i>
</a>
</h3>
<p>
Bootstrap の記述なので、
<a href="https://www.limosuki.com/2022/02/bootstrap5-class.html" target="_blank">
ここ
</a>
などでBootstrapを調べながら作業します。
<br/>
デフォルトでは、1.5rem のマージンでしたので、これを0.5rem に変更しました。
</p>
<h4 id="左右の余白調整（水平方向の余白調整）" onmouseout="this.querySelector('a .headlink').style.display='none'" onmouseover="this.querySelector('a .headlink').style.display='inline-block'">
左右の余白調整（水平方向の余白調整）
<a href="#左右の余白調整（水平方向の余白調整）" title="左右の余白調整（水平方向の余白調整）">
<i class="headlink" style="display: none;">
</i>
</a>
</h4>
<p>
<b>
/*<
1. `<svg>`タグを
`<symbol>`タグに変更
1. width, height, fill（fillはsvgタグ内とpathタグ内のもの両方）を削除
1. xmlns属性を削除
1. idを設定（idはi-chatgptとした）
1. **グラデーション（`<defs>`タグ）をつけると登録したアイコンが表示できなかった**
### 使い方
`<use>`コマンドを使う。テキストを追加するときは、テキストを`<span>`タグで囲む。
```html
<svg height="24" width="24">
<use xlink:href="#i-chatgpt">
</use>
</svg>
<span style="font-size: 12px;">
</span>
ChatGPT
```
<svg height="24" width="24"><use xlink:href="#i-chatgpt">
</use>
</svg>
<span style="font-size: 12px;">
</span>
ChatGPT
## 関連リンク