• TOP
• Blogger

Bloggerでモバイル表示のメニューをカスタマイズする方法（スマホ対応）｜Bloggerテーマ「ZELO」カスタマイズ

2019-02-17T10:29:00+09:00 2019-04-03T01:41:49Z Blogger

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

今回は、

Bloggerテーマ「ZELO」のモバイル表示のメニューをカスタマイズした方法を紹介します。

Bloggerのメニュー（モバイル表示）

メニュー画面（デフォルト）

Bloggerテーマ「ZELO」のメニューは、デフォルトで以下のように表示されます。


1. メニューをタップします。

2. メニューが表示されます。メニュー外の半透明の黒カバーをタップします。

3. メニューが閉じます。

CSSの解説（デフォルト）

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

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

/* ---------- スマホメニューの設定 */
.nav-unshown {
display: none;
}
#nav-open span {
color: $(menu.font.color);
position: relative;
font-size: 16px;
background-color: $(menu.bg.color);
cursor: pointer;
padding: 4px;
border-radius: 4px;
font-weight: 500;
}
#nav-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/* ---------- MENU中身 */
.fix-nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50%;
background: #fff;
transition: .3s ease-in-out;
-webkit-transform: translateY(-105%);
transform: translateY(-105%);
-webkit-overflow-scrolling: touch;
}
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.6;
}
#nav-input:checked ~ .fix-nav {
-webkit-transform: translateY(0%);
transform: translateY(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

・「.nav-unshown」

ここでは、

チェックボックスの表示設定をします。

display: none

要素の表示形式を指定する。
*none : 非表示


上記の設定では、チェックボックスを非表示に指定しています。

「MENU」ボタンは、ボタンのようにみえますが、実際は、ボタンではなく、チェックボックスです。

チェックボックスは非表示になっていますが、画面の左上の「MENU」ボタンをタップすると、チェックボックスにチェックが入り、メニューが表示されるようになっています。

チェックボックスにチェックが入ったかどうかにより、CSSを切り替えて、メニューの表示/非表示を制御しています。


・「#nav-open span」


ここでは、

「MENU」ボタンの設定をします。

color: $(menu.font.color)

文字色を指定します。
*$(menu.font.color) : #000000

position: relative

要素の配置方法を指定します。
*relative : 相対位置への配置

font-size: 16px

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

background-color

背景色を指定します。
*$(menu.bg.color) : #ffffff

cursor: pointer

クリックイベントを発生させるようにする設定と思われます。

padding: 4px

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

border-radius: 4px

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

font-weight: 500

フォント（文字の太さ）を指定します。


・「#nav-close」

ここでは、

黒カバーの設定をします。

また、メニューを表示しない時は、黒カバーが非表示になるように設定します。

display: none

要素の表示形式を指定します。
*none : 非表示

position: fixed

要素の配置方法を指定します。
*fixed : 相対位置への配置（固定）

z-index: 99

要素の重なりの順序を指定します。
*メニューの下に黒カバーを表示

top: 0

要素の上からの配置位置を指定します。

left: 0

要素の左からの配置位置を指定します。

width: 100%

要素の幅を指定します。

height: 100%

要素の高さを指定します。

background: black

背景色を指定します。

opacity: 0

要素の透明度を指定します。

transition: .3s ease-in-out

トランジション（時間的変化）を指定します。


・「.fix-nav」

ここでは、

メニューの設定をします。

また、メニューを表示しない時は、メニューをページの上に隠して非表示になるように設定します。

-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box

ボックスサイズの算出方法を指定します。
*画像の赤枠の幅と高さについての設定です。
*border-box : パディングとボーダーを幅と高さに含める
*-webkit、-moz : ベンダープレフィックス

overflow: auto

要素のボックスからはみ出た部分の表示方法を指定します。
*auto : ユーザーエージェントに依存

position: fixed

要素の配置方法を指定します。
*fixed : 相対位置への配置（固定）

top: 0

要素の上からの配置位置を指定します。

left: 0

要素の左からの配置位置を指定します。

z-index: 9999

要素の重なりの順序を指定します。
*黒カバーの上にメニューを表示

width: 100%

要素の幅を指定します。

height: 50%

要素の高さを指定します。

background: #fff

背景色を指定します。

transition: .3s ease-in-out

トランジション（時間的変化）を指定します。

-webkit-transform: translateY(-105%)
transform: translateY(-105%)

要素の表示位置を指定します。
*メニューを上に隠して非表示
*-webkit : ベンダープレフィックス
*translateY : Y方向の距離での移動を指定

-webkit-overflow-scrolling: touch

慣性スクロールの無効/有効を指定します。

*touch : 有効

・「#nav-input:checked ~ #nav-close」

ここでは、

「MENU」ボタンをタップした時、黒カバーを半透明にして、表示するように設定しています。

display: block

要素の表示形式を指定します。
*block : blockの要素

opacity: 0.6

要素の透明度を指定します。

・「#nav-input:checked ~ .fix-nav」

ここでは、

「MENU」ボタンをタップした時、隠していたメニューを表示するように設定しています。表示するメニューには影をつけます。

-webkit-transform: translateY(0%)

transform: translateY(0%)

要素の表示位置を指定します。
*上に隠していたメニューを表示
*-webkit : ベンダープレフィックス
*translateY : Y方向の距離での移動を指定 

box-shadow: 6px 0 25px rgba(0,0,0,.15)

要素に影をつけるように指定します。

メニュー画面（変更後）

メニューをカスタマイズすると、
Bloggerテーマ「ZELO」のメニューは、以下のように表示されます。

今回は、カスタマイズして、
メニューが上からではなく、左からスライド表示されるようにします。

1. メニューをタップします。

2. メニューが表示されます。メニュー外の半透明の黒カバーをタップするとメニューが閉じます。

3. メニューが閉じます。

メニューの変更

今回のカスタマイズでは、
メニューのスライド表示の方法とメニューの幅と高さを変更します。

まず、Blogger管理画面の左側のメニューで「テーマ」を選択して、「HTMLの編集」ボタンを押して、「.fix-nav 」と「#nav-input:checked ~ .fix-nav」の2つを変更します。

「.fix-nav 」は、以下の4箇所を変更します。

・width（100%→60%に変更）
・height（50%→100%に変更）
・-webkit-transform（Y→Xに変更）
・transform（Y→Xに変更）

「#nav-input:checked ~ .fix-nav」は、以下の2箇所を変更します。

・-webkit-transform（Y→Xに変更）
・transform（Y→Xに変更）

【変更後】

.fix-nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 60%;
height: 100%;
background: #fff;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
-webkit-overflow-scrolling: touch;
}

#nav-input:checked ~ .fix-nav {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

スポンサーリンク