【Blogger】トップページのWidgetタイトルの見た目を変える

   Latest updated
トップページのWidgetタイトルの見た目を変える

JetThemeのトップページのWidgetのタイトルの見た目を変更しましたので、紹介したいと思います。

トップページのメインとサイドバーのWidgetタイトルの見た目を変える

JetThemeテンプレートのメインとサイドバーのWidgetタイトルの見た目を変えていきたいとを思います。

本ブログのカスタマイズ情報は、ほぼ素人の私がインターネット上の情報を活用しながら、試行錯誤した内容のため、間違い不具合もあるかもしれないことご了承いただければと思います。

タイトルの見た目の変更

まず、FEATURED POST, LATEST POST, ABOUT、などのタイトルの見た目を変えていきたいと思います。正確には、IDの#primary内の、widget-titleクラスが付けられているタグ内の見た目を変えていきたいと思います。

マイテーマのHTMLを編集していきます。

以下のCSSを検索して見つけます。IDの#primaryは、トップページのヘッダーとフッター以外、つまりメインとサイドバーのスタイルを決めているようですので、以下のCSSを変えると、#primaryで囲われた範囲のwidget-titleクラスがついているタグで囲われた範囲が変わります。 

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

また、さらに#primaryのwidget-titleの中のspanタグの中の見た目は以下で変えられます。 

#primary .widget-title > span {
background-color: var(--bs-body-bg);
padding-right: 5px;
position: relative;
}

それぞれのウィジェットのタイトル、FEATURED POST, LATEST POST, ABOUT、などの見た目を上記の2つのCSSで、好みに変えてみましょう。

タイトル名の横棒の見た目を変える

初期状態ではタイトル名の右側には横棒が引かれて、横棒の右端はJetThemeのテーマカラーのオレンジ色で塗られていると思います。これを変えていきたいと思います。

横棒の見た目を変えるには、以下の2つのCSSで変えることができます。

まず、メインとサイドバーの横棒の見た目を変えます。以下のID、main, sidebar、のクラスwidget-title:beforeを変えて見た目を変更します。

#main .widget-title:before,
#sidebar .widget-title:before {
background-color:  var(--jt-bg-light);/*線の色*/
content: "";
height: 1px;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}

横棒の右端のアクセントの見た目は以下で変えることができます。こちらはメインのWidgetのタイトルだけの変更になります。

#main .widget-title:before {
border-right: 30px solid var(--jt-primary);/*右端のオレンジの色*/
height: 5px;
}

以上、タイトルの見た目を変えるでした。

タイトル名を変更

JetThemeの初期状態のトップページのメイン部分の、FEATURED POST, LATEST POSTSと表示されている部分を以下のようなタイトル名に変えたいと思います。

  • FEATERD POSTを"Latest post"に変更
  • LATEST POSTSを"Recent posts"に変更

サイドバーの、About, Popular postsは、ガジェットの設定から変えることができます。

FEATURED POSTを変更

FEATURED POSTは以下のコードのtitle='Featured Post'のシングルクオーテーションに囲まれた部分を変更することで変えられます。 

<b:widget cond='data:view.isHomepage or data:view.url.canonical == data:blog.canonicalHomepageUrl path &quot;/search?max-results=10&quot;' id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost' visible='true'>

LATEST POSTSを変更

LATEST POSTSは以下のコードのspanタグに囲まれた部分を変更することで変えられます。 

<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>

以上、トップページのメイン部分のタイトル名を変える、でした。

まとめ

今回は、BloggerのテーマJetThemeのカスタマイズとして、メインとサイドバーのWidgetのタイトルの見た目の変更について紹介してきました。これからもJetThemeのカスタマイズをどんどん紹介していきたいと思います。

最後まで記事を読んでいただきありがとうございました。

Jetthemeカスタマイズは、こちらにまとめてます

- スポンサーリンク -

Next Post Previous Post