追記:2019/02/22
3カラムのはてなテーマを作成してみました。当記事と同じ原理を使用しています。
3カラム化について
・公式テーマの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でお小遣い稼ぐぞー!ブログ★☆
コメントを残す