koblog

高校生のWEBデザインブログ

【はてなブログ】1カラムから2カラム、2カラムから1カラムにする方法

サムネイル

はてなブログの多くのテーマは2カラムで構成されています。利便性を考えれば当然ですが、たまには1カラムデザイン(レイアウト)のテーマも使ってみたいですよね。しかし現状では1カラムでデザインのよいテーマはほとんどありません。

 

そこで今回は自分で2カラムから1カラムにする方法を紹介します。もちろん1カラムから2カラムにすることもできるので、良かったら参考にしてみてください。

 

 下の記事でおすすめの1カラムテーマも紹介しています。

 

 

2カラムデザインのメリット・デメリット

2カラムのメリットとして、

  • 人気記事などに誘導しやすい
  • プロフィールを見てもらえやすい
  • 多くのブロガーが使っているのでデザインを参考にしやすい

などがあります。

実際多くのブログでは2カラムデザインが採用されていて、Wordpressで有名な「賢威」や「SANGO」、はてなブログで有名な「Minimalism」などのテーマも2カラムで構成されています。

 

しかし2カラムデザインにはデメリットもあります。

  • ユーザーが1つの記事に集中しづらい
  • 記事の表示範囲が小さくなってしまう

 

ブロガーとしては、人気記事に誘導するためにサイドバーをつけたいところですが、見る人にとっては不便なものになってしまいます。確かに僕自身も他の人のブログを見ているときに、サイドバーがあると他の記事が気になってしまうことがあります。

 

ここからはTwitter上で見た話ですが、あるブロガーさんは2カラムデザインから1カラムデザインに変えたところブログのPVが短期間で上がったそうです。もしかしたら先程のことが関係しているのかもしれません。

 

1カラムデザインの有名なブログとしては「monograph」などがあるのではないでしょうか。余談ですがTwitterは3カラムデザインから2カラムデザインに変わるようです。

  

ブログのカラム数を変える方法

前置きが長くなってしまいましたが、早速カラム数を変える方法を紹介したいと思います。注意点ですが、念の為必ずバックアップをとっておいてください。

 

CSSの編集方法には以前紹介した方法の【上級者編】を使います。

まだ見ていない方はぜひどうぞ。

 

今回は例としてテーマ制作でお馴染みの「Boilerplate」を使って紹介していきます。

ここからは人によってやり方が変わるので、それぞれ自分にあったほうを参考にしてください。

・1カラムにしたい→

「1カラムにしたい場合は下記のコメントアウトを外してください」がある→①

「1カラムにしたい場合は下記のコメントアウトを外してください」がない→②

・2カラムにしたい→②

 

①「1カラムにしたい場合は下記のコメントアウトを外してください」がある場合

この場合は単純にコメントアウトを外すだけです。

外し方ですが、下のようになっている場合は、赤色の部分を消すだけです。

CSS

/* 2カラムレイアウト */
#main {
width: 600px;
float: left;
}
#box2 {
width: 300px;
float: right;
}
/* 1カラムにしたい場合は下記のコメントアウトを外してください ----

#main {
width: 100%;
float: none;
}

#box2 {
width: 100%;
float: none;
}

#box2-inner {
width: 960px;
.clearfix;
overflow: hidden;
}

.hatena-module {
text-align: left;
padding-right: 20px;
width: 300px;
float: left;

&:nth-child(3n+1) {
clear: both;
}
}

---- END 1カラム */

 

*****

 

@media (min-width: 768px) and (max-width: 1024px) {
#container {
width: 724px;
}
#main {
width: 460px;
}
#box2 {
width: 245px;
}
/* 1カラムにしたい場合は下記のコメントアウトを外してください ----
#main,
#box2 {
width: 100%;
}

#box2-inner {
width: 744px;

.hatena-module {
width: 228px;
}
---- END 1カラム */
}

 

 

②「1カラムにしたい場合は下記のコメントアウトを外してください」がない場合

コードが無いので自分でコードを追加する必要があります。

追加場所は、下の画像に載っている#box2{~~}の後ろです。

f:id:somethingreview:20190218083456p:plain

 

1カラムにしたい人は下のコードを追加してください。

CSS

/* 1カラム */
#main {
width: 100%;
float: none;
}

#box2 {
width: 100%;
float: none;
}

#box2-inner {
width: 960px;
.clearfix;
overflow: hidden;
}

.hatena-module {
text-align: left;
padding-right: 20px;
width: 300px;
float: left;

&:nth-child(3n+1) {
clear: both;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
#main,
#box2 {
width: 100%;
}

#box2-inner {
width: 744px;

}

.hatena-module {
width: 228px;
}
}

 

 

2カラムにしたい人は、下のコードを追加してください。

CSS

/* 2カラム */
#main {
width: 600px;
float: left;
}
#box2 {
width: 300px;
float: right;
}
@media (min-width: 768px) and (max-width: 1024px) {
#main {
width: 460px;
}
#box2 {
width: 245px;
}
}

 

 

これで反映されると思いますが、反映されない場合は元々ある「#main」と「#box2」のコードを消してみてください。以上でCSSの編集は完了です。

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる