Seesaaブログの幅を変更する方法【新システム】

今回はSeesaaブログの新デザインシステムでブログの幅を変更する方法を紹介していきます。全体の幅やサイドバーの幅を変更したいという場合には参考にしてみて下さい。ただ、今回の新デザインの場合は結構そのままでも使えるようなデザインが多いので、無理して幅を変更する必要はないかも。

という訳で需要があるか分かりませんが手順を紹介していきます。

現在のブログの幅を確認して変更する幅を決める

まずは初期状態でどのような幅になっているのかを確認しておく必要があります。新デザインのテンプレートの場合は大体こんな感じになっています（全部試したわけではないけど）。

■右サイドバーもしくは左サイドバー（2カラム）の場合

• 全体の幅（.l-wrapper）：960px
• 記事本文などのメインコンテンツ部分（.main）：620px
• サイドバーの幅（.side）：300px
• メインコンテンツとサイドバーの間の余白：40px

■両サイドバー（3カラム）の場合

• 全体の幅（.l-wrapper）：1180px
• メインコンテンツの幅（.main）：460px
• サイドバー（.side）：それぞれ300pxずつ
• メインコンテンツとサイドバーとの間の余白：30pxずつ
• 両端（一番右と左）に余白：30pxずつ

こんな感じになっているので、これを見ながら全体の幅やサイドバーの幅、余白などをどうするのか計算しておきましょう。計算できたらそれをメモしておいて次の作業に進みます。とりあえず「右サイドバーもしくは左サイドバーの場合」と「両サイドバーの場合」でやり方が違うので順番に説明します。

ブログの幅を変更手順と注意点

Seesaaブログの新システムの場合は「PCでの場合」と「タブレットの場合」それから「スマートフォン」で見た場合という3種類の視点でスタイルシートが書かれています。そのため、ブログの幅を大きく変更すると「タブレット」で見た時にはみ出たりする場合があります。スマートフォンのスタイルシートは独立しているので問題はないです。

そのため、できればブログの全体の幅自体は大きく増やしたりしない方が無難。結構色々と条件分岐タグを入れる必要も出てきます。一応基本的な部分だけを説明しますが、必ず事前にバックアップをしておいていつでも元に戻せるようにしておく事をおすすめします。

右サイドバーもしくは左サイドバーの場合

サンプルとして次のような幅に変更してみます。

• 全体の幅（.l-wrapper）：860px
• 記事本文などのメインコンテンツ部分（.main）：520px
• サイドバーの幅（.side）：300px
• メインコンテンツとサイドバーの間の余白：40px

サイドバーの幅を変えずにメインコンテンツの部分を100px減らして全体の幅も100px少なくしてみます。

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」と進み、適応中のデザインタイトルをクリック⇒スタイルシート編集。

スタイルシートにはたくさんのコードが書かれていますが、一番下までスクロールして次のコードを追加していきます。

■右サイドバーの場合

.l-wrapper {
  width: 860px;  /* 全体の幅 */
  }
.main {
  width: 520px;  /* メインコンテンツの幅 */
}
.side {
  width: 300px;  /* サイドバーの幅 */
}
.side--right {
  float: left;
  margin-left: 40px;  /* メインコンテンツとサイドバーの間の余白 */
}

■左サイドバーの場合

.l-wrapper {
  width: 860px;  /* 全体の幅 */
  }
.main {
  width: 520px;  /* メインコンテンツの幅 */
}
.side {
  width: 300px;  /* サイドバーの幅 */
}
.side--left {
  float: left;
  margin-right: 40px;  /* メインコンテンツとサイドバーの間の余白 */
}

これでブログの幅は変更できますが、もう１つ変更する場所があります。Seesaaブログの新デザインは大きく分けて2通りのパターンがあって、大きい画像が表示されるタイプと小さい画像が表示されるタイプがあります。

この大きい画像の方を利用している場合にはスタイルシートに更に追記が必要になります（小さい画像を利用している場合は不要）。メインコンテンツの幅を変更した場合にこれを入れないと大きな画像がサイドバーまではみ出す場合があるためです。

.entry__thumbnail {
  width: ●●px;
}

●●の部分には先ほど記述した「.main」つまりメインコンテンツの幅と同じ数値を入れます。このサンプルの場合は「520px」という感じですね。

もともとブログの設定でサムネイルのサイズが640pxになっているので、ブログのメインコンテンツの幅をこれよりも小さくすると画像がはみ出すという訳です。

以上右サイドバーや左サイドバー（2カラム）の場合のブログ幅変更の手順。

両サイドバーの場合

両サイドバーの場合は結構複雑。まずは設計図を用意する必要があります。全体の幅、サイドバーの幅、メモ帳と計算機を用意して図を書きながら数値を入れてみて下さい。

ちなみに右サイドバーと左サイドバーはデフォルト（初期状態）でそれぞれ300pxずつになっていて、これを違うサイズにする場合には更に手間がかかります。サイドバー（右、左）の幅が同じでもいいよって場合の方が簡単。

まずはデフォルトの幅を見ながら説明していきます。

.l-wrapper {width: 1180px;}

「.l-wrapper」は全体の幅なんですが、両端（左サイドバーの左、右サイドバーの右）にそれぞれ30pxの余白があるので実質的には次のような幅になります。

1180px-30px-30px=1120px

つまり全体の幅は1120pxだと思ってもOKです。この1120pxをどのように振り分けるのか考えます。

.l-content {width: 790px;}

「.l-content」というのは「メインコンテンツ（記事本文）部分の幅」と「右サイドバー」を合わせた幅の合計（間の余白も含む）。メインコンテンツとサイドバーとの間の余白も含むのがポイントです。

.main {width: 460px;}

「.main」はメインコンテンツ単体の幅ね。

.side {width: 300px;}

「.side」がそれぞれのサイドバーの幅。２つあるので合計600pxになりますよね。ここの数値を変更すると両方のサイドバーの幅が同じサイズに変更されます。

それではここで、「メインコンテンツ（.main）」と「右サイドバー（.side）」を合計してみるとこうなります。

460px（メインコンテンツ）+300px（右サイドバー）=760px

先ほど書いたようにメインコンテンツ（記事本文）部分の幅と右サイドバーを合わせた幅の合計（.l-content）が790pxだから、30px余ります。これが右サイドバーとメインコンテンツとの余白になります。

次に全体の幅（実質1120px）から「メインコンテンツ部分の幅」と「右サイドバーを合わせた幅」の合計（.l-content）」を引き算するとこうなります。

1120px-790=330px

これが左サイドバー（300px）とメインコンテンツとの余白（30px）という風になっている訳です。

以上が初期状態でのブログの幅という事になっているのでこれを把握して設計図を作成しておきます。それとサイドバーそれぞれの幅を変更する方法も紹介しますよ。

両サイドバーの幅変更サンプルで実践

サンプルとして全体の幅を1220px、両方のサイドバーをそれぞれ300pxずつ、メインコンテンツを500px、それぞれ余白を30pxにする場合で考えてみます。

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」と進み、適応中のデザインタイトルをクリック。タブが「スタイルシートの編集」になっている事を確認。

たくさんコードが書かれていますが、一番下までスクロールして次のコードを追加。

.l-wrapper {width: 1220px;}
.l-content {width: 830px;}
.main {width: 500px;}
.side {width: 300px;}

以上で完了。

それとSeesaaブログの新デザインは大きく分けて2通りのパターンがあって、大きい画像が表示されるタイプと小さい画像が表示されるタイプがあります。

この大きい画像の方を利用している場合にはスタイルシートに更に追記が必要になります（小さい画像を利用している場合は不要）。メインコンテンツの幅を変更した場合にこれを入れないと大きな画像がサイドバーまではみ出す場合があるため。

.entry__thumbnail {
  width: ●●px;
}

●●の部分には先ほど記述した「.main」つまりメインコンテンツの幅と同じ数値を入れます。このサンプルの場合は「500px」という感じです。

それぞれのサイドバーの幅を変更したい場合

それぞれの幅を別のサイズにしたい場合には先ほど使った「.side」は使いません。使うのは次の2つ。

• 「.side–right」：これが右サイドバー
• 「.side–left」：これが左サイドバー

つまり、右サイドバーを200pxにして左サイドバーを150pxにしたいという場合にはスタイルシートの一番下に次の記述をすればOK。

.side--right{width:200px;}
.side--left{width:150px;}

以上Seesaaブログの幅を変更する方法でした。

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

• ⇒WordPressを始めるのに必要な物や料金
• ⇒WordPressブログの始め方と使い方まとめ！【初心者向け】
• ⇒Seesaaブログカスタマイズまとめ【新システム版】