「Blogger」QooQテンプレートをカスタマイズしてみた

Bloggerで使用しているテンプレートをQooQに変更してから、少し時間が経過し、2カラムトサイドメニューのデザインから、3カラムのデザインに変更してみました。

始めから3カラムのテンプレートを使えば良いとも思いましたが、結構気に入ってしまったので、カスタマイズすることにしました。

別の記事で、テンプレート「QooQ」を導入した記事を投稿していますので、そちらも良かったら、参考に見てください。

ヘッダーとナビゲーションを入れ替え

元のデザインは、ヘッダーが２番目で、ナビゲーションが１番目のデザインでしたが、HTMLの編集で位置を入れ替えました。

最初の状態では「検索」と「翻訳」は、サイドメニューに表示されていたのですが、強引にヘッダーへ移動させました。

ヘッダー部分に「検索」と「翻訳」を配置したかったのですが、メニュー（ページ）が展開される仕様のため、レイアウト崩れを防ぎたい面もありまして、レイアウトの順番を変更しました。

管理画面のテーマで「HTMLの編集」から、「ナビゲーション」と「ヘッダー」の配置を入れ替えることで、下の画像のように、配置を変更することが出来ました。

これで、配置は変更できましたが、ここからとても苦労しまして、「ブログタイトル」は左端にレイアウトし、「検索」と「翻訳」を右端にレイアウトしようと、苦労しながらも、CSSを調整しました。

レスポンシブ・デザインと言うこともあり、PCではそれなりのレイアウトになっているかと思うのですが、スマホでは少々収まりの悪い感じになっており、少し時間を置いたら、また調整する予定です。

このままでも良いかなぁ。（疲れたｗ）

トップページに表示される投稿記事は、元は2カラムで、サイドメニューが表示されるものでしたが、3カラムに変更しました。

少々苦労しましたが、テンプレートでは、「記事表示部分」と「サイドバー」が「display: flex;」が使用されており、「flex-direction: column;」に変更することで「サイドバー」を「記事表示部分」の横から下へ移動させることができました。

さらに、3カラムに変更するため、「#main-content」の横幅を変更しました。

これだけでは、3カラムにするには足りないため、「.list-item」の「flex-basis」を変更しました。

2つのスタイルシートを変更することで、3カラムに変更することが出来ました。

結果的には、より多くの投稿記事が見られるようになったので、満足しています。

管理画面のレイアウトで、サイドバーは枠として残し、サイドバーにあった「人気の投稿記事」や「ラベル」などはフッターヘ移動することにしました。

移動自体は「レイアウト」ページで、簡単にできるので問題ありませんでしたが、フッター背景色を変更したかったので、「#footer」の背景色を変更しました。

Adsenseの下部アンカー広告が原因なのか。フッター下部の背景が白く抜けてしまうので、上の画像では少しグレーの色で設定していますが、最終的に背景色すべて「#ffffff」（白）に変更しました。

フッターについては、できるだけ多くの投稿記事をPC画面では見れるようにしたいので、手間が掛かるので、少しずつ各ラベルごとの記事をピックアップしたものをフッターに追加していく予定です。