アニテマ

アニメ・新潟・鉄道の事などを書いていくブログ

お知らせ など

ブログを移転しました。(2016-08-01)

はてなブログでサイドバーを2つ(3カラム)にして、さらにモジュールを使えるようにした

前の記事で、はてなブログで3カラムにする方法を書きましたが、その方法ではサイドバーのモジュールが使えませんでした。
なので、今回はそれとは別の方法で、且つモジュールを使えるようにしたので書いておきます。

 

!注意点!

  • HTMLやCSSの知識が無いと、内容が理解できないかもしれません(コピペするだけでも使えるようにはしてます)。
  • デザインテーマ「Epic」で編集しました「Epic」以外のテーマを使っている場合、自分で色々カスタマイズしている場合は、書いてあることだけではうまくいかないかもしれません。そこは各自調整をお願いします。
  • この方法でははてなモジュールを使えますが、モジュールの間が広く開いてしまう場合があります。(このブログみたいに)実際に使うときはご注意ください。無駄に開く問題は解決しました。記事の最後に対策を追記してあります。
  • 3カラム化に最低限必要なことしか書いていません。



はてなブログではHTMLの基本構造は変えられないので、CSSを中心にカスタマイズする必要があります。
なので、デザイン設定の「デザインCSS」というところにいろいろ書き込むとカスタマイズ可能です。
また、3カラムのデザインを2種類用意しました。両方ともサイドバーが両脇にあるものですが、背景がサイドバーにかぶってるものとそうでないものです。順を追って書きます。


まず、単に3カラムにするためのソースです。
ソースを書いた後に説明をします。

#container {
  width: 1080px;
}

#content {
  padding: 0;
}

#content-inner {
  position:relative;
}

#wrapper {
  margin-left: 180px;
  z-index: 100;
  position: relative;
}

#box2 {
  width: 1080px;
  position: absolute;
  left: 0;
  right: 0;
}

/* はてなモジュール_奇数(左) */
.hatena-module:nth-child(2n + 1) {
  float: left;
  clear: left;
}

/* はてなモジュール_偶数(右) */
.hatena-module:nth-child(2n) {
  float: right;
  clear: right;
}

.hatena-module {
  width: 180px;
}

これが3カラムにするためのソースです。
これをデザイン設定の「デザインCSS」のところに書き加えてください。
これは背景が記事部分と同じ色のタイプです。


デフォルトではサイドバーと記事部分の背景は同じ色なのでそのまま左側にもサイドバーを追加したような感じです。


また、はてなモジュールの奇数番目は左側に、偶数番目は右側に来るようになってます。
モジュールの順番はデザイン設定で変更できます。
参考までにこれを使ったブログのキャプチャ画像を貼っておきます。

f:id:y129:20160729175531j:plain




次に、もう1種類の3カラムデザインを書いておきます。

#container {
  width: 730px;
}

#content {
  padding: 0;
  width: 720px;
}

#content-inner {
  position:relative;
  margin-left: -185px;
}

#wrapper {
  margin-left: 190px;
  margin-right: 0;
  z-index: 100;
  position: relative;
}

#box2 {
  width: 1100px;
  position: absolute;
  left: 0;
  right: 0;
}

/* はてなモジュール_奇数(左) */
.hatena-module:nth-child(2n + 1) {
  float: left;
  clear: left;
}

/* はてなモジュール_偶数(右) */
.hatena-module:nth-child(2n) {
  float: right;
  clear: right;
}

.hatena-module {
  width: 180px;
}

このタイプはさっきのとほぼ同じですが、サイドバーが記事部分の外側に付いている感じになっています。
下の画像を見ればわかりやすいですが、サイドバーが外側に来ています。

f:id:y129:20160729175532j:plain




いかがでしたでしょうか。この方法ならモジュールを普通に使うことができ、かつ3カラムにも出来ます。
また、ここに書いたのは必要最低限のものだけなので、自分の好きなようにカスタマイズすることができます。


そして、モジュールを奇数・偶数で左右に振り分ける技ですが、奇数・偶数だけじゃなく、自分の好きな順番で振り分けることが出来ます。詳しくは「nth-child」でググるか、下のようなサイトを見てください。僕には説明が難しいです(^_^;)
CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い|Webpark


<追記>
上記のはサイドバーが両端に付いているタイプでしたが、サイドバー2列を左や右に寄せたタイプも作りました。↓
このまま使うと、サイドバー2列が右側にまとまって表示されます。

body {
  width: 1090px;
  margin: 0 auto;
}

#container {
  width: 1080px;
 /* 
  サイドバーを外に
  width: 720px;
  margin-left: 360px; 
 */
 /* 
  サイドバーを左よせ
  margin-left: 0px; 
 */
}

#content {
  padding: 0;
}

#content-inner {
  position:relative;
}

#wrapper {
  width: 560px;
  margin-left: 170px;
  position: relative;
 /* 
  サイドバーを外に
  margin-left: 180px; 
 */
 /* 
  サイドバーを左よせ
  margin-left: 540px; 
 */
}

#box2 {
  width: 370px;
  position: absolute;
  right: 0;
 /* 
  サイドバーを外に
  margin-left: -360px;
 */
 /* 
  サイドバーを左よせ
  left: 0; 
 */
}

/* はてなモジュール_奇数(左) */
.hatena-module:nth-child(2n + 1) {
  float: left;
  clear: left;
}

/* はてなモジュール_偶数(右) */
.hatena-module:nth-child(2n) {
  float: right;
  clear: right;
}

.hatena-module {
  width: 180px;
}

また、

 /* 
サイドバーを左よせ
margin-left: 0px; 
 */

となっているところは、

  margin-left: 0px; 

というふうにすると、サイドバーを左寄せにしたり、サイドバーが記事部分の外側に付いたようなデザインに出来ます。
この場合、「サイドバーを外に」や「サイドバーを左よせ」が書いてあるところは全て上のようにしないとうまくできないはずです。


<2016/03/06追記>
以上のCSSをそのまま使うと、モジュール間の上下の間隔が必要以上に開いてしまう、という問題点があります。
しかし以下のようにすることで、この問題を回避出来ると思います

/* はてなモジュール_奇数(左) */
.hatena-module:nth-child(2n + 1) {
  float: left;
  clear: left;
}

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

これを、上にあるCSSの最後に追加、もしくは当該部分(.hatena-module:nth-child(2n + 1) の中など)を置き換えると完了です。


※ここからはCSSの動作が分かる人向けです。
こんな問題が起きてしまった理由と解説ですが、最初に書いた方法では左右両方ともフロートを使って左右に振り分けました。
ところが、細かい所は分かりませんが、一つ前の要素を基準に配置場所(高さ)が決まってしまってたみたいです。
多分、「clear」を使うことで次の要素を下に追いやる、というのが原因。
片方だけならまだしも、左右両方に「float」「clear」を使ってたのがマズかったみたいです。

なので、左側には今までどおりfloatを使い、右側は「margin」で右端に寄せました。
これだと、僕の試した範囲では無駄な間隔がなくなりました。
なお、左側のclearを削るとフロートした要素に更にフロートするので、削れません。
また左側もmarginを使うという方法も、ダメでした。

広告を非表示にする