Warning: Undefined array key "description" in /home/log/z0i.net/public_html/blog.z0i.net/wp-content/plugins/gogo-packs-wp2020/addon/shcode/gogo-shcode-blogcard.php on line 175
はてなブログの3カラム化 – ブログ運営のためのブログカスタマイズ

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

  • 投稿 : 2017-01-24
  • 更新 : 2019-02-22

テーマ ストア

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

3カラム化について

hatena-3column01.jpg

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

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

/* 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要素をいれて、右サイドバーを2つに分断する方法だと思います。

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

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

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

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

事例

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

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

スポンサーリンク