はてなブログの3カラム化

tones 3x - テーマ ストア

テーマ ストア

追記:2019/02/22
３カラムのはてなテーマを作成してみました。当記事と同じ原理を使用しています。

3カラム化について

・公式テーマのReportを選択
・以下のCSSをデザインCSSに追加する

※右サイドバータイプのものなら、少しの改造で３カラム化が可能だと思われます。

/* 3カラム化 */
#container {
  width: 1080px;
}

#content {
  padding: 0;
}

#content-inner {
  position:relative;
}

#wrapper {
  margin-left: 190px;　/*左サイドバーのためのスペースをあける*/
  z-index: 100;
  position: relative;
}

#box2 {
  width: 1080px;
  position: absolute;
  left: 0;
  right: 0;
}
.hatena-module {
  width: 180px;
}

/*左右に振り分ける*/
/* はてなモジュール_奇数（左） */
.hatena-module:nth-child(2n + 1) {
  margin-left:10px;
  float: left;
  clear: left;
}

/* はてなモジュール_偶数（右） */
.hatena-module:nth-child(2n) {
  margin-right:10px;
  margin-left: auto;
}

上記を「デザイン」-＞「カスタマイズ」-＞「デザインCSS」に追記
このままだと、サイドバーの奇数番目は、左サイドバーに、偶数番目は右サイドバーに配置されます。

補足

/*左右に振り分ける*/
/* はてなモジュール（左） */
.hatena-module:nth-child(1),
.hatena-module:nth-child(2),
.hatena-module:nth-child(5){
  margin-left:10px;
  float: left;
  clear: left;
}
/* はてなモジュール（右） */
.hatena-module:nth-child(3),
.hatena-module:nth-child(4)  {
  margin-right:10px;
  margin-left: auto;
}

「/*左右に振り分ける*/」以下を上記のように書き換えると、上から1，2，5番目は左サイドバーに、3,4番目は右サイドバーに表示という風な感じになります。

/*横幅980px以上*/
@media screen and (min-width: 980px) {
    /* ここに3カラム化のCSSを */
}

レスポンシブデザインで、PCの時だけ3カラムとかの場合は、Media Queriesを使うとよいと思います。
はてなブログの場合は、480px以下がスマホ扱いだったと思います。

参考にした情報

デザインテーマ「Epic」で編集しました。「Epic」以外のテーマを使っている場合、自分で色々カスタマイズしている場合は、書いてあることだけではうまくいかないかもしれません。そこは各自調整をお願いします。
はてなブログでサイドバーを2つ（3カラム）にして、さらにモジュールを使えるようにした - アニテマ

上記を参考に作成しました。「Epic」だと日付部分のスペースが無駄な感じなので、「Report」にしてみました。

margin-left: 190px;　/*左サイドバーのためのスペースをあける*/

テクニックとしては、この部分と、あとは右サイドバーの一部を左サイドバーにnth-child()を使って振り分けているところだと思います。微妙な調整は必要ですが、CSSだけでできるので素晴らしいですね。

その他

はてなブログの HTML 構造は 2 カラムが前提になっているため 3 カラムにするには少しトリッキーな方法を使用します。話の肝としてはサイドバーに異常な HTML を挿入することで HTML 構造を変更すると言うものです。ここではこの方法について紹介します。
はてなブログを 3 カラムにする

上記は、サイドバーのウジェットを利用して、無理やりdiv要素をいれて、右サイドバーを２つに分断する方法だと思います。

さて、はてなブログを3カラムにするには、まずJavaScriptでdivエレメントを作ります。
次に、サイドメニューの内容を前述のdivエレメント内にコピーします。（innerHTML）
次に、片方ずつサイドメニューのidの中の各サイドメニューのclassから各サイドメニューのエレメントを取得します。
ケース19‐2：はてなブログを3カラムにしたい！◆星1つ＠山田の四則演算でわかるポイントサイト検証ブログ

jQueryを使う方法のようです。

・【CSS】はてなブログの3カラム化が難しい件 - 16bit!

３カラムが難しい理由ですね。まあ、CSSしか変更できないし、かつ３カラムにできるような構造になってなさそうという感じですかね。

事例

・No.23ふくろうさぎの知恵のカスタマイズ～更新中～ - ふくろうさぎの知恵
スタイルシートを見る限りでは、当記事の手法をつかっているみたい。

・デザインをいじってみた。 - ☆★専業かぁちゃん、おうちPCでお小遣い稼ぐぞー！ブログ★☆