3年振りに、このブログのレイアウト・デザインを変更しました。

主な変更は以下の3つです。

1. 1カラムから2カラムへ
2. カテゴリー・タグの一覧を表示
3. モバイルレイアウトのメニューをフッターからヘッダーへ

その他にも、わかりやすく見える部分としてペジネーションを導入したりしていますが、今回の大きな変更は見えない構造的な部分です。

このブログはHugoを用いて構築していますが、レイアウトの構造で重複している部分があってずっとモヤモヤしていたため、Hugoやその元となるプログラミング言語・Go言語を用いてモジュール化したのが大きな部分です。

関連：ブログ・サイトの管理をWordPressからHugoに移行したら爆速で快適

1カラムから2カラムに戻した理由

ブログの一般的なレイアウトは、今回のように2カラムです。

元々このブログも2カラムでしたが、2019年当時はモバイルファーストの考え方が流行していました。今もモバイルファーストの方が主流かもですが 😅

スマホで見られることが多いなら、結局1カラムになります。それならデスクトップ画面でも1カラムにしておけば、レイアウトの作成は簡単ですし、モバイル・デスクトップ画面を1カラムで統一しておこう、というのが2019年当時の判断でした。

ただ、その後もAnalyticsで読者の動向を確認し続けていましたが、このブログの読者は、圧倒的にPC・デスクトップで見ています。

よく考えたら当然です。

このブログが主に扱っているのは企業の人事労務、となると、企業の人が平日に利用してこのブログを見るのはスマホではなくPC、そりゃそうですね。

カテゴリー・タグの一覧を表示

カテゴリー・タグの一覧表示について、あまりこだわりはありませんでした。

あれば、色々な記事を見てもらえるというメリットはありますが、1カラムにしていたため、置き場所は、記事の下になります。

今回2カラムに戻しましたが、スマホで見る場合は結局、記事の下になります。

ただ、デスクトップ画面では、2カラムに戻したことにより、右側に空白ができます。

「何を置くのがベストだろうか」と考えましたが、やはり一般的なカテゴリー・タグの一覧を表示することにしました。

ちなみに、これまでの記事のカテゴリー・タグがとっちらかっていたのを、今回大々的に整理したのは内緒の話🤫🤫🤫

関連：［Hugo］カテゴリー・タグ名を小文字の自動変換なく設定どおりに表示する方法

モバイルレイアウトのメニューをフッターからヘッダーへ

これは正直悩みましたし、何が正解なのかもわかりません。

私はスマホを左手で持ち、右手を使わず左手だけで操作するのが好みなので、メニューは下にあるべきと考えてきました。

しかし、今までのレイアウトの場合、メニューを増やすとボタンを押しにくくなります。そして、なによりこのブログの読者の圧倒的多数はPC・デスクトップで見ている・・・そのため、これまた一般的なデザインですが、ヘッダーにメニューを置くことにしました。

ちなみに、メニューボタンを押して上からメニューの一覧が出てくる仕掛けは、JavaScript（jQueryでなくピュアなJSで）を利用しています。

まとめ

今回のブログレイアウト・デザインの大幅変更に伴い、改めて進化したHTML、CSS、JavaScriptを学び直すことになりましたし、バージョンアップしているHugoの便利さを実感できました。

今後は細かなチューニングになりますが、このブログ読者にとって見やすく、作り手である私にとっても効率的に継続できるサイトづくりをしていきます。

しかし、ほんとブログって楽しいですね！