ユリノキのブログ一覧

めでたくヘッダ画像も入りました。

今回のヘッダはあえて顔を見せないことによってどんな顔なんだろうと気になるように仕掛けてありますが、どうみてもリボフロのゴシプリ美樹です。本当に(ｒｙ

ヘッダの下部領域がもう少し取れれば写真も自然に入ったのかなぁなどと。

撮影裏話。

リボフロは足組めません。

でも足組んでるように見えるでしょ?

足のパーツ外して組み合わせてるだけ。
固定されてないｗ

最初、ISO1600の露出優先モードで写真取ったら、ノイズが酷くて使い物になりませんでしたｗ

なので、結局、ISO100でシャッター優先。露出ドアンダーで暗い写真にして、そこからコントラストと明るさ弄ってやりました。

んー、けちつけるならもっとスピーカーに光を当ててやりたかったな。

右側にスピーカーユニットおいてあるんだけど、真っ黒でみえないｗ

まぁ、現在愛娘を御身請けするために貯金している最中なので、愛娘を御身請けするまでの仮ヘッダですかね。

もちろん、御身請けしたら愛娘に変えますよ?ｗ

もう御身請けしたい娘は決まってるんだ。

オプションも決めてあって、注文から納期三週間って言うのも調べてある。

だがしかし、在庫切れで御身請けできない状況になってるのさｗ

それ以前に御身請け予算がまだ貯金できてないのですがね。

しかし・・・10万は高いよなぁ・・・

本体は6万、オプションで2万。
残りはお洋服にまわすつもり。
Volksのホームページでまだ見ぬ愛娘に思いを馳せるのみ・・・

はぁ・・・「くん」が欲しい。
狸顔がたまらなく可愛いのよね。

衝動的にCSSを変えてみたくなる。

とりあえず画像を使用しないでここまで作ってみたものの・・・
ちょっとオサレすぎる?(爆)

配色だけで、1時間半くらいかな。

まだ何シテルの配色が気に食わないんだけど一応公開。

一時的にピンクと白になってたのはCSS変更中だったから。

見れた人はレアですよ～(何

ヘッダ画像をかんがえないとなぁ・・・

まぁ、ここのところ、ちょっとそれが本職になりつつあるので自分勝手に表記できないのがむずかゆい事、むずかゆい事。

ファン人数の色だけ変えたいんだけど、属性が友達人数と一緒になってるもんだからむぅ。

前のもCSSファイル書き出してあるし、画像はアップロードしっぱなしだからすぐに変えられるのも嬉しいね。

さて、ヘッダの大きさってどこまで対応だっけ?

高さと横幅。覚えてない。

ずいぶんあっさりしたなぁ・・・

ちょっとサイケデリック?ｗ

もういい加減自分のページのスタイルシートを弄るのに飽きましたｗ

折角前回で背景の色を変えたり、イメージを挿入したりしたので、今回はその背景が見えるように、記事の背景を透過させてみましょう。

ちなみに、ページの背景とか全部透過してしまうので、透過させたくない部分はそれぞれ編集する必要があります。

まず透過の編集。
ページの基本の設定画面を開きます。



今回編集する箇所は
・ユーザー領域
です。

入力する命令文は一行。
background-color:transrate;
のみです。

その2でもでてきたbackground-color命令を使います。
カラーナンバーの変わりにtransrateを指定する。
つまりは背景を透明に設定するってわけです。

ちなみに、ブログの記事の背景に関しては
[ブログ]の設定画面の
・ブログ本文
投稿した日付（上の何月何日の帯）は
・ブログ日付
下のPostedとかコメントとかの場所に関しては
・ブログ情報

タブの左から掲示板までの4つに関しては
[タブ]の設定画面の
・タブ(通常)のスタイル
クリックしたところを変化させたいなら
・タブ(選択中)のスタイル
一番右のプロフィールのタブは
・右端のタブ

ブログのタイトルと同じアイコンのついている場所に関しては
[コンテンツ共通]の設定画面の
・コンテンツタイトル
タグの背景に関しては
・タグ
タグから派生する情報（そのタグのついたブログなどの情報)に関しては
・関連タグ
・関連タグリスト

愛車紹介のページの車名のところの帯に関しては
[愛車紹介]の設定画面の
・愛車リスト-愛車名
写真の背景に関しては
・愛車リスト-愛車の写真
写真のすぐ下の愛車の紹介文に関しては
・愛車リスト-愛車の紹介文
その下の登録した日付に関しては
・愛車リスト-愛車の登録日
プロフィールとかパーツレビューとかの帯に関しては
・愛車コンテンツ切り替え
愛車名をクリック後の紹介文全文の背景に関しては
・愛車紹介文
形式、所有形態、属性、購入年月日のところは
・愛車紹介プロフィール
パーツレビューのカテゴリのところは
・パーツレビューカテゴリ内容
パーツレビュー一覧の背景に関しては
・レビュー一覧
パーツレビューの作業日やフォトギャラリーの撮影日のところの帯は
・ギャラリー作業日
パーツレビューの写真の背景は
・ギャラリー写真
パーツレビューやフォトギャラリーの本文の背景は
・ギャラリー本文

コメント領域全体に関しては
[コメント]の設定画面の
・コメントテーブル
コメントを下さった人の名前の帯は
・コメントタイトル
コメントの日時の帯は
・コメント日付
コメント内容の背景などは
・コメント表示

プロフィールページの自分の名前のところの帯は
[プロフィール]の設定画面の
・ユーザー名表示
ページ全体の左半分は
・左カラム領域
右半分は
・右カラム領域
プロフィール全体に関しては
・プロフィール本文
プロフィールの左側（誕生日とか性別とか）の背景には
・プロフィール見出し
それぞれの内容に関しては
・プロフィール本文
その下のみんカラの登録日は
・みんカラ参加日
ブログやパーツレビューなどの最新投稿一覧のところは
・投稿記事テーブル
お友達やグループの名前の背景は
・お友達・グループ
ファンとお友達の人数の背景は
・お友達・ファン人数

プロフィール以外のページの右の部分、広告の下のスペースの見出しの設定に関しては
[サイドメニュー]の設定画面の
・サイドメニュータイトル
全体の背景は
・サイドメニュー
カレンダーは
・ブログカレンダー
何シテル？の背景には
・何シテル？領域
何シテル？の下の名前の背景には
・ユーザー名領域
リンクカテゴリ名の帯は
・リンクカテゴリ

を編集します。

それぞれをその２の内容で編集すれば、色や画像は揃いますね。

次のその４ではそれらの配置を弄り、見た目を整えていく予定です。

そろそろけーねフォルダの中身がなくなってきました＜どうでもいい

ここらでひとつ、御意見を伺いたいなと。

そのものずばり！

このCSSの組み方の説明の是非について。

こちらとしては、5月までに変えたいけど、CSS弄ったことないから何してよいやら･･･という人の為の解説というスタンスでやっております。

なんで、細かいことや、あらかじめ用意されたツールでできることは省略し、とりあえず形になる程度の解説しかしないつもりですし、それしかできないものと考えております。ハイ。

んで、本題。

本当にこのCSSの解説って必要？どーよ。

自分でやってて、コレ本当に必要なのかなって思ってきました。

とりあえず6日午前0時まで0コメだったらこの記事もろともCSS講座は凍結、あるいは削除という形をとろうかなと。

どう思います？いや一人でも必要としてくれるのならば続けるつもりではありますが、果たしてニーズはあるのか？

今回は全体の背景を変えてみます。


前回と同じく、ページの基本の設定画面を開いてください。


また同じ場所、
・ページBody
を編集します。

まずはうちのCSSの背景のところをみてみましょう。


#1 _background:#000021;←ブラウザハック
#2 background:#000021;←背景の色を指定
#3 background-image:url('～.jpg');←背景画像挿入
#4 background-position:right bottom;←画像の位置を指定
#5 background-repeat:no-repeat;←画像の繰り返しオプションを指定

上から解説していきます。

#1と#2はセットで考えてください。
やってることは同じ、背景の色を指定しています。
#1は本来なら不要ですが、FireFoxなど一部のブラウザではCSSソースの解釈の違いで色がでないことがあるので、専用の指示を書いてあげています。

#3は画像の挿入を行っています。
どこに画像使っているかって？
右下の「日直」って実は画像なんですｗ
スタイル用画像から画像をアップロードし、表示されるURLを記入します。

#4ではその「日直｣をどこに置くかを指定しています。
これは：x座標　y座標と指定するので必ず　横　縦　と指定してください。
私の場合、右端、最下部なのでright　bottomですが･･･
左端、最上段を指定したいときはleft　topとなります。
また、ピクセル単位でも場所を指定できます。大雑把に適当に配置してからちょこちょこと直すのがいいでしょう。
真ん中にもって行きたい場合は#4自体不要です。

#5に関しては、画像の繰り返しオプションを指定します。
指定しないと、タイル状に画面いっぱい敷き詰められます。
私のスタイルシートの場合はno-repeatとなっているので、繰り返しません。
これをrepeat-yとすると、縦に並び、repeat-xとすると横に並びます。
また、ピクセル単位で場所を指定して、no-repeatを指定するとスクロールと一緒に画像がくっついてくることがあります。
コレを回避したいときは
background-attachment:fixed;
という一文を加えれば背景は固定され、スクロールにくっついてくることもなくなります。

どうです？
背景は変わりましたか？