QooQ ハンバーガー風アコーディオンメニュー

2023年01月01日 2023年03月11日

さあ、好みのデザインに調整してみましょ♪♪

まずは、カラーでしょう♪

こちらから、文字色、背景色をある程度？変更できます。

「ダッシュボード」の「レイアウト」上部の「テーマデザイナー」より。

「詳細設定」より、「文字の色」、「ブランドカラー」、「背景色」を選択。

ページをふんわり表示（フェードイン）、タイトル・見出しのカスタマイズ

　この辺からは、好みが出るかもなぁ、「QooQ カスタマイズ」で検索ヒットしたページを

　訪問させて頂いて、コレ好いなぁっと思ったら、参考に導入させて頂く感じだった。

こちらの達人に伝授戴いた。。🙏

ナビゲーションバーの調整、アイキャッチ画像付きリンク表示

こちらの達人に伝授戴いた。。🙏

ハンバーガーメニュー、アコーディオンメニュー🍔

最新ハンバーガーメニューはこちらで、、、【2023年 2月24日　追記】

QooQ ハンバーガーメニュー開閉ボタンをオシャレに - Blogger メモ帳月夜ニ君ノ音想フ♪

とりあえずハンバーガーボタンにしてみたが、やっぱり日本語を入れてしまう。

サイトの特性上、アーティスト別のページに直接飛べるようにしたかったんですよ。

クリックすると、下記のように開く。

そして、選択した行のアーティストが表示され、選択できる。

でもって、、ＰＣ版でも同様の動きにしたい。。

こちらの実装に至るまでには、紆余曲折在り？かなり格闘しました。

こちらの達人に伝授戴いた。。🙏

detailsとsummaryタグでアコーディオンを作る - HTMLリファレンス

PCでも同様の動きにするため、「@media ( max-width : 768px ) 」を削除。

＜Before＞

@media ( max-width : 768px ) {
	#navigation-label{
		display: block;
		text-align: center;
	}
	#navigation-content{
		display:none;
	}
	#navigation-button:checked ~ #navigation-content{
		display: block;
	}

＜After＞

	#navigation-label{
		display: block;
		text-align: center;
	}
	#navigation-content{
		display:none;
	}
	#navigation-button:checked ~ #navigation-content{
		display: block;

アコーディオン用に、こちらを追記。

summary {
  color: $(brand.font);
  cursor: pointer;
  transition: 0.2s; /* 変化を滑らかに */
  font-weight: bold;
}
/* ホバー時のスタイル */
summary:hover {
  cursor: pointer; /* カーソルを指マークに */
  background-color: $(brand.color);
}

【2023年2月18日　アーティストリンク選択時のスタイルを追加しました】

details a:hover {
  cursor: pointer; /* カーソルを指マークに */
  background-color: $(brand.color);
}

実装は「navigation」の＜b:includable id='main'＞に、detailsタグとsummaryタグで直書きしました。

 <div id='navigation'>
   <div class='container'>
    <label for='navigation-button' id='navigation-label'>&#9776;アーティスト別目次</label>
    <input id='navigation-button' type='checkbox'/>
    <div id='navigation-content'>
	<b:section id='ナビゲーション' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='true' title='ページ' type='PageList' version='1'>
  <b:widget-settings>
    <b:widget-setting name='pageListJson'>{}</b:widget-setting>
    <b:widget-setting name='homeTitle'>ホーム</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
<details><summary>&#12304;ア行&#12539;ヴ&#12305;</summary><a href='https://moon3756.blogspot.com/p/avril-lavigne-lyrics-japanese.html'>アヴリル&#12539;ラヴィーン</a><br/><a href='https://moon3756.blogspot.com/p/adele-lyrics-japanese-translation.html'>アデル</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/oasis-lyrics-japanese-translation.html'>オアシス</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#ア行'>その他 ア行&#12539;ヴ</a></details>
<details><summary>&#12304;カ&#12539;ガ行&#12305;</summary><a href='https://moon3756.blogspot.com/p/cardigans-lyrics-japanese-translation.html'>カーディガンズ</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/coldplay-lyrics-japanese-translation.html'>コールドプレイ</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#カ行'>その他 カ&#12539;ガ行</a></details>
<details><summary>&#12304;サ&#12539;ザ行&#12305;</summary><a href='https://moon3756.blogspot.com/p/sia-lyrics-japanese-translation.html'>シーア</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/police-sting-lyrics-japanese-translation.html'>スティング</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#サ行'>その他 サ&#12539;ザ行</a></details>
<details><summary>&#12304;タ&#12539;ダ&#12539;ナ行&#12305;</summary><a href='https://moon3756.blogspot.com/p/taylor-swift-lyrics-japanese-translation.html'>テイラー&#12539;スウィフト</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/norah-jones-lyrics-japanese-translation.html'>ノラ&#12539;ジョーンズ</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#タ行'>その他 タ&#12539;ダ&#12539;ナ行</a></details>
<details><summary>&#12304;ハ&#12539;バ&#12539;パ行&#12305;</summary><a href='https://moon3756.blogspot.com/p/heart-band-lyrics-japanese-translation.html'>ハート</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/police-sting-lyrics-japanese-translation.html'>ポリス</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#ハ行'>その他 ハ&#12539;バ&#12539;パ行</a></details>
<details><summary>&#12304;マ&#12539;ヤ行&#12305;</summary><a href='https://moon3756.blogspot.com/p/michael-jackson-lyrics-japanese.html'>マイケル&#12539;ジャクソン</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/u2-lyrics-japanese-translation.html'>Ｕ２</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#マ行'>その他 マ行&#12539;ヤ</a></details>
<details><summary>&#12304;ラ&#12539;ワ行&#12305;</summary><a href='https://moon3756.blogspot.com/p/led-zeppelin-lyrics-japanese-translation.html'>レッド&#12539;ツェッペリン</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/rolling-stones-lyrics-japanese.html'>ローリング&#12539;ストーンズ</a><br/><a href='https://moon3756.blogspot.com/p/george-michael-lyrics-japanese.html'>ワム&#65281;</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#ラ行'>その他 ラ行&#12539;ワ</a></details>
<a href='https://moon3756.blogspot.com/p/blog-page.html'>&#12304;全アーティスト別リンク&#12305;</a><br/><a href='https://moon3756.blogspot.com/p/soundtrack-screenmusic-lyrics-japanese.html'>&#12304;映画テーマ曲リンク&#12305;</a><br/><a href='https://moon3756.blogspot.com/p/lyrics-japanese-translation-label-search.html'>&#12304;ラベル一覧&#12305;</a><br/><a href='https://moon3756.blogspot.com/p/insta-page.html'>&#12304;写真で綴る洋楽和訳&#12305;</a><br/><a href='https://moon3756.blogspot.com/p/p.html'>&#12304;サイトマップ&#12305;</a>
  </b:includable>
</b:widget>
</b:widget>
</b:section>
    </div>
  </div>
 </div>

追記

ナビゲーションバーのカスタマイズは、かつてのプログラマ根性が燃えましたねぇ。

「QooQ」の前に使用していたテンプレート「MagOne」で実装してたので、

どうしても実装したかったんですねぇ。。（「MagOne」は少々重くなってしまったのよ）

そうなんです、テンプレートのカスタマイズって、どうも中毒性があって、ついつい、

あれもこれもやりたくなってしまって、本来の目的を見失いがちになってしまう。

今回のメンテナンス最大の使命は、『ブログの高速化』忘れちゃいけない！

そこに影響及ぼさないか否かが、、導入の最大の条件になるのです。

ちなみに、できるだけ「JavaScript」とか追加にならない方がいいのかなと。。

Blogger