Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第26回】ブログ全体の幅を変更する今回は、ブログ全体の幅を広げてみましょう。第22回で解説した通り、ブログ全体の幅を定義しているのはCSS上の#container要素です。現在使用しているこねこ(左サイドバー)テンプレートでは、デフォルトで840pxの幅となっています。今回はこれを100px増やして、ブログの幅を940pxにしてみましょう。CSSの編集は、第2回で紹介したCSS編集画面で行って下さい。修正するセレクタは#container、プロパティはwidthです。★ブログ全体の幅を変更する方法�@:全体幅の変更★#container要素のプロパティwidthの値を修正する。auto;background-color:#fff;}この変更によって、ブログの表示はこのようになります。▼▼▼ちょっと分かりにくいですが・・・なんとなく、ブログ全体の幅が広がっているのが分かるでしょうか。このテンプレートは、ブログそのものはブラウザの中央に表示される設定となっています。その上で、ブログ全体の幅が広がったことにより、左寄せ設定の左サイドバーとメインコンテンツは、画面上左に寄ってしまっています。なによりも、ブログのヘッダーも変わっていますね。ヘッダーの猫の写真を含む画像は中央寄せ。ブログのタイトルやその下の説明文は左寄せ。結果として、ブログのタイトルなどはヘッダー画像の左にはみ出る形となっています。ここまで、宜しいでしょうか。ブログ全体の幅を広げただけでは意味がありません。それに伴う、コンテンツの修正が必要です。ここでは、メインコンテンツの幅を、ブログ全体の幅と同じく100px増やしてみることにしましょう。方法は、第25回で解説した通りです。★ブログ全体の幅を変更する方法�A:メインコンテンツの幅の変更★#content要素のwidthプロパティの値を変更する。▼▼▼#content{width:670px;float:left;}この結果、ご覧の通りメインコンテンツの幅が、ブログ全体の幅一杯まで広がります。▼▼▼おお、メインコンテンツのタイトル背景画像が、ねずみ2匹に(笑)これはまずい・・・ので、必要とあらば第24回で紹介した方法で画像を修正して下さい。ここでは、あとタイトル画像を修正してみます。こちらも、第24回で紹介した方法を使って、既存の画像を拡大します。★ブログ全体の幅を変更する方法�B:タイトル画像の調整★#banner要素のbackground-imageプロパティに記載されているURLからタイトル画像を取得し、PictBearでサイズを調整し、ブログにアップロードする。background-imageプロパティのURLを変更し、アップロードした画像を参照するようにする。(注)画像取得から修正後画像アップロードまでの方法は、第24回をご参照ください。40px;margin-bottom:25px;height:294px;}これで、ご覧のように拡大したタイトル画像が表示されるようになります。▼▼▼あとは、タイトル画像を拡大したことによってタイトルの文字サイズや表示位置が気になったり、また先ほどのコンテンツタイトルの画像がおかしくなったりと、いろいろ気になりますが、そういった点はこのブログの過去の記事を参照しながら徐々に自分の好みに修正してみて下さい。私はこのブログは以前の幅のままの方が良いと思いますので、この記事を書き終えたら、ブログの幅は以前どおり840pxに戻すことにします。|この記事へのコメントどうもはじめまして、田中と言います。さんのSeesaaブログのデザイン変更ワザを見てさせもらい、私も自分のブログのページをブログ全体の幅に変更しようとしたのですが、Seesaaブログのどこのタグから入ってHTMLとかCSSを変更したらいいのかが分からなくてメールさせて頂きました。ど素人な物でなかなか分からなくて悪戦苦闘しています。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。