JetThemeカスタマイズ
概要
BloggerのテーマテンプレートにJetthemeを使うときのカスタマイズ。
色々なWebブログから引張ってきたり、自分で試行錯誤したりのカスタマイズを備忘録にしておきます。
引用元はこのブログ
【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ
JetTheme を導入しますにあたって、いくつかカスタマイズを行いました。当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきましたいと思います。
オリジナルロゴ作成
（別法）テキストロゴでもOK
JetTheme+Bloggerの初期設定 | No.8
ようやく新しいテンプレート「JetTheme」のカスタマイズが終わりました。といっても、まだ細かな部分が調整・確認しきれていませんが、まずは公開です。 カスタマイズの情報を今後のバージョンアップに備えた自分用のメモとして。 同テンプレートを使用されている先輩方も詳しく解説されてい...
8-stars.blogspot.comHeadr分類のLogoウィジェットへは次のように書き込みます。
<span class="text-gradient" id="blog-title">私の図書館</span>
/*テキストロゴにグラデーションなどの装飾*/
.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;
}
}
グラデーションのつけ方はここで調べました。（コピペしました。）
CSSだけ！文字にグラデーションを付ける方法＆サンプルコード集 ｜ 向壁虚造
CSSで文字色にグラデーションをかけるテクニックを紹介。また、コピペですぐ実装できるサンプルデザイン＆コードも掲載しています。linear-gradientやbackground-cripで美しいグラデーション文字を作れます。
トップページを横1列のカード形式に変更
【Blogger】JetTheme のトップページをリスト形式にしますカスタマイズ | リモスキ
JetTheme のトップページ記事一覧をリスト形式にしますカスタマイズ方法をご紹介します。
右上のシェアボタンのみを消す
【Blogger】JetThemeの導入とカスタマイズ - plz-reference-blog
Blogger用のシンプルかつ高速でおしゃれなJetThemeの導入方法と、カスタマイズをいくつかまとめてみました。
ヘッダーが見え隠れするのを止める
【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ
JetTheme を導入するにあたって、いくつかカスタマイズを行いました。当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきたいと思います。
見出しデザイン
/*--記事内の見出し--*/
.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;
}
日付の書式を変更
「ブログの投稿」から、フォーマットが変更できるようになりました。
更新日の追加
日付はトップ(Home)ページの記事一覧と個別記事に表示されています。ここでは、個別記事だけをアイコン付きの更新日表示に変更点します。
「JetTheme」の日付の書式変更と更新日の追加方法 - after work lab
はじめに この記事は「JetTheme」の日付の書式と更新日を追加しますカスタマイズ方法の説明です。 デフォルトの表示に不満を持っています方は参考にご覧ください。 なお、上手く行かなかったとき元に戻す為に、変更前に必ずxmlファイルのバックアップを取り保存しておい...
- SVGアイコンの登録
- コードの修正
「SVG icons」の編集を開き、アイコンサイトからコピペした下記の構文を登録します。このとき大きさの調整のため、width="14" height="14" に変更しています。
<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>続いて、<b:includable id='JetPost' var='post'>を探して、その10行ほど下にある
<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>
をごっそりと次の内容に書き換えます。引用元と同じくi-rotate-leftでアイコン登録をしたので、更新日に付与するSVGアイコンのidはi-rotate-leftにしています。
<!-- 更新日追加 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 -->
ヘッダメニューを中央配置 ← 引用元へジャンプ
<ul class='navbar-nav px-4 p-lg-0 container' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='menu'>
を書き換えます。引用元の右寄せは好みに合わなかったので、中央配置にしています。
justify-content-end ---> justify-content-center
<ul class='navbar-nav px-4 p-lg-0 container justify-content-center' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='menu'>
RELATED POST （関連記事）
- "RELATED POST" は、Blogger管理＞設定＞読者の権限＞一般公開 でなければ、表示されません。他にも、"#You may also like" やページャなども同様です。
- また、ラベル(label)を設定していなければ、"RELATED POST" は表示されません。"RELATED POST" は同じラベルにあるカテゴリの記事から、抽出しています。他にも、Jettheme標準のサイトマップも同様です。
【Blogger】JetTheme カスタマイズ方法一覧 | リモスキ
JetTheme を導入しますにあたって、いくつかカスタマイズを行いました。当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきましたいと思います。
上記の引用元に沿って行うと、4 記事表示から 6 記事に変更できました。
余白調整
Bootstrap の記述なので、ここなどでBootstrapを調べながら作業します。
デフォルトでは、1.5rem のマージンでしたので、これを0.5rem に変更しました。
左右の余白調整（水平方向の余白調整）
/*<
理想のブログカードでページスピードを上げる方法 - after work lab
はじめに ブロガーの皆さん、ブログカードって使ってますか。 はてなブログ、WordPress、アメーバブログには、ブログカードorリンクカードが簡単に作れるのですが、FC2ブログやBloggerには、そのような機能は提供されてません。 その為、当Webサイトでは、はて...
Footerの帯
<div class='py-5 fs-7' id='footer-main'>
を下記に書き換えます。（上下のパディング3rem py-5 を0rem py-0 にします。）
引用元と同じく i-rotate-left でアイコン登録をしたので、更新日に付与する SVGアイコン のidは i-rotate-left にしています。
<div class='py-0 fs-7' id='footer-main'>Copyright の更新日付
Copyright © 2021 <script type="text/javascript">myDate = new Date() ;myYear = myDate.getFullYear ();if(myYear> '2021')
document.write('-' + myYear);</script> '著作権者名' Design by <a href="https://www.jettheme.com">JetTheme.com</a>