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

この記事は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ブログの管理画面から「デザイン」⇒「デザイン設定」と進み、適応中のデザインタイトルをクリック。

新デザインパンくず-1

次の画面でスタイルシート編集のタブになっているかを確認。

新デザインパンくず-3

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

■右サイドバーの場合

.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;  /* メインコンテンツとサイドバーの間の余白 */
}

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

Seesaa新デザイン幅-1

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

.entry__thumbnail {
  width: ●●px;
}

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

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

Seesaa新デザイン幅-2

以上右サイドバーや左サイドバー(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」がそれぞれのサイドバーの幅。2つあるので合計600pxになりますよね。ここの数値を変更すると両方のサイドバーの幅が同じサイズに変更されます。

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

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

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

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

1120px-790=330px

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

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

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

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

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」と進み、適応中のデザインタイトルをクリック。

新デザインパンくず-1

タブが「スタイルシートの編集」になっている事を確認。

新デザインパンくず-3

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

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

以上で完了。

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

Seesaa新デザイン幅-1

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

.entry__thumbnail {
  width: ●●px;
}

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

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

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

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

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

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

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

Seesaaブログの幅を変更する方法【新システム】”に4件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    りこ様

    コメントありがとうございます。まず確認ですが、おそらくブログの幅を変更されたのだと思います。一度試して貰いたいのですが、Seesaaブログの管理画面から「設定」⇒「ブログの設定」と進み、ブログの設定の部分に「サムネイルのサイズ」というのがあります。これをコンテンツ部分のサイズと同じサイズにしてみて保存して試してもらえますか?

    一度サムネイルサイズを変更したら改めて画像をアップしてサムネイルを設定してみて下さい。それでも反映されない場合には再度コメント頂けると助かります。

  2. りこ

    はじめまして。最近こちらのブログを見ながらSeesaaブログをカスタマイズしています。
    こちらの記事を参考に、新デザインのサムネイルが大きい方をカスタマイズしました。
    サムネイルのサイズを指定した処、トップの各記事のサムネイルが左端に寄ってしまいます。
    CSSでサムネイルのサイズ指定に加え、text-align:center;を加えても
    センターにこないのですが、どのように指定すればよいでしょうか??

  3. しげぞう 投稿作成者

    >たけまる様

    コメントありがとうございます。スマートフォンからPC表示をクリックすると確かにサイドバーが記事下に来ますが、おそらくこれはカスタマイズの影響でレイアウトが崩れているのではなく、こういう仕様なのではないかと思います。私のブログのデフォルトの状態でもこのようになっていました。あくまでスマートフォンから見やすいスタイルをイメージした仕様だと思うのですが、最近は無料ブログ以外でもこのようなサイドバーが下に潜り込むスタイルが採用されています。

    これを変更することはおそらくできないと思います。出来たとしてもスマートフォンの横幅でPC画面の表示になると思うのでこれは非常に小さい表示になるのではないかと推測します。もし、見た目に問題がない場合はそのままでもいいと思います。

    もし何かスマートフォンの部分でおかしい部分があれば再度コメントを頂けたら嬉しいです。新システムは最近記事を書いたばかりなので、色々と検証する必要があるかと思っていますので、何かあれば教えて下さい。どうぞよろしくお願い致します。

  4. たけまる

    いつもブログ拝見させて頂き、参考にさせて頂いております。
    この度、新たにシーサ―ブログにて新しいブログを立ち上げ、新システムのテンプレートを使用しています。こちらの記事を参考にしていくつかカスタマイズさせて頂いたのですが、スマートフォンから、PCビューでブログを見た際に、レイアウトが崩れてしまいます。
    具体的に言うと、私は右カラムのテンプレートを使用しているのですが、その右サイドバー全部が記事の下にそっくりそのまんまきてしまっている状態です。
    こちらの現象はどのようにすれば治りますでしょうか?教えて頂けたら幸いです。
    長々と失礼いたしました。