place

このblog（trackbackブログ）
もうちょっと色々とカスタマイズして遊びながら
一つ一つ解説しながら記事にしておこうかと
考えていたのですが、思いの他時間が無いので
中々思うように出来ません。
とゆうか、段々面倒だなと思ってきた自分が居る。

で、この間から
誰か同じような事考えたりする人も要るだろうと
trackbackブログで検索して探したりしたのですが、
中々思うようにヒットしてくれません。
つーか、あのトップページにある記事検索ですが
全然信頼性が無いのは気のせいでしょうか？
全然関係ない記事ばっかりヒットしやがって・・
（その上遅いし）

で、中には頻繁にヒットするblogがあったりするのですが、
このお方のblogの ⇒世界の端っこ行き止まり
TRACK-BACKブログの変数リファレンスで
かなり詳しい情報が掲載されておりました。

まぁ私には難し過ぎるのも確かなのですが（笑）
もっと深く理解したい人には参考になるかと。

で、もっと初心者で多少の知識があれば
blogのカスタマイズなんかも容易に出来るかなぁと
思えたのがここ⇒track-back-blog　
keep さんのページですが。
こうゆうこと書くと申し訳ないのですが
以前MRの解説されていた時のwebサイトはいつも
重くてとてもお勧めできた所じゃなかったりしたのですが、
このページはそんなことは無かったのでご安心を。
とゆうか私が言うことではないですか。

とゆうことで、
また暇な時に簡単にスタイルシート弄って遊びます。

２つスタイルシート作ったけど
ちょっと・・あじけない。
そんな気がしたので
ヘッダー部分に画像でも。
使用したのは右上の画像。
100×100（ピクセル）の物。

スタイルシートの記載方としては

と、いれればそれだけで背景の指定は完了なのですけど、
これだけだと少し崩れるし余分な表示とか出てきます。
取り敢えず横方向にだけ並べるように
（要するに縦方向は繰り返さない）

と追加。

この２行で画像の表示と横方向への繰り返しは完了。
ただこのままだとデフォルトのテンプレートのサイズが反映されるので画像の大きさによっては画像が途中で切れていたり又は寸足らずで背景色がはみ出したりするのでマージンとか調整した方が良いとかと。
今回は H1要素 の padding を少し調整しました。（デフォルトは20px）

今回の画像の縦が100ピクセルの場合は 17px で指定すれば丁度画像と背景の縦幅は揃うと思います。

んでも背景の色が少し出ていた方が見栄えが良いかなぁと今回は 18px で指定して画像の下にラインが出るようにしました。

以下が今回のヘッダー部分のソースです。

/*******************************************************
header * title
*******************************************************/
#header {
background:#f63;
background-image: url("http://track-back.net/fault/img/3/ff05.gif");
background-repeat:repeat-x;
margin:0 0 30px 0;
}
H1 {
padding:18px;
margin:0px;

/****変更箇所はここまで*************
***********************************/

背景にもっと横幅の大きい画像使う場合は
repeat-x を no-repeat と指定すれば１枚のみ表示されます。

ただ、画像のアップロードが横幅365ピクセル以下じゃないと出来ないのでもっと大きいのは別のサーバー等から呼び出さないといけないと思います。

それとファイルサイズ200kb以下 ってことだけど、そんな大きな容量の物使うと重くて重くて閲覧者がとてもストレス溜まるのでお勧めできません。せめて50kb以下に（願）


今回使わせて頂いた画像は素材屋さんで拝借してきたものですのでこのblogからの転用は止めてね（はぁと）

ここに↓あります。

FULL HOUSE
http://hearts69.hacca.jp/about/jamjam.html

黒背景に
文字等はオレンジで統一したスタイルシート。

━━━━━━━━━━━━━━━━━
CSS ソース は ここから下。
━━━━━━━━━━━━━━━━━ 続きを読む...

単純にデフォルトスキンのスタイルシート部分の
背景色と文字色を変更しただけです。

━━━━━━━━━━━━━━━━━
CSS ソース は ここから下。
━━━━━━━━━━━━━━━━━ 続きを読む...