Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第25回】メインコンテンツの幅を変更する第22回からの、ブログの幅を変更するシリーズ。今回は、メインコンテンツの幅変更です。現在、左サイドバーを広げたことによってブログ全体の幅に収まりきらず、サイドバーの下に表示されてしまっているメインコンテンツを、元通り正しく表示してあげましょう。メインコンテンツを定義する要素は、第22回でもお伝えした通り#contentです。この中のwidth:620px;というプロパティの値を小さくしてやれば、メインコンテンツの幅を狭めることができます。★メインコンテンツの幅を変更する方法★#content要素のwidthプロパティの値を変更する。▼▼▼#content{width:570px;float:left;}以上の修正で、メインコンテンツの幅が狭くなり、以前と同様正しく表示されるようになります。以上で、メインコンテンツの幅修正は完了です。見ればお気づきかと思いますが、メインコンテンツの幅を狭めたことによって、記事タイトルの背景画像の一部が表示されなくなっています。記事タイトル左側のねずみのしっぽが表示されていません。これを正しく表示するためには、前回と同じく画像調整とアップロード、CSS上のURL変更作業が必要となります。興味のある方は、前回の記事を参考に画像を修正してみて下さい。メインコンテンツのタイトルの背景画像は、h3.title要素の中のbackground-imageプロパティで定義されています。このブログでは、この記事を書き終えた後に上記画像も修正してしまうつもりです。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。