• TOP
• Blogger

Bloggerでブログサイトのデザインをカスタマイズする方法｜Bloggerテーマ「ZELO」カスタマイズ

2019-02-14T15:08:00+09:00 2019-04-03T01:44:33Z Blogger

先日、Bloggerテーマの「ZELO」を導入しました。

今のところ、ブログサイトのデザインは、大きな変更をしない予定でしたが、カスタマイズをして、少しだけデザインを変更しました。

今回は、

ナビバーと見出しをカスタマイズして、デザインを変更した方法を紹介します。

ナビバーをカスタマイズする

ZELOでは、ナビバーがデフォルトで以下のように表示されます。

【モバイル表示の場合】

今回は、ナビバーのデザインをカスタマイズします。

ナビバーのデザインを変更

ナビバーをグレー系からブルー系の色に変更しました。

【変更後 - モバイル表示の場合】

ナビバーの背景色は、
Bloggerの「テーマデザイナー」という機能を使用して、HTMLやCSSのコードには触らずに、変更できます。

Blogger管理画面の左側のメニューから「テーマ」を選択して、「カスタマイズ」ボタンを押します。

表示された「Bloggerテーマデザイナー」画面で「上級者向け」→「上部固定バーの編集」を選択します。

ここで、テーマの項目「ナビバー全体背景色」と「pcのナビ要素背景色」の色を変更して、「ブログに適用」ボタンを押します。

*テーマの2項目を同じ色にします。

これで、ナビバーの背景色を変更できます。

見出しをカスタマイズする

見出し（デフォルト）

Bloggerテーマ「ZELO」の見出し（h2・h3・h4）は、デフォルトで以下のように表示されます。

CSSの解説（デフォルト）

Bloggerテーマ「ZELO」のCSSは、デフォルトで以下のコードになっています。

ここでは、
このCSSについて解説します。

/* ---------- 記事ページのh2,h3,h4 */

.entry-content h2 {
font-size: 22px;
padding: 0.4em;
background-color: $(item.h2bg.color);
color: $(item.h2.color);
margin: 1.3em 0;
border-radius: .25em;
}
.entry-content h3,h4 {
font-size: 20px;
padding: 0 0.4em;
margin: 1.3em 0 !important;
}
.entry-content h3 {
border-bottom: dashed 2px $(item.h3border.color);
color: $(item.h3.color);
}
.entry-content h4 {
color: $(item.h4.color);
margin: 1.3em 0 !important;
}

・「.entry-content h2」

ここでは、
「見出し（h2）」の設定をします。

font-size: 22px

文字サイズを指定します。

padding: 0.4em

パディング幅を指定します。

background-color: $(item.h2bg.color)

背景色を設定します。
*$(item.h2bg.color)：#999999

color: $(item.h2.color)

文字色を指定します。
*$(item.h2.color)：#ffffff

margin: 1.3em 0

マージン幅を指定します。

border-radius: .25em

要素の4つの角に丸みを指定します。

・「.entry-content h3,h4」

ここでは、
「見出し（h3・h4）」の設定をします。

font-size: 20px

文字サイズを指定します。

padding: 0 0.4em

パディング幅を指定します。

margin: 1.3em 0 !important

マージン幅を指定します。
*!important：このスタイル指定を最優先

・「.entry-content h3」

ここでは、
「見出し（h3）」の設定をします。

border-bottom: dashed 2px $(item.h3border.color)

下のボーダーのスタイル、太さ、色を指定します。
*dashed：破線
*$(item.h3border.color)：#000000

color: $(item.h3.color)

文字色を指定します。
*$(item.h3.color)：#000000

・「.entry-content h4」

ここでは、
「見出し（h4）」の設定をします。

color: $(item.h4.color)

文字色を指定します。
*$(item.h4.color)：#000000

margin: 1.3em 0 !important

マージン幅を指定します。
*!important：このスタイル指定を最優先

見出し（h2）のデザインを変更

見出し（h2）をグレー系からブルー系の色に変更しました。

【変更後】

Blogger管理画面の左側のメニューで「テーマ」を選択して、「HTMLの編集」ボタンを押します。

「.entry-content h3」の以下の箇所を変更します。

・background-color（「$(item.h2bg.color)」→「#273c75」に変更）


「テーマを保存」ボタンを押します。

見出し（h3）のデザインを変更

見出し（h3）を破線から実線に変更しました。

【変更後】

Blogger管理画面の左側のメニューで「テーマ」を選択して、「HTMLの編集」ボタンを押します。

「.entry-content h3」の以下の箇所を変更します。

・border-bottom（「dashed」→「solid」に変更）
*dashed：破線
*solid：実線（1本線）

「テーマを保存」ボタンを押します。

見出し（h4）のデザインを変更

見出し（h4）は変更せず、そのまま使用することにしました。

スポンサーリンク