トップページを2カラムに戻しました

2023/09/06
アイキャッチ

リモスキさんの真似です(笑)

当ブログは既に1カラム化はしていましたが、トップページ(記事一覧ページ)だけ2カラムに戻した形になります。

ファビコンリモスキ
サムネイル
ブログを1カラムに変更した理由と、変更した結果(直帰率・平均ページ滞在時間) | リモスキ
ブログのレイアウトを2カラムから1カラムに変更しました。この記事ではレイアウトの変更理由と、その結果直帰率がどうなったかなどを紹介したいと思います。
https://www.limosuki.com/2022/07/blog-columns-2to1.html
CONTENTS

変えた理由

うちの場合、ユーザーの回遊性とかは別に考慮していません(笑) 基本的に自分ファーストというスタンスですので、自分好みのレイアウトを追求したい。ただそれだけです!

トップページのメインカラムは別に中央になくてもいいですし、1カラムだと記事リストのサイズが無駄に大きくなるので、程よいサイズにして空いたスペースにサイドバーを置けばバランスよくなるのではないかと。サイドバー無しでリストを2列にするという手もありますが、それだと幅が狭くなり過ぎるし。かと言ってカード型には変えたくない。という訳でリスト型のメイン+サイドバーというレイアウトが自分的には一番しっくりきます。

当ブログの2カラムについて

スマホでだけご覧になってる方や、個別ページしか見ない方には1カラムのままなので、前とほぼ変化ないように見えてると思います。

リモスキさんのとこと違って、ウィジェット類は1カラムも2カラムも共通で、サイドバーとフッターを行ったり来たりする仕様になっています。

2カラムのトップページと1カラムの個別ページ

今あるウィジェット以外に特に置きたいものはなかったので、サイドバーとフッターで使い回ししてみたというわけです(笑)

PC での3列表示時のフッターウィジェットの並びが前と変わってて(前はプロフがあるウィジェットブロックが一番左だった)、CSS の order で並べ替えることも可能ですけど、今の並びでも別に気にならなかったのでそのままにしてます。

ちなみにカスタマイズに関して、HTML はフッターセクションの id や class 名を変えたぐらいでほぼ弄ってなくて、CSS の変更だけで実現しています。

1カラム時のフッターにはこれ以上何も置きたくないけど、2カラムの時のサイドバーにはあと幾つか他のウィジェットを追加してもいいかなとは考えてます。お知らせ用のテキストウィジェットとか、注目の投稿とか。

QooQ で個別ページを1カラム化

うちのようにサイドバーを取っ払った1カラムの状態からウィジェットを使い回す2カラムにするのではなく、サイドバーもフッターも残したままの状態で、個別ページだけをサイドバー非表示の1カラム(リモスキさんと同じスタイル)にする手順をこの記事に追記しましたので、宜しければご参考にどうぞ。
1カラムレイアウトにしてみた (1カラム化手順を追記しました)