Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第22回】ブログの幅を変更する今回から5回にわたって、ブログの幅を変更する方法をご紹介していきたいと思います。現在使用しているこねこ(左サイドバー)というテンプレートの幅は、ご覧の通りとなっています。ブログ全体の幅は840px。その内訳として、左サイドバーの幅が200pxで、メインコンテンツ部分が620pxとなっています。左サイドバーとメインコンテンツの間に20pxの空間があり、この空間も含めると合計で840px、すなわちブログ全体の幅と同じとなります。今回からの一連の編集で、このブログ幅を変更してみたいと思います。その編集内容ですが、まずはブログ全体の幅は変更せず、左サイドバーとメインコンテンツの幅のみを変更してみましょう。●左サイドバーの幅を200pxから250pxに変更する。●メインコンテンツの幅を620pxから570pxに変更する。左サイドバーを50px広げ、その分メインコンテンツを50px狭める形です。今回からの一連の変更を施したブログは、こんな形になります。それでは、早速CSSの編集に入っていきましょう!・・・と、その前に、今回はまず、Seesaaブログの構成を解説したいと思います。概略レベルでもこれを押さえておかないと、いざCSSを編集する時に???になってしまいますので。Seesaaブログでは、大まかに言ってCSS上このような構成となっています。ブログ全体を�@#containerという要素で定義しています。ここで、ブログ全体の幅840pxなどを定義しています。次に、タイトル部分を表す�A#bannerという要素があります。タイトル文字や説明文、タイトル画像を定義している箇所ですが、今回の編集では特に変更は行いません。次にあるのが�B#links-leftです。左サイドバーを表す要素です。この中で、現在の200pxというサイドバーの幅が定義されています。今回の変更の本命の1つです。左サイドバーとメインコンテンツの間の空白である20pxも、この要素で定義されています。ちなみに、右サイドバーの場合は#linksという要素が使われますので、右サイドバーのテンプレート、あるいは両サイドバーのテンプレートを使用している方はそちらも確認してみて下さい。最後にご紹介するのが、メインコンテンツを表す�C#content要素。この中で、現在の幅である620pxが定義されています。こちらも、今回の編集で変更していきましょう。いうことで、次回からの編集では、�B#links-leftと�C#contentを編集して、左サイドバーとメインコンテンツの幅を変えていきます。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。