QooQ ハンバーガー 風 アコーディオンメニュー
さあ、好みのデザインに調整してみましょ♪♪
まずは、カラーでしょう♪
こちらから、文字色、背景色をある程度？変更できます。
「ダッシュボード」の「レイアウト」上部の「テーマデザイナー」より。
「詳細設定」より、「文字の色」、「ブランドカラー」、「背景色」を選択。
ページをふんわり表示（フェードイン）、タイトル・見出しのカスタマイズ
この辺からは、好みが出るかもなぁ、「QooQ カスタマイズ」で検索ヒットしたページを
訪問させて頂いて、コレ好いなぁっと思ったら、参考に導入させて頂く感じだった。
こちらの達人に伝授戴いた。。🙏
Blogger テンプレート QooQ カスタマイズ 02
Google Fonts を導入、CSS でフェードインさせる、目次を自動生成、タイトルと見出しをカスタマイズ
ナビゲーションバーの調整、アイキャッチ画像付きリンク表示
こちらの達人に伝授戴いた。。🙏
Blogger 「QooQ」 カスタマイズ＊ヘッダー・ナビゲーションバー
Blogger 日本語テンプレート「QooQ」のカスタマイズ記事です。Blogger「QooQ」のヘッダーとナビゲーションバーをカスタマイズしてみました。おすすめ記事などのアイキャッチ画像付きリンクを表示する方法もあわせてご紹介します。
ハンバーガーメニュー、アコーディオンメニュー🍔
最新ハンバーガーメニューはこちらで、、、【2023年 2月24日 追記】
QooQ ハンバーガーメニュー開閉ボタンをオシャレに - Blogger メモ帳 月夜ニ君ノ音想フ♪
ハンバーガーメニュー開閉ボタンのカスタマイズ。ナビゲーションバーをヘッダーに統合。
lunablu37.blogspot.comとりあえずハンバーガーボタンにしてみたが、やっぱり日本語を入れてしまう。
サイトの特性上、アーティスト別のページに直接飛べるようにしたかったんですよ。
クリックすると、下記のように開く。
そして、選択した行のアーティストが表示され、選択できる。
でもって、、ＰＣ版でも同様の動きにしたい。。
こちらの実装に至るまでには、紆余曲折在り？かなり格闘しました。
こちらの達人に伝授戴いた。。🙏
detailsとsummaryタグでアコーディオンを作る - HTMLリファレンス
HTMLのdetailsタグとsummaryタグを合わせて使えば、簡単にアコーディオンを作ることができます。CSSの装飾サンプルやアニメーションのかけ方についても合わせて解説します。
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'>☰アーティスト別目次</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>【ア行・ヴ】</summary><a href='https://moon3756.blogspot.com/p/avril-lavigne-lyrics-japanese.html'>アヴリル・ラヴィーン</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#ア行'>その他 ア行・ヴ</a></details>
<details><summary>【カ・ガ行】</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#カ行'>その他 カ・ガ行</a></details>
<details><summary>【サ・ザ行】</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#サ行'>その他 サ・ザ行</a></details>
<details><summary>【タ・ダ・ナ行】</summary><a href='https://moon3756.blogspot.com/p/taylor-swift-lyrics-japanese-translation.html'>テイラー・スウィフト</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/norah-jones-lyrics-japanese-translation.html'>ノラ・ジョーンズ</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#タ行'>その他 タ・ダ・ナ行</a></details>
<details><summary>【ハ・バ・パ行】</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#ハ行'>その他 ハ・バ・パ行</a></details>
<details><summary>【マ・ヤ行】</summary><a href='https://moon3756.blogspot.com/p/michael-jackson-lyrics-japanese.html'>マイケル・ジャクソン</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#マ行'>その他 マ行・ヤ</a></details>
<details><summary>【ラ・ワ行】</summary><a href='https://moon3756.blogspot.com/p/led-zeppelin-lyrics-japanese-translation.html'>レッド・ツェッペリン</a><br/>…中略…<a href='https://moon3756.blogspot.com/p/rolling-stones-lyrics-japanese.html'>ローリング・ストーンズ</a><br/><a href='https://moon3756.blogspot.com/p/george-michael-lyrics-japanese.html'>ワム！</a><br/><a href='https://moon3756.blogspot.com/p/blog-page.html#ラ行'>その他 ラ行・ワ</a></details>
<a href='https://moon3756.blogspot.com/p/blog-page.html'>【全アーティスト別リンク】</a><br/><a href='https://moon3756.blogspot.com/p/soundtrack-screenmusic-lyrics-japanese.html'>【映画テーマ曲リンク】</a><br/><a href='https://moon3756.blogspot.com/p/lyrics-japanese-translation-label-search.html'>【ラベル一覧】</a><br/><a href='https://moon3756.blogspot.com/p/insta-page.html'>【写真で綴る洋楽和訳】</a><br/><a href='https://moon3756.blogspot.com/p/p.html'>【サイトマップ】</a>
</b:includable>
</b:widget>
</b:widget>
</b:section>
</div>
</div>
</div>
追記
ナビゲーションバーのカスタマイズは、かつてのプログラマ根性が燃えましたねぇ。
「QooQ」の前に使用していたテンプレート「MagOne」で実装してたので、
どうしても実装したかったんですねぇ。。（「MagOne」は少々重くなってしまったのよ）
そうなんです、テンプレートのカスタマイズって、どうも中毒性があって、ついつい、
あれもこれもやりたくなってしまって、本来の目的を見失いがちになってしまう。
今回のメンテナンス最大の使命は、『ブログの高速化』忘れちゃいけない！
そこに影響及ぼさないか否かが、、導入の最大の条件になるのです。
ちなみに、できるだけ「JavaScript」とか追加にならない方がいいのかなと。。
