シングルカラムにする為にするCSSカスタム：はてなブログ デザインカスタム

今回は、はてなブログのデザインを、シングルカラムにするための方法です。

ブログテーマ作成が、最近少し停滞していたので、ちょっと再開したいなーと思っていたところなのですが……

色々見たり考えたりしていたら、こんな思いが出始めました。

「シングルカラム、よくね？」

シングルカラムとは？

ブログの表示で、カラムが1つのモノを指します。

カラムってなに？というと、要は「列」ですね。

大概、1カラム(シングルカラム)、2カラム、3カラムのどれかになるんじゃないでしょうか？

構成のイメージとしてはこんな感じ。

なぜシングルカラム？

じゃあなんで「シングルカラムがいいな！」って思ったの？というと……

「読む人が記事に集中できるんじゃないか？」

と思ったからです。

現に色々なブログを見て、自分でもよく起こることなのですが、

記事を読んでる→サイドバーがちらつく→意識がそっちに集中する

ということが起こります。

自分のブログでも記事に集中できないのでは？
と、ふと考えたのです。

やりかたのキモ

個人的に色々カスタムはしたものの、最終的にわかったこと(やりかたのキモ部分)は

floatの設定をしないこと

でした。

どうやらfloatのleft/rightを設定することで、左右に固定するコンテンツを作成していたようです。

なのでコレを削除することで、構成的にはシングルカラムにすることができました。

なので、あとは各要素をキレイに見えるようにチューンアップしていくだけ……ということになります。

ぼくがやったこと

導入するかは検討段階ですが、「やりかたのキモ」を踏まえたうえで、チューンアップについて模索してみました。

このブログは、レスポンシブ*1に設定しているので、サイズ指定ごとに設定が必要となってきます。

設定としては、広いとき、中間のとき、狭いとき、の3パターンです。
このうち、設定するのは、広いときと中間のときの2つです。

広いときの設定

まずは広いときの設定です。

#main {
  width: 100%;
}
#box2 {
  font-size: 85%;
  line-height: 1.5;
  /* 追加・変更点 */
  width: 70%;
  margin: auto;
}
/* 追加 */
#box2-inner > div {
  display: inline-block;
  padding: 20px 25px;
  width: 85%;
}

ざっくりセレクタの説明をすると、

1. #main：メインコンテンツ(記事部分)
2. #box2：サイドバーにあたるところの塊
3. #box2-inner > div：サイドバーの表示項目1つ(プロフィールとか)

まず#mainではメインコンテンツの幅を100%に設定します。

で、#mainや#box2に、floatが設定されている場合は削除します。
これによって、左右に配置するように指定されているらしい。

また、marginやpaddingはお好みで設定を。

あとはbox2配下の設定ですね。

もともと2カラムにする為に、幅を狭く設定されているので、widthを70%など広めに取って幅を取ります。

またmarginをautoにすることで、サイズを勝手に馴染ませてもらいます。

ぼくの使っているデザインでは、「#box2-inner > div」がなかったので追加しました。

display: inline-block;で縦に並ぶように設定しています。

あとは表示がきれいになるように設定するだけです。

中間のときの設定

中間のときの設定です。

ぼくの場合は、「横幅が768px～1024pxのとき」を指します。

@media (min-width: 768px) and (max-width: 1024px) {
  #container {
    width: 100%
  }
  #main {
    width: 95%;
  }
  #box2 {
    margin: 10px 10px 0 0;
    /* 追加 */
    width: 100%;
  }
}

1番上の#containerは、元からこうでしたが、ブログ全体の幅です。

これが100%なのに対して、#main(メインコンテンツ)は、95%と少し小さい幅で設定。
ぼくの場合、もともとmarginなどが設定してあったので削除しました。

次に#box2(サイドバー)です。
これをまず幅100%に設定します。

そのうえでmarginを設定して、少し余白を取っています。

あとがき

「シングルカラムいいな」から始まったこの思考なのですが、正直まだちょっと悩んではいます。

この表示方法は、ユーザの見やすさと収益性が、微妙に相反するような気がするからです。

ある意味、雑念によってページを回遊したりすることで、PVが上がったり、広告を踏んだりする訳で……

そうなってくると究極、広告貼ってるのもどうなのよってことになるんですよね。

それ無くすのは運営上困るからできないんですけど……

悩ましいですね……

*1:画面サイズによって表示が変わるヤツ