「夜空」テンプレートのカスタマイズ(10)…2カラムから3カラムに変更する

リゴレット2013年7月にブログのデザインを変更しました。以前は右側にサイドバー1列配置だったのですが、記事の左右にサイドバーが1列づつ並ぶ3カラムにしてみました。

基本的に左メニューは広報室ブログ各記事への内部リンク、右メニューはブログから離れて別ウィンドウ(もしくはタブ)が立ち上がる外部リンクとなっています。

例によって設定方法を記事にしておきます。自分で忘れてしまうので…。ウェブリブログ以外には汎用性がない記事ですから、興味のない方はランキングをどうぞ。

ランキングを見る(にほんブログ村 オペラ)
ランキングを見る(人気ブログランキング クラシック)

3カラムにするだけなら操作は簡単です。ウェブリブログの管理ページから

設定>表示項目設定>サイドバーレイアウト設定(下のほうにある)

ここにメニュー項目を左に配置するか、右に配置するか指定する機能がありますので、全項目右に設定すれば、2カラムの右メニューになりますし、左右に振り分ければ3カラムになります。

ただ2カラムから3カラムに変更した場合、ちょっと具合の悪いことが起こります。左右のサイドバーにはさまれた記事欄の横幅がわずかに狭くなるのですね。

過去記事がテキストだけならテキストの折り返し位置が変わるだけでなんの不都合もありませんが、画像やYouTube動画を記事欄の横幅一杯に貼ってあると、それらの右端が欠けたり右メニュー欄にはみ出したりします。

それに従来記事欄の横幅は若干狭めだったので、どちらかというと広げたいと思っていた私にはかなり具合が悪い。

そこでCSSの出番です。今回はこちらの記事を参考にCSSをいじってみました。

CSS(スタイル編)第7回 ブログの幅を広げてみよう

以下の作業はいずれもウェブリブログの編集メニューから
[設定]の「オプション」→[CSS編集(上級者向け)]
を開いてCSSの記述を変更または追記します。
(CSS初心者の方はその前に過去記事をどうぞ)


まずブログ全体の幅をえいやで900ピクセルに指定してみました。

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
width:900px;
}

フッターも同様に広げます。(緑字は過去記事で既に変更を加えた箇所です)

/*-------------- ページフッタ領域 --------------*/
#footer{
width:900px;
background-color:#07173b;
color:#666;
}

全体の横幅としてはいい感じなのですが、広目に取った分余白がでます。その余白は右サイドバーのさらに右に吸収されるようになっているみたいです。中央の記事欄に配分してくれればよかったのですが。

そこで、中央の記事欄の幅を指定して広げてみます。

/*-- ブログ(記事+トラックバック+コメント) --*/
#blog{
width:520px;
}

ぴったり収まったみたいです。過去記事を見ると横幅一杯に貼り付けていた画像や動画の右に余白ができています。横幅はあまり広すぎるとテキストが読みにくくなりますが、このぐらいなら丁度いいのではないでしょうか。

ところが中央のカラムに「新着記事一覧」を表示すると(つまりトップページを表示したとき)、右サイドバーのさらに右にまだわずかに余白がでるのですね。よくわかりませんが、「記事欄」とは別に横幅を指定する必要があるみたいです。

/*------------------ 新着記事 ------------------*/
#contents{
width:540px;
}

「記事欄」より「新着記事」を20ピクセル広げてやるときれいに収まるみたいです。

3カラムの調整はひとまずこれで完了。以下は拡幅とのバランスを考えてフォント変更等を施した箇所です。

/*---------------- タイトル(大) ----------------*/
#banner{
background-image:url(http://userdisk.webry.biglobe.ne.jp/011/090/43/N000/000/000/Image16.gif);
height:90px;
background-repeat: repeat-x;
/* 包含要素を相対位置指定できるようにします */
}

/*---------------- タイトル(小) ----------------*/
#subbanner{
background-image:url(http://userdisk.webry.biglobe.ne.jp/011/090/43/N000/000/000/Image16.gif);
background-repeat: repeat-x;
height:90px;
/* 包含要素を相対位置指定できるようにします */
}

タイトル背景画像がなぜか右詰に表示され左に余白ができるので、画像の横リピートを指定しました。

/* タイトル領域内のアンカー */
#banner a{
font-family: "HGP創英角ゴシックUB",'メイリオ',Meiryo,"ヒラギノ角ゴ Std W8","Hiragino Kaku Gothic Std",sans-serif;
font-size:46px;
}

/* タイトルテキスト */
#banner h1{
font-family: "HGP創英角ゴシックUB",'メイリオ',Meiryo,"ヒラギノ角ゴ Std W8","Hiragino Kaku Gothic Std",sans-serif;
font-size:46px;
}

/* タイトル領域内のアンカー */
#subbanner a{
font-family: "HGP創英角ゴシックUB",'メイリオ',Meiryo,"ヒラギノ角ゴ Std W8","Hiragino Kaku Gothic Std",sans-serif;
font-size:46px;
}

/* タイトルテキスト */
#subbanner h1{
font-family: "HGP創英角ゴシックUB",'メイリオ',Meiryo,"ヒラギノ角ゴ Std W8","Hiragino Kaku Gothic Std",sans-serif;
font-size:46px;
}

タイトルテキストのフォントを46ピクセルに拡大しました。

CSSの変更はここまで。

<div style="visibility:visible; margin-top:-1.3em; width:520px;"><span style=color:#b0c4de>オペラ対訳プロジェクトのメジャーな更新情報をこのブログでお知らせしています。……</div>

トップページに表示されるプロフィール欄の横幅が広すぎるので、中央カラムの幅にあわせてみる。

今回の記事はこれで終了。左サイドバーの左にもう少し余白があるといいのですが、やり方がわかりません。やり方がわかったらまた記事にするかもです。

過去記事
ココで投票できない場合こちらで投票してください。⇒⇒⇒投票所


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック