ホーム » QooQ »

[QooQ] スマートフォンのときのヘッダーとナビゲーションのデザインを変更してみました

2022年02月13日更新

2020年11月05日公開

当サイトはアフィリエイト広告を使用しています

Blogger QooQ

これを

こうする

2020年11月6日：[設定] - 基本 - 説明のところに文章などがある場合、レイアウトに不具合がでることがわかったのでコードを修正しました。

デフォルトのデザインもシンプルで好みなのですが、ボタンがもう少し押しやすい位置にあったほうがいいかなと思って変えてみました。ボタンのアイコン以外は既存のコードを流用しただけです。コードの量が多く感じられるかもしれませんが、ほぼ既存のコードの切り取りと貼り付けで作りました。ヘッダーwidgetにこだわらなければ自由度が高く設計できると思いますが、とりあえず形になりました。カスタマイズのベースはQooQ list版 v1.28ですが、ほかのバージョンでも大きな違いはないと思います。記事内の「~行目あたり」はテンプレートがデフォルトの場合の行番号です。HTMLを編集します。必ずバックアップを取ってから作業してください。事前に準備しておくものタップするための記号（マーク）が必要になります。今回は一例としてSVGアイコンを使っていますが、テキストや画像でもいいと思います。SVGアイコンはAn open-source free library of 1000+ icons | EmblemiconsのList | Emblemiconsを使用しました。 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 7H18V9H6V7Z" fill="black"/> <path d="M6 11H18V13H6V11Z" fill="black"/> <path d="M18 15H6V17H18V15Z" fill="black"/> </svg>MITライセンスということなのでライセンスについても記述してあります。多分大丈夫だと思いますが各自確認してください。参考サイト

MITライセンスってなに？どうやって使うの？商用でも無料で使えるの？ - WisdomMingle.com（ウィズダムミングル・ドットコム）

全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons | コリス

SVGアイコン以外の記号（マーク）

☰

メニュー - ☰

wikipedia-八卦-符号位置

【みんなの知識ちょっと便利帳】使いたいときの HTML特殊文字 & 機種依存文字 - マーク・記号など

大まかな手順

ナビゲーションの「ページ」ガジェットのコードを切り取って移動させる。

移動させたコードの一部をヘッダーに移動。

記号（マーク）をSVGアイコンに置き換え。

CSSで位置の調整など

「ページ」ガジェットを移動「ページ」ガジェットを移動させてこの状態にします。

「ページ」ガジェットの具体的なコードは<body>の下、647行目あたりの<div id='navigation'>から<div id='header'>の上の</div>までです。切り取って移動させる該当コード（例）<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'> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'> <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li> <b:else/> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:if> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section> </div> </div> </div>

これを740行目あたりの<div class='width-100' id='main'>の上に移動させます。

移動するとこうなります。

ヘッダーにボタンを設置まずこの状態にします（位置などはあとでCSSで調整）

まずはじめに、移動させた該当コードの上から3行目の<label for='navigation-button' id='navigation-label'>=</label>を切り取り。

次にデフォルトだと713行目あたりにある<b:include name='header-title'/>を下記コードに置き換え※<b:include name='header-title'/>は2か所あるので上から2番目の方<div class='header-nav-button'> <label for='navigation-button' id='navigation-label'>=</label> <b:include name='header-title'/> </div>これを

これに置き換える

置き換えるとこのようになります。

次に、=記号をSVGアイコンのコードに置き換えます置き換えたもの<div class='header-nav-button'> <label for='navigation-button' id='navigation-label'>  <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'> <path d='M6 7H18V9H6V7Z' fill='black'/> <path d='M6 11H18V13H6V11Z' fill='black'/> <path d='M18 15H6V17H18V15Z' fill='black'/> </svg> </label> <b:include name='header-title'/> </div>

SVGアイコンのコードに置き換えるとこうなります。

CSSCSSで位置などを調整します。基本的にスマートフォンのとき用なので@media (max-width: 768px)を付けました。はじめに横並びにする

@media (max-width: 768px) { .header-nav-button { display: flex; /* 横並び */ } }次に中央に揃える

@media (max-width: 768px) { .header-nav-button { display: flex; /* 横並び */ justify-content: center; /* 中央に揃える */ } }ボタンを左側に移動させる

@media (max-width: 768px) { .header-nav-button { display: flex; /* 横並び */ justify-content: center; /* 中央に揃える */ position: relative; /* ボタンを左側に移動 */ } #navigation-label { display: block; /* text-align: center; */ position: absolute; /* ボタンを左側に移動 */ left: 0; /* ボタンを左側に移動 */ } }参考サイト同じ行に中央寄せと右寄せを混在させたい…！(CSS) - Qiitaボタンの大きさや色を変更SVGタグに直接書かずCSSセクションで大きさや色が変更できるようにしました。SVGアイコンのコードを書き換えます。width,height,fill属性と属性値を削除、class属性と属性値を追加。（class='svg-header-nav-button'）<svg class='svg-header-nav-button' viewBox="0 0 24 24" mlns="http://www.w3.org/2000/svg"> <path d="M6 7H18V9H6V7Z"/> <path d="M6 11H18V13H6V11Z"/> <path d="M18 15H6V17H18V15Z"/> </svg>大きさと色を変更

.svg-header-nav-button { width: 36px; /* 大きさ */ height:36px; /* 大きさ */ fill: #512232; /* 色 */ }スマートフォンのときはブログのタイトルも大きく

@media (max-width: 768px) { #header-title { font-size: 150%; } }ブログの説明文がある場合、説明文も中央に揃える

@media (max-width: 768px) { #header-text { text-align: center; } }最後に表示できる要素がないとタップしても展開しないので、ナビゲーションの「ページ」ガジェット [編集]で表示するページにチェックを入れたり外部リンクを追加しておきます。