テーマを編集するときは、バックアップを取ってから行ってください。→ バックアップの取り方
目次
ヘッダーのカスタマイズ
タイトルを一番上に表示する
ブログタイトルは一番上に表示したい！という謎のこだわりを実現するため、タイトルを表示するヘッダー部分とナビゲーション部分を入れ替えることにしました。
『HTMLを編集』から［Ctrl］＋［Ｆ］で検索ボックスを開き、「div
id='header'」を検索します。<div
id='header'>〜</div>（673～734行目）までを切り取り、<body>（642行目）と<div
id='navigation'>（643行目）の間に貼り付けます。これでヘッダーとナビゲーションバーの入れ替え成功です。
※行数は『QooQ
v2.00』初期状態のものです。
タイトルに画像をつけたいときは［レイアウト］＞［ヘッダー］にある「ページヘッダー」ガジェットから画像を挿入することができます。
プレビューでクリックを有効に
Bloggerのプレビュー画面は、マウスクリックがブロックされています。プレビューでも動作確認ができるようにクリックを有効にするCSSを追加しましょう。私は全体設定の項目に入れました。
/********************************
全体設定
*********************************/
/*プレビュー画面のブロック無効化*/
.blogger-clickTrap {
display: none;
}ナビゲーションのカスタマイズ
パソコンとスマホで異なるナビゲーション表示を導入しています。パソコンではドロップダウンメニュー、スマホでは開閉式ナビゲーションメニュー（以下ハンバーガーメニュー）になるようにカスタマイズしました。
パソコンから見てくださっている方はブラウザの横幅を狭くしてみてください。横幅が768px以下になると開閉式になります。
HTMLを書く（共通）
まずはドロップダウンメニューの根幹となるHTMLを作成します。「＃」を任意のURLに置き換えるとリンクにすることができます。以下のコードをQooQにある<div id='navigation'>〜</div>と置き換えます。
<div id='navigation'>
<div class='container' ontouchstart=''>
<label for='navigation-button' id='navigation-label'>=</label>
<input id='navigation-button' type='checkbox'/>
<div id='navigation-content'>
<ul class='navi_ul'>
<li class='navi_li'><a expr:href='data:blog.homepageUrl'>Home</a>
<ul class='drop_ul'>
<li class='drop_li'><a href='#'>Link_1</a></li>
<li class='drop_li'><a href='#'>Link_2</a></li>
</ul>
</li>
<li class='navi_li'><a href='#'>Title_1</a>
<ul class='drop_ul'>
<li class='drop_li'><a href='#'>Link_1</a></li>
<li class='drop_li'><a href='#'>Link_2</a></li>
</ul>
</li>
<li class='navi_li'><a href='#'>Title_2</a>
<ul class='drop_ul'>
<li class='drop_li'><a href='#'>Link_1</a></li>
<li class='drop_li'><a href='#'>Link_2</a></li>
</ul>
</li>
<li class='navi_li'><a href='#'>Title_3</a>
<ul class='drop_ul'>
<li class='drop_li'><a href='#'>Link_1</a></li>
<li class='drop_li'><a href='#'>Link_2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
スマホ用のCSSを書く
先にナビゲーションの共通設定（フォント等）とスマホ用のハンバーガーメニューを作っていきます。以下のコードをナビゲーションで検索し、全て置き換えてしましましょう。
/* 【共通設定】 */
#navigation{
font-family: 'Rubik', sans-serif;
font-size: 1.5rem;
background: #3995d2; /* 背景色 */
color: $(brand.subfont); /* 文字色 */
}
#navigation a{
color: inherit;
font-weight: bold; /* 太字にする */
}
/* クリック確認のCheckBoxを非表示 */
#navigation-button{
display: none;
}
/* 【スマホ用設定】 */
#navigation-label{
display: block;
padding: .2em 0 .2em 0;
text-align: left;
}
/* [閉]設定 */
#navigation-content{
height: 400px; /*☆は同じ値*/
max-height: 0;
overflow-y: hidden;
transition: .5s; /* 折りたたむ速さ */
}
/* [開]設定 */
#navigation-button:checked ~ #navigation-content{
max-height: 400px; /*☆*/
overflow-y: visible;
transition: .8s; /* 広がる速さ */
}
/* リスト表示の設定 */
.navi_li,
.drop_li{
list-style: none;
}
.navi_li a,
.drop_li a{
display: block;
width: 100%;
padding: .6rem 0 .6rem 2rem;
}
.drop_li a{
padding: .6rem 0 .6rem 4rem;
}パソコン用のCSSを書く
最後にパソコン用のドロップダウンメニューを作ります。パソコン用のドロップダウンメニューはブラウザの横幅が768px以上になると切り替わる仕様にしたいので、「@media ( min-width : 768px ) {}」という条件で囲みます。以下のコードをスマホ用コードの下に続けて貼り付けましょう。
/* 【パソコン用設定】 */
@media ( min-width : 768px ) {
#navigation-content{
height: 35px; /*★は同じ値*/
max-height: none;
overflow-y: visible;
transition: unset;
}
#navigation-label{
display: none;
}
.navi_ul{
display: flex; /* 横並びにする */
flex-wrap: wrap;
}
.navi_li{
list-style: none;
width: 25%; /* クリック域を４等分 */
height: 35px; /*★*/
position: relative;
}
.navi_li:hover {
background: #3995d2; /* 背景色 */
}
.navi_li a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
letter-spacing: 0.05em;
}
/* 階層設定 */
.drop_ul{
visibility: hidden;
z-index:2147483647;
opacity: 0;
transition: all .2s;
width: 100%;
position: absolute;
top: 36px; /*★+1*/
}
.navi_li:hover .drop_ul{
visibility: visible; /* ホバーで表示 */
opacity: 1;
}
.drop_li{
list-style: none;
background-color: #3995d2; /* 背景色 */
font-size: 1.5rem;
width: 100%;
height: 35px; /*★*/
transition: all .3s; /* 消える速さ */
position: relative;
}
.drop_li:not(:first-child)::before{
content: "";
width: 100%;
height: 1px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
}
.drop_li:hover{
background-color: #c8e2ef; /* カーソル色 */
}
.drop_li a{
display: flex;
justify-content: center;
align-items: center;
padding: 0 0 0 1rem;
color: #fff;
text-decoration: none;
position: relative;
}
/* ＞の表示 */
.drop_li a::before{
content: '';
display: block;
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
transform: rotate(135deg);
position: absolute;
right: 15px;
top: calc(50% - 5px);
}
}以上でナビゲーションのカスタマイズ終了です。
当ブログのスマホ表示のハンバーガーメニューは「=」をFont Awesomeというアイコンフォントを使って三本線（ハンバーガーボタン）にしています。
また、ハンバーガーボタンはハンバーガーメニューをおしゃれにするCSSスニペット9選。アイコンからすぐ実用できるサンプルまで | KodoCodeのようにいろんなタイプにすることができるので、オリジナルのナビゲーションメニューを作ってみてくださいね。
0 件のコメント:
コメントを投稿