« 夢を操作する | トップページ | 背景画像食い込み訂正(涙) »

2004.05.12

カスタマイズ12(プロフィール)

本文をカスタマイズしたら、せっかくだからプロフィールもデザインしちゃいましょう。
こちらは本文と違って、比較的シンプルなスタイルシートなので、かなりいろんなことができると思います。

スタイルシートのファイル名は、本文の方と一緒にならないよう違うファイル名にします。
私の場合はintrostyle.cssにしました。
あとは、以下のタグを「コントロールパネル」→「プロフィールの編集」で「興味のあること」あたりにでも書いておけばオッケーです。

<link href="http://shinobu.cocolog-nifty.com/apty/introstyle.css"
rel="stylesheet" type="text/css">

主なタグは以下の通り

入れ物部分
htmlスクロールバー
bodyページ全体背景など
#sideサイドバー幅・背景など
#main本文部分幅・背景など
#containerコンテンツ部分幅・背景など
テキスト部分
H1タイトル背景・フォントなど
.content H2本文タイトル背景・フォントなど
.content P本文背景・フォントなど
.sidebar H2サイドバータイトル背景・フォントなど
ULサイドバー本文背景・フォントなど(リストごと)
LIサイドバー本文背景・フォントなど(行ごと)
A:linkリンクフォント・背景など
A:visited訪問済リンクフォント・背景など
A:activeアクティブリンクフォント・背景など
A:hoverホバーリンクフォント・背景など
.photo画像(写真)位置・ボーダー線種など

各々の幅や背景色、フォントなどを指定してあげればいいんです。
これはもうセンス次第でどうにでもデザインできちゃうので、ガンガンいじり倒しちゃいましょう~~~。
って、これで説明終了、ではあんまりなので、私のスタイルシートを紹介します。
あんまり意味もなく細かいとこまで指定してますが、「こんなことができる」ということで、適当に遊んでいます(笑)。

スクロールバーの設定

html {
scrollbar-base-color: #FFFFFF;
scrollbar-shadow-color: #66CC66;
scrollbar-darkshadow-color: #008000;
scrollbar-3dlight-color: #66CC66;
scrollbar-arrow-color: #008000;}
カスタマイズ4
を参照してください

ページ全体背景など

body {
background: #FFFFFF url(about.jpg) no-repeat fixed left top;}
背景色を白に
背景画像は繰り返しなしで左上に固定

サイドバー幅・背景など

#side {
width: 210px;}
タイトル背景画像のサイズに合わせて
幅を210pxに

本文部分幅・背景など

#main {
width: 550px;
margin-left: 220px;}
サイドバーとの間が少し空くように
左マージンを220pxに

それぞれのパーツごとに背景を指定することもできるし、幅を変えたりすればかなり個性的なことができると思います。

タイトル背景・フォントなど

H1 {
color: #ffffff;
font-size: xx-large;
font-family: "Arial", "Helvetica", "sans-serif";
padding-top: 10px;
padding-bottom: 130px;
padding-left: 10px;}
文字色は白
サイズとフォントを指定
画像が見えるように下マージンを130pxとりました

本文タイトル背景・フォントなど

.content H2 {
color: #006600;
font-size: 16px;
font-family: "Arial", "Helvetica", "sans-serif";
background-image: url(abtytle.jpg);
background-repeat: no-repeat;
height: 22px;
padding-left: 5px;}
文字色は緑
サイズはpxで固定するのはお勧めしませんが、背景画像の高さを22pxにしてるのであえて・・・
左マージンを5pxとって、ビッチリくっつかないようにしました

本文背景・フォントなど

.content P {
color: #333399;
font-family: "Arial", "Helvetica", "sans-serif";
background-color: #FFFFFF;
padding-left: 5px;
line-height: 150%;}
背景画像を固定してるから、文字の背景色を指定しました
左マージンを5pxとって、行間を%で指定

サイドバータイトル背景・フォントなど

.sidebar H2 {
color: #006600;
font-size: 16px;
font-family: "Arial", "Helvetica", "sans-serif";
background-image: url(sidebgab.jpg);
background-repeat: no-repeat;
height: 21px;
padding-left: 5px;}
文字色は緑
サイズも背景画像のためにpxで固定
やはり左マージンを5xpあけてます

サイドバー本文背景・フォントなど(リストごと)

UL {
font-size: x-small;
font-family: "Arial", "Helvetica", "sans-serif";
background-color: #FFFFFF;
padding-left: 5px;
margin: 0px;
line-height: 150%;}
ここは背景画像がないのでフォントは相対的なサイズ指定
左マージン、行間は他の場所と同じ

各リンクフォント・背景など

A:link {
color: #006600;
text-decoration: underline;}

A:visited {
color: #003333;
text-decoration: underline;}

A:active {
color: #009900;
text-decoration: underline;}

A:hover {
color: #ffffff;
background-color: #66cc66;
text-decoration: none;}
リンク色はお好みで
アンダーラインを入れたり背景色をつけたり
背景画像も指定できます

リンク色は「UL A:link」「.content P A:link」などにすると、サイドバーのリンク色だけとか本文のリンクだけとか個別に指定できます。

画像(写真)位置・ボーダー線種など

.photo {
text-align: center;
}
写真はなんとなく
真ん中に置いてみました(笑)

|

« 夢を操作する | トップページ | 背景画像食い込み訂正(涙) »

ウェブログ・ココログ関連」カテゴリの記事

コメント

しのぶさ~~ん、お疲れ様でした~(*^_^*)
私のサイトも方も、変更完了しました!

コメント欄の横幅もスッキリした感じです。。

・・・そして、面白サイトでしばらくアブラを売ってしまいました(笑)

ありがとうございます♪

投稿: 檬花 | 2004.05.13 22:56

もう本当に大変ご迷惑をおかけしちゃいました(大汗)。
最近どうも、おバカに加速がついてきたようです。
ダンナは「前からだ」って言ってますが
前はもうちょっとマシな部分もあったような・・・
いえ、やっぱり前からかも知れません、わはははは・・・。

投稿: しのぶ | 2004.05.14 01:34

 プロフィールもいつか何とかしたいと思っていたのです
が、どこから手をつけていいのかさっぱりわからないで
いました。今度試してみます。

 bodyに背景画像を置くという話ですが、そうすると
画像はスクロールしてくれないのですよね。という事は
背景画像は、文字が見やすいように薄めにしないといけ
ない訳で。

 背景を分割するのは、面倒なのですが、背景を意図的
に見せたい場合は、今までの方式が良いなあと思った
次第です。

 

投稿: つ一とん | 2004.05.14 21:32

>つ一とんさん
ご迷惑をおかけしております・・・・。

プロフィールのページで
BODYでの背景画像をスクロールさせるには
「background: #FFFFFF url(about.jpg) no-repeat fixed left top;」
というタグの「fixed」をはずして
「background: #FFFFFF url(about.jpg) no-repeat left top;」
というように書いてあげれば、
他の文章たちと一緒にスクロールしてくれます。
たった今、スクロールするようにしてみましたので
良かったら見てみてねっ。

私のココログ本ページはスクロールするタイプ、
プロフィールはスクロールしないタイプ、と
あえて違う表示方法を試してみたわけです。

おそらく、というより確実に(汗)、ココログ本文でも
画像を切り分けなくともうまくできる方法があるようです。
ただ、問題の(涙)「transparent(透明)」タグが
どの環境でもオッケーなのか、
もう少し確認したいところではあります。

投稿: しのぶ | 2004.05.14 22:21

しのぶさん、おはようございます。
お訪ねくださってありがとうございました。
も~~ぅ半泣き状態でした・・・・


BODY {
background-color: #FFFFFF;
background-image: url("intro.jpg");
background-position: right top;
background-repeat: no-repeat;
}

#container {
background-color: transparent;
}

こんな・・・かんじなんですが(/_;)
アドバイスをお願い致します。

投稿: 常葉 | 2004.12.04 08:30

しのぶさん、
原因がわかりました♪


プロフィールの設定で
「プロフィールページ」の
「プロフィールページのスタイルを選んでください」
を『Classic』変更したら
画像が途切れないで表示されるようになりました。
ありがとうございました。

投稿: 常葉 | 2004.12.04 10:17

■しのぶさん、先ほどは常葉さんのサイトで
ご指導をいただき、ありがとうございました。
心から感謝の気持ちでいっぱいです。
これからも、どうぞよろしくお願いします 
おかげさまで、プロフィールの背景も反映されました。
もう~嬉しくって武者震いをしています(爆)

あの~、さっそくで申し訳ありませんが
気になっていた疑問がひとつあります(泣)
それはcssというフォルダをつくって、そこにファイルと背景画像を
アップロードしましたが、そのあとファイルの確認のため見てみますと
つくったはずのcssフォルダが見当たりません(◎_◎)
もちろん背景の画像も見当たりません。どうしてでしょうか?
そのかわり、見慣れないアヤシイフォルダ(ca*****)(爆)
というのが存在していました^^;
う~ん、とっても悩んでしまいます~。
もしかしてcssという名前のフォルダのせいですか???
トンチンカンな質問をして、ごめんなさい。
教えていただけたら嬉しいです。  Rita

投稿: Rita | 2004.12.04 19:40

>常葉さん
こちらこそ、気づかなくてすいませんでした(汗)。
ソースを拝見したときに、ココログ本ページと同じ
スタイルシートが書いてあったので
その時点で「あれ?」と思えば良かったんですが・・・。
なんだか、逆にいろいろ戸惑わせてしまってすいません(涙)。
これに懲りずに(大汗)、いろいろ試してみてくださいねっ。

>Ritaさん
こちらこそ、これからもよろしくお願いいたしま~す!

http://help.cocolog-nifty.com/help/2004/04/post_3.html
こちらのココログヘルプにも乗ってるんですが、
拡張子が、.xml .rdf .css .html .inc のファイルは表示されず
と同時に、新たに自作したフォルダも表示できないので
削除ができないんだそうです。
なんだそりゃ!って感じですが、そういう仕様らしいです(汗)。
そのうち、この辺も改良してくれるといいんですけどね~。

catナンタラカンタラ(笑)というフォルダ、
Ritaさんのとこでは2つありませんか?
これって、カテゴリー別のフォルダなんですよ。
Ritaさんは今のところ、カテゴリーが2つありますよねっ。
そのカテゴリーをクリックすると
http://cocorita.cocolog-nifty.com/blog/cat2057971/index.html
こんなURLになるでしょ。
ほら、このURLにcatナンタラカンタラという名前がっ!!!
ですから、これは誰のココログにもあるフォルダなので、
決して削除してはいけません(笑)。
他にも「2004」ってフォルダができてませんか?
それは月別過去ログのフォルダみたいです。

投稿: しのぶ | 2004.12.04 20:13

◆しのぶさん、
アドバイスを沢山頂きましてありがとうございます。
お蔭様でナンとかなりました。
すっごく嬉しいです♪
これからも、よろしくお願い致します。

ご迷惑をおかけしておりますが、
もう一つ教えていただきたいことがあるのですが?
私のPCでは、プロフィールの画像の一番上のところが
5mmほど間隔があいているのですが、
これは、どのようにして解消したらいいのでしょうか?
ご面倒をおかけいたします 

投稿: 常葉 | 2004.12.05 08:26

>常葉さん
こちらこそ、これからも仲良くしてくださいねっ。

さて、プロフの画像なんですが、
この画像自体が上に5mmほど空白があるようです。
ですので、この空白をトリミングとかで切り取ってあげれば
上の空白はなくなるはずですよ~。

投稿: しのぶ | 2004.12.05 13:25

しのぶさん、こんにちは~(=^^=)
このたびは、とってもお世話になりました。ありがとうございます。
でも、まだ果てしなく不安な世界ですぅ(*_*)
すみません、これからもどうぞ、教えてくださいね。

日記の、細長いタイトル部分に画像を貼りたいのですが、
画像ファイルのアップと、つぎのcssファイルをアップ
することで大丈夫でしょうか?

◇--◇--◇--◇--◇--◇--◇--◇

content H2 {
color: #666666;
font-size: 14px;
font-family: "Arial", "Helvetica", "sans-serif";
background-image: url(upfile/k-dot4-1.gif);
height: 22px;
padding-left: 5px;}

◇--◇--◇--◇--◇--◇--◇--◇

なお、画像は16×16の小さなものですので、
background-repeat: no-repeat; は無記入でもよろしいですか?

それから、もしまた↑画像を入れ替えたい場合、
cssファイルは上書きされるのですか?
まだスタイルシートと付き合って数日ですので
頭の中がボォ~としちゃっています(泣)
(あっ、いつものことですがf(^-^; ポリポリ)
アドバイス、どうぞよろしくお願いします  Rita

投稿: Rita | 2004.12.06 11:44

しのぶさん・・・(^^ゞぽりぽり
ありがとうございます、
大変失礼いたしました!!
スタイルシートの問題ではなくて
画像自体の問題だったんですね !(^^)!
そそっかしくて、ごめんなさいね。

お蔭様で、綺麗に表示されるようになりました。
ありがとうございます。

投稿: 常葉 | 2004.12.06 12:41

>Ritaさん

>>日記の、細長いタイトル部分に画像を貼りたいのですが、

ええと、これは各記事のタイトル、
Ritaさんのブログで言えば「モミの木」の部分でしょうか?

記事(日記)のページとプロフのページとでは
スタイルシートで指定してるとこが全然違うんです。
だからプロフと記事とでは、cssファイルを別に作った方がいいかも知れませんね。
私は記事には「mystle.css」を、プロフには「intro.css」というように別々に作っています。
記事のページのフォントについては、こちらをご覧くださいね~。
http://shinobu.cocolog-nifty.com/apty/2004/02/post_10.html

記事の各タイトルは「content H2」ではなく、「content H3」なんです。
そして、フォントや背景を設定するには「.」を付けます。
これは業界用語(笑)で言うと「idを定義する」と言うんですが
ここは無視していいです(笑)。

とにかく、ここのデザインを変えるには
「content H2」ではなく、「.content H3」に変えてみてください。
こんな感じね。

.content H3 {
color: #666666;
font-size: 14px;
font-family: "Arial", "Helvetica", "sans-serif";
background-image: url(upfile/k-dot4-1.gif);
height: 22px;
padding-left: 5px;}

Ritaさんのおっしゃるとおり
background-repeat: no-repeat; 
は、はずした方がタイトル全体に背景が繰り返し表示されるから、
そっちの方が断然いいですねっ。

あと、できれば、間違いのないように画像の指定は
「http」から始まるurl(絶対パス)で書いた方がいいかなって思います。
たとえば、こんな感じ?
background-image: url(http://cocorita.cocolog-nifty.com/blog/upfile/k-dot4-1.gif);

投稿: しのぶ | 2004.12.06 18:19

しのぶさ~ん、日記のタイトルに画像が貼れましたぁ~\(*^^*)/ 
きゃぁ~、嬉しいですぅ、どうもありがとうございました。
ちょっとだけスタイルシートの入り口が見えてきました♪
これから、練習のつもりで、いろいろ入れ替えてみます(#^ー゜)v
どうぞ、これからも見捨てないでくださいね^^;
しのぶさんとお知り合いになれて、ほ~んとうに幸せです。
右も左もわからない私に、丁寧に教えてくださって
ありがとうございました。=*^-^*=にこっ♪

投稿: Rita | 2004.12.06 19:35

>常葉さん
あれこれやってると、だんだん訳分からなくなってきますよね。
私も今までに、いろいろやらかしているので(大汗)
これに懲りずに、どんどんチャレンジしてみてくださいねっ。

>Ritaさん
うんうん!これでバッチリですねっ!
この調子で、サイドバーのタイトルを変えたり
まだまだいろんなことができますよ~。

また何か不明な点があったら、遠慮なく!お聞きくださいねっ。
うまく説明できるか分からないけど(汗)、
お互いあれこれやってみましょうねっ。

投稿: しのぶ | 2004.12.06 23:06

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12358/580051

この記事へのトラックバック一覧です: カスタマイズ12(プロフィール):

« 夢を操作する | トップページ | 背景画像食い込み訂正(涙) »