So-netブログのサイドバーの幅を変えてみる （１）

少し前から、So-netブログのテンプレートのサイドバーの幅を変えてます。気付いた方はいらっしゃるでしょうか？今日は、そのやり方をご紹介したいと思います。

テンプレートを編集するには、管理ページの『デザイン』をクリックします。すると、デザインテンプレートの一覧が出てきます。




次に、『テンプレート管理』 を選択します。今まで選択したテンプレートのリストが現れます。この中から、変更したいテンプレートを選択し、『編集』 をクリックします。




すると、『スタイルシート編集』 が開きます。この編集ウィンドウ内でスタイルシートを編集します。




編集したレイアウトは、『プレビュー』で確認できます。まずは何も変更せず、オリジナルのレイアウトを確認してみましょう。




これがオリジナルです。覚えておいてくださいね。

では、編集ウィンドウ内で "Sidebar" のレイアウトを変更してみましょう。'Side' で検索すると、"Sidebar" のスタイル定義にたどり着きます。

変更前	変更後
/*-----Side-----*/ #side-a { float:left; font-size:12px; width:220px; overflow:hidden; } .sidebar { width:220px; margin-bottom:30px; overflow:hidden; }	/*-----Side-----*/ #side-a { float:left; font-size:12px; width:270px; overflow:hidden; } .sidebar { width:270px; margin-bottom:30px; overflow:hidden; }

さて、プレビューを見てみましょう。どうなるでしょうか？




おっ、確かに幅が広がりましたね！
でも、フォントが小さかったりして間が抜けているようです。次は、全体のレイアウトのバランスを調整していきたいと思います。

---

現場でかならず使われている CSSデザインのメソッド

• 作者: 北川 貴清
• 出版社/メーカー: エムディエヌコーポレーション
• 発売日: 2013/09/25
• メディア: 単行本

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

• 作者: 大藤 幹
• 出版社/メーカー: エムディエヌコーポレーション
• 発売日: 2013/08/01
• メディア: 単行本

ゼロからわかる HTML&CSS超入門

• 作者: 太木 裕子
• 出版社/メーカー: 技術評論社
• 発売日: 2011/02/11
• メディア: 大型本

---

タグ：CSS HTML

コメント 2

こちらこそnice!&ご来訪ありがとうございます。
ブログの見せ方も考えたいと思っていましたので、参考にさせていただきます。
by すーやん (2013-12-06 06:49) 

こんばんは。 初めまして！
過去記事にコメントをすみません。
全体の幅とサイドバーの幅を広げたくて、どうしたらいいかいろいろ調べている内にこの記事に辿り着きました。
とても分かりやすくて大変助かりました！
この記事を参考に2日がかりで、やっと何とか幅を広げることができました。
どうもありがとうございました☆*:.｡. o(≧▽≦)o .｡.:*☆

by saia (2016-01-16 20:14)