はてなブログを1カラムに！カスタマイズの参考にしたページのまとめ

　物は試しに、ブログを1カラムレイアウトにしてみました。その際にいろいろなサイトを参考にさせていただいたので、ざっくりとまとめておこうと思います。

 

　

1カラムってどうなの？

　1カラムにしようと決めた理由はいくつかありますが、やっぱり「普段から読んでいるブログの多くが1カラムに移行しつつある」というのは大きかったかなーと。

• 趣味全開で淡々と
• ウォーキングと美味しいもの
• R-style
• monograph
• DRESS CODE.

　たとえば、こちらのような。写真メインでも文章メインでも関係なく、個人ブログでもシンプルなレイアウトを採用するサイトが増えつつあるように見えます。

　また一方では、『note』や『Medium』といった、シンプルなプラットフォームの存在も。情報量の多いニュースサイトや企業のホームページとは異なり、視覚的にすっきりした印象を受けますよね。

　　そして何より、今も昔もシンプルで読みやすく、長年にわたって個人のゆるふわ日記が投稿され続けている、『はてな匿名ダイアリー』なんてサイトもありますしね！ ヒャッハー！

「これ、詐欺じゃね？」と感じた案件と、確信に至るまでの過程と、打ち合わせ時の自衛策｜けいろー｜note

　でも、なぜ1カラムレイアウトが増えているのか……と考えてみると、これという理由はあるのかしら。単純に流行なのか、レスポンシブデザインが普及したためか、はたまたスマホによるブラウジングが当然になったことで、スクリーンサイズに関係なく「縦」の視線移動が中心になったためか──。

　まあ詳しい分析は専門家に任せるとして、素人目に見ても1カラムのサイトが増えている実感があったため、「じゃあワシもワシも」と便乗しようと考えたわけです。

　　というかぶっちゃけ、それまでもサイドバーが機能している印象があまりなかったので、良い機会かと思いまして。それこそ、情報量の多いニュースサイトならいざ知らず、そのへんのブロガーが「こっちもいかが？」とサイドバーに関連記事やおすすめ商品を詰めこんだところで、見るのは自分と同じ「ブロガー」くらいな気もする*1。

 

サイドバーに載せていた情報をどうするか

　さて、実際にレイアウトを変更するにあたってまず考えたのが、それまでサイドバーに載せていた情報の扱いについて。プロフィールとか、カテゴリーとか、月別アーカイブとか、人気記事とか、広告とか。それらのコンテンツを、どこへ移動させようか、と。

　あれこれと考えたうえで至った結論は、「最低限のプロフィールさえあれば、ほかはいらないのでは？」というものでした。

　フッタ部分にそのまま並べることはできるけれど、そんなに下のほうまでスクロールして見る人がいるかは、正直に言って怪しい。それならば、これだけは外せない「プロフィール」だけを記事下に挿入しつつ、フッタは最小限に抑えても問題ないんじゃなかろうか──と。

　その結果が、これ。

　「抑える」と言いつつ、まったくもって自重できていないのがアレですが、関連記事だなんだとごちゃごちゃしていた──というかよく考えたらプロフィールが重複していた──2カラムレイアウトのサイドバーと比べれば、割とすっきりしたほうだと思う。

　一応は書評ブログっぽい雰囲気を出すための「おすすめ（ピックアップ）本」と、これは必要だろうという「サイト内検索」、割と読まれている「単体記事へのリンク（都度変更予定）」に、それとなくブログのカラーを出すための「各種カテゴリーへの画像リンク」。

　カテゴリーリンクはヘッダにもあるので不要にも感じたけれど、まあとりあえず入れておこうかなと。……というか単純に、なんとなく画像を作っていたら楽しくなってきちゃったので、自己満足で挿入した感じ。画面を見ていて、うるさく感じられるようになったら削除しようかな。

　記事下の「簡易プロフィール（運営者情報）」は、こんなんできました。

　自分はデザインやCSSの知識が（あまり）ないので、骨子となるコードは、下でまとめているカスタマイズ記事を参考にさせていただきました。そのうえで、SNSボタンと細部をちょろっと調整した感じ。コピペでそれっぽい形になるのは、本当にありがたいのじゃ……。

　で、紹介する順番が逆だった気もしますが、テーマは『Material』をお借りしております。シンプル！ 1カラム！ レスポンシブ対応！ の3拍子がそろった素敵デザイン。

　基本的には素の状態で使わせていただいておりますが、トップページはカード型のレイアウトに変更。また、長文記事がメインのこのブログでは、デフォルトのフォントの色が薄く読みづらく感じられたので、見出しと合わせて調整しています。

　というわけで、以下、参考にさせていただいたページをまとめさせていただきました。お世話になりました──もとい、いつもお世話になっております。ありがとうございます。

 

カスタマイズにあたって参考にさせていただいたページ

トップページのレイアウトをカード型にする

ヘッダにグローバルメニューを設置する

各種SNSのフォローボタンを設置する

マテリアルデザイン風のソーシャルボタンを設置する

記事下にプロフィール欄を設ける

見出しデザイン

引用デザイン

ボタンデザイン

ボックスデザイン

囲み枠の黒板風デザイン

目次デザイン

ヨメレバ・カエレバのカスタマイズ

画像の上に文字列を表示する

その他お世話になったページ

• 画像編集：Canva
• 色の調整：PEKO STEP

一部参考にした本

だれでもレイアウトデザインができる本増補改訂版

posted with ヨメレバ

樋口泰行 エクスナレッジ 2012年11月

Amazon

楽天ブックス

 

 

関連記事

• ブログのデザインまわりをヌルっと調整した
• わかりやすい文章・伝わりやすい文章、何が大切？
• 「自分らしい文章」はどこにある？

*1:と思って検索してみたところ、やはりそのような指摘がありました（参考：おすすめ！1カラムのおしゃれなはてなブログテーマまとめ - Hatena Blog Theme Custom　／　いい加減、ブログにサイドバーはいらないのでは？というご提案 – やわなべ.net）