Web Amusement Hyper Activity Land

広告の表示ルールとしてファーストビュー(最初に表示された状態)で広告がかならず表示される必要がありますが、外側の幅を1230に設定すると、padding とあわせて、1262 となってほぼ画面いっぱいにコンテンツを配置できます。

描いた絵の位置や、右サイドはそのままで左詰めになるので、広告も正しく表示されます。ここでめいっぱいの幅が使えるので、他のコンテンツを気兼ねなく大きいものに張り替える事ができるようになります。

そこで、まずタイトル画像に大きなものを張り付けてみます。タイトル画像は、画像パーツで $user.image001 に対してアップロードする事で設定されます。( 右下に緑色のフォルダアイコンがありますので、そこから PC の画像をアップロードします )





幅を 1230 にしなくても、他のコンテンツを大きくする事はできますが、ひょっとしていろいろやっているうちに影響が出るかもしれないので、まず入れ物を大きくしています。最終的に問題無ければ、幅を元に戻せば良いと思います

#Wrapper {
	width: 1230px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 16px 0px 16px;
}

さて、タイトルにあわせて背景を黒くしたいのですが、そうするとメニューバーの文字の色も同時に変更する必要があります。

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-size:11px;
	margin: 0;
	color: #777777;
	background-color:#000000;
}
#MenuBar a {
	color:#DDD1C7;
	text-decoration: none;
}

最後に、レイアウトの境界の色を変えるのに、4、5、7 を黒く塗りつぶしました。8の右端が絵と右サイドの境界色なので、以下のようにしています。



単色塗りは、CTRL + U です。



画像をアップロードしてもすぐ変更されない場合がありますが、それは同じ画像名なのに中身だけが変わったので、ブラウザがサーバーからデータを取り込もうとしないからです。その場合はブラウザのキャシュを削除して下さい。

関連する記事

IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット