murmur

最近すごく気になる、情報商材の検証およびご紹介をしています^^
スポンサーサイト
この広告は45日以上更新がないブログに表示されております。
新しい記事を書くことで広告を消すことができます。
- | | - | -
JUGEPI BBSに背景画像
お助け掲示板で見たので、自分でもちょっと試して見ました。
JUGEPIの背景に好きな画像置けるんですね。

CSSに

.bbsall{
background : url(http://〇〇.jugem.cc/?image=〇〇);
}


これを入れるだけで簡単に設置できましたv(^^*) ヤッタネッ!

本当お助け掲示版ってお勉強になります。

unkさんが丁寧に説明してくれていました。

 BBSに背景

JUGEMカスタマイズ | 16:10 | comments(5) | trackbacks(0)
レイアウトを逆に(mainとsaid)
JUGEMのCSS講座楽しいですよ。
実はこの前も試して見たんですけど、又今回も新しいテンプレいじってみようかと、CSS講座へお邪魔してきました♪
で、manaは一度試して良かったものを書き留めないととても不安になるので
又ここへ載せておこうかと思います。

とりあえず詳しく見たい人は”JUGEMU CSS講座”ここへ。。。


***********************************************************
まずは
htmlの<body>の次に↓を入れて

<div id="layout">

</body>の前に↓を入れる

</div>


次はCSSを改造です↓を入れましょう

#layout{
width: 760px;
}

で、メインは500ピクセルくらいにして、sideの方もカレンダーがある事を考慮して
最低200ピクセルはほしいので考えながら横幅を決めていくと良いでしょう

mainとsideのスタイルを設定してディフォルトのplainとは左右逆のレイアウトにチェンジしてみましょう。
コードは以下のようになります。


#main {
float: right;
width: 500px;
}
#side {
float: left;
padding: 0px 0px 20px 0px;
}


floatを使ってmainのほうは右寄せ、sideのほうを左寄せに設定します。
sideは左側に配置したいので、ディフォルトのときにあったmargin-leftは削除します。
ちなみにmainとsideにあるfloatの値を逆にしてあげるだけでmainが左側でsideが右側に戻す事も
可能です。このテクニックで重要になってくるのがHTMLにも記述したページ全体を制御するlayoutエリア。
もしこれがないとmainのほうがウィンドウ右端からの右寄せ配置するのでウィンドウサイズを広げると
sideとmainの間がだんだん広くなってしまうのです。

横幅をきちんと指定したlayoutエリアが加わることにより、mainの右寄せ配置もウィンドウの
右端からではなくlayoutの右端からになるので、ウィンドウサイズを変えてもmainとsideの幅が
広くなってくるという問題が発生することはありません。

中央揃えのレイアウト

それでは今度はサイトレイアウト全体を中央揃えにしてみましょう。
ウィンドウのサイズを変えてもサイトが常にウィンドウの中央に表示させるようにします。
先ほどはHTMLにタグを付け足しましたが、このテクニックはCSSに数行付け足すだけで実現可能です。
それではまず、bodyとlayoutに新たにプロパティを付け足しましょう。


body {
background-color: #FFF;
margin: 0px 25px;
padding: 0px;
text-align: center;
}
#layout{
margin-left: auto;
margin-right: auto;
width: 760px;
}


bodyに記述した「text-align: center」でbodyタグ内にあるすべてのタグに対して中央揃えにします。
そしてレイアウト全体を制御する「#layout」に対して「margin-left: auto;」「margin-right: auto;」の
2つを付け足します。ここで左右に余白幅を自動に設定にしています。この2つを記述することで
どのブラウザでも確実にレイアウトが中央に行くようにしています。
この状態でサイトをチェックすると確かにレイアウトは中央へ行くのですが、文字を含めたすべてが
中央になってしまいます。

なぜすべて中央揃えになったかというと、bodyタグでの「text-align: center」のためです。
レイアウトは中央になってほしいですが、レイアウト内にあるエレメントは基本的に左揃えにしたいです。
そこで「#layout」に「text-align: left;」を新しく加えます。
これでレイアウトが中央揃えですが、本文は従来のとおり左揃えになりました。


#layout{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 760px;
}


**********************************************************

ε-(;ーωーA フゥ…満足。。。
ちなみに前に試したのはplainで今回試したのが桃色グラフィックでした。


JUGEMカスタマイズ | 00:11 | comments(0) | trackbacks(0)
コメント欄にひよこボタン
可愛いアイテム増えました♪
ヒヨコボタン可愛いです。。。
早く誰かに使ってほしいけど、自分で使うことになりそうですw

JUGEMカスタマイズ講座
JUGEMカスタマイズ | 11:37 | comments(4) | trackbacks(0)
| 1/4PAGES | >>


タグフレ
=========================


=========================
アドセンス




■■新着情報商材■■
NEW ENTRY
CATEGORIES
ARCHIVES
*****
googl
お勧めリンク
OTHERS
RECOMMEND

SPONSORED LINKS
googl