メニューの幅の変更方法

for:sanfrecce39 さん
time:2008/11/17

質問

オレンジロゴ(2カラム)を利用しているんですが,左のメニュー部分を拡大することって出来ないでしょうか?
横幅を広げたいんですが



CSS

「管理ページ」>「CSSカスタマイズ」において,下のような記述を入力して,「変更する」ボタンを押して確定させてください。
そしてこの時,3ヶ所ある「○px」の数値を変更してメニューの幅を変更させます。変更する時は,3ヶ所とも同じだけ加減するとよいでしょう。
【例】デフォルトより40px広くする場合:各数値に40px加算する。
#menubar
=165→205
#contents
=-194→-234 ※但し,負の値であることに注意。
#contents_inner
=204→244
#menubar
{
width: 165px;
}


#contents
{
margin-left: -194px; /****マイナス「-」であることに注意****/
}


#contents_inner
{
margin-left: 204px;
}







@wikiのロゴマークの消去

画像左の@wikiのロゴマークを消したい場合は,「管理ページ」>「CSSカスタマイズ」ページの「ユーザ定義CSS」フォームに以下の記述をコピペして,「変更する」ボタンを押して確定させてください。
#header a#atwiki-jp-bg1
{
display: none;
}







ヘッダの画像の設定について

「タイトル・背景画像設定」を使用している場合

for: toriana さん
time:2008/02/19~

質問

タイトルロゴの表示が以前はきっちりとタイトル部分に表示されていたのに、いつの間にかワクを超えて表示されるようになってしまい、タイトルロゴが文字と被ってしまい見た目がカッコ悪くなってしまいました。
アドレスは以下の通りなので、どなたかご指導よろしくお願いします^^;
http://www41.atwiki.jp/toriana/


前説

質問者のかたは「管理ページ」>「タイトル・背景画像設定」を使用してタイトルに画像を表示させていました。ただ,この機能を使用することによって,使用した画像がヘッダー部をはみださせて本文部分を押し下げてしまっていたので,ズレが生じていました。
そこで,ヘッダー部の高さを画像に合わせて大きくすることでズレを解消させることにしました。

CSS

「管理ページ」>「CSSカスタマイズ」のページを開いて,以下の記述をコピペしてください。
その際,
(タイトル画像の高さ)px+65px

の数値を,下の「height: px;」に記入してください。
そして「変更する」ボタンを押して確定させてください。
なお,「タイトル・背景画像設定」で使用した画像の幅が大きい場合等には,@wikiのロゴマークが邪魔してヘッダー画像が綺麗に表示されないことがあります。なので,ここでは当該ロゴマークを消す設定にしてあります。消したくない時は,「display: none;」の箇所を削除してください。
#header
{
height: px;
}

#header a#atwiki-jp-bg1
{
display: none;
}

オプション:画像の中央寄せ

上記CSSに,以下の記述を追加。
#header
{
text-align: center;
}

#header h2
{
text-align: left;
}


「タイトル・背景画像設定」を使用しない場合

前説

本項での方法は,ヘッダー部のbackgroundに,用意した画像を指定するというものです。

手順1

先ず,「管理ページ」>「タイトル・背景画像設定」ページの「トップタイトル表記の種類」チェック・ボックスで「テキスト」が選択されていることを確認。

手順2

次に「CSSカスタマイズ」で,以下の記述をコピペして確定してください。
なお,その際,
  1. backgroundの「url()」に使用画像のURLを記入
  2. 「(使用画像の高さ)px+20px」の数値を「height: px;」に記入

することを忘れずに。
#header
{
background: url() no-repeat center top;
margin: 5px 25px 25px 25px;
height: px;
}

オプション:サイト・タイトルの消去

サイト・タイトルが既に画像に入っている等により,表示させたくない場合は,以下の記述を追加。
なお,その際,
(使用画像の高さ)px

を下のh2の「padding-top: px;」に記入すること。
#header h1
{
display: none;
}

#header h2
{
padding-top: px;
}