<< トップ画像を変更しよう! | main | 今年もキャラコン開催中!? >>

ページの幅とページ全体の寄せ方を変更しちゃうぞ!

PCテンプレカスタマイズ講座 第3回

前回のあらすじ

はじめてのPCテンプレカスタマイズに戸惑いを隠せないロベポリ。
なんとかTOP画像を変更することが出来たロベだったが・・・・・!?



いやーTOP画像を変更するだけでもずいぶん印象が変わりますね。

日本橋先生の素材が素晴らしすぎるわね。

さあ、ロベくん。ほかにテンプレート内でカスタマイズしたい箇所を言ってごらん。

大きなサイズの画像を使って記事を書きたいから、記事を書くところは もう少し広めのほうがいいかも。

ふむふむ。エントリーエリアだけを広げちゃうとサイドメニューが狭くなってしまうから、 全体的に広げてみようか。

シラッキー先生、エントリーエリアとかサイドメニューとか、いまいちわかりにくいんですけど・・・

おっと、ごめんごめん!わかりやすく画像で説明しよう。

なるほど。それで、ページ全体を広げるにはどう編集したらいいんですか?

OK!じゃあ前回同様テンプレート「custom」のCSSを見てみよう。

TOP画像のときのように、CSS内に書かれているコメントから探せばいいのね。

お!ここじゃないですか?「■ページ全体の変更方法(初期は幅950に設定されています)」

大正解!ここに書いてある説明文をよく読んで、カスタマイズしてみようか。

んーと、つまりA900と考えると、B の値は、「B+40=A」だから860ってことか。

そうそう。ここの計算式が1でもずれると、テンプレが崩れちゃうから要注意だよ。

でけた!

クリックすると拡大するよ!


あれ、でもなんかTOP画像とタイトルのところがなんか変だね・・?

ページ全体の幅を変更すると、TOP画像のサイズが合わなくなっちゃったり、 タイトルの位置がずれちゃうから、画像を作り直したり、タイトルの位置を調整しないとね。 その辺りはロベ君の宿題にしよう。

わかりました!ところでシラッキー先生、いま幅を変えたページ全体を 左寄せにしたいんですけど、そういうことも出来ますか?



これは簡単だよ。CSSの【#wrapper】の【margin:0 auto;】と書かれている箇所を 【margin:0;】に変更すればOKだよ。


よく意味はわからないけど変えてみました!


おお!ちゃんと左に寄ったね!先生。これを右に寄せるにはどうすればいいの?

これも簡単だよ。さっき変更した箇所を【margin:0 0 0 auto;】としてあげればいいんだ。

うおお!よく意味はわからないけど出来た!

このあたりは言葉で説明するのは難しいから、とにかく自分で触ってみることが大事なんだよ。 例えば、【border:2px #000000 solid】って書いてある箇所の値を【10px】に変更してみたら どういう変化をするのか、とかね。

ちょっと難しいけどチャレンジしてみるわ!

ところでポリンちゃん、テンプレカスタマイズ進んでるの?

が!ロベのカスタマイズに付き合ってたら、自分のテンプレのことすっかり忘れてた!!

でた〜!ポリンのスットコドッコイ!

じゃあ、次はポリンちゃんのやりたいカスタマイズをやっていこう!

お願いしま〜〜〜す!!


▼現在ブログデザインコンテスト実施中!▼

コメント
コメントする
※JUGEMの機能に関するご質問などはお問い合わせフォームまでお願いします。









この記事のトラックバックURL
トラックバック
関連の記事

最新の記事
StepUP!JUGEMからの
お知らせ
■ お勧めブログ投稿フォーム■
プロフィール
カテゴリーから記事を読む
月別で記事を読む
Stepup!JUGEM内で検索