QooQ トップページのカスタマイズ【Blogger】
目 次[非表示]
基本となるテンプレート
評判も良くカスタマイズ情報の多い、QooQ（リスト版）を使わせていただきました。
QooQは使っている人が多いので、カスタマイズ情報も検索で多くヒットしてきます。試行錯誤した調整情報を記事にして公開して下さっている先輩方に感謝いたします。
ナビゲーションバーをタイトル下に移動・センタリング
デフォルトではタイトルの上にあるのですが、なんだか馴染めないので下に移動。
ごっそりHTMLコードの移動があるので必ずバックアップをとってから。目安として記載しているのは、QooQ-List版/ver.1.27利用での行数です。既にカスタマイズの途中・もしくはお使いのQooQのバージョン等で行数が違ってくると思いますので、目安程度でお願いします。
ナビゲーションをタイトルの下に
作業内容としては<div id='navigation'>…</div>部分を丸ごと<div id='header'>…</div>の下に移動します。
<div id='navigation'>は<body>直下、648行あたり。ここからナビゲーション部分の</div>まで677行あたり<div id='header'>のすぐ上までをコピー。
<body> <!-- ★この下から -->
<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:section>
</div>
</div>
</div> <!-- navigationの終わり★ここまでをコピー -->
<div id='header'>
上部コピー分を、切り取ったナビゲーション部分直下から始まる<div id='header'>…</div>（678～739行）の下にペーストします。ペーストしたすぐ下に<div class='width-100' id='main'>があればOK。
<div id='header'>
<b:section id='ヘッダー' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='QOoQ List (Header)' type='Header' version='1'>
<b:widget-settings>
<!-- ★中略★ -->
</b:widget>
</b:section>
</div> <!-- headerの終わり -->
<!-- ★この部分へどーんと<div id='navigation'>…</div>をペースト -->
<div class='width-100' id='main'> 各ブロック終わりの</div>がどこだかよく分からない場合は、HTML編集モードでブロック始まりの行数の横にある▼をクリックすると、終わりの</div>まで青い矢印マークが出て折りたたんでくれますので、それを目印にすると分かりやすいです。
一度クリックすると折りたたみもモードになり、もう一度クリックすると全コード表示モードになります。
センタリング
ブログタイトル・サブタイトルは「text-align: center;」でいけますが、下のナビの部分のセンタリングは以下のCSSを追加。
#navigation-content ul{
display: flex;
justify-content: center; /* 追加：センタリング */
flex-wrap: wrap;
「justify-content: center;」の1行を追加でセンタリング完了です。
ブログタイトルにGoogle Fontsを使いたい
ブログタイトルだけでいいから、ちょっと洒落たフォントを使ってみたい。という事で、Google Fonts を使ってみることに。有名どころなので設定に関しては、ネット検索でさっくり簡単～！かと思いきや、いくつかエラーが出ました。
対応策（一部のコードを削除する方法）もあるのですが、なによりGoogleフォントを使っていると、PageSpeedInsightsで「レンダリングを妨げるリソースの除外」と怒られるのですよね。
どうしたものかと思ったのですが、また別の方法が見つかりました。使う文字だけ呼び出してくる方法です。
Googleフォントをサブセット化してページの読み込みをスムーズに Webクリエイターボックス
<link href="https://fonts.googleapis.com/css2?family=Galada&display=swap&text=ブログタイトル" rel="stylesheet" />
このブログでは上記コードを組み込んでいます。Googleフォントで指示されたコードをそのまま入れようとするとエラーに、「&」のエスケープ処理と最後に「（半角スペース）/」（link終了タグ）を入れています。
TOPページのパンくずリストの削除 ※追記あり
TOPページ以外を読んでいる時はパンくずリストは必須だと思うけれど、TOPページにはいらないのでは？と削除。
追記：これやっちゃうとTOPページにエラーが発生するので修正しました。
8-stars.blogspot.com
その他
その他は記事をいくつか書いてみてからどんなふうに表示されるのか確認しながらの調整が必要なので、一旦これで初期設定終了。
なお、リスト型のサムネイル画像（オリジナルでは小さめの丸い画像）のカスタマイズについてはこちらで別途書いています。
8-stars.blogspot.com
8-stars.blogspot.com追記：現在はJetthemeを使用中
QooQからJetThemeへ、使用テンプレートを変更しました。
8-stars.blogspot.com
