おなまえ
Eメール
タイトル
コメント
参照先
アイコン [アイコン参照]
暗証キー (英数字で8文字以内)
画像認証 (右画像の数字を入力) 画像認証
文字色
Re: すごく参考になっています 投稿者:Neko Fumio 投稿日:2009/03/15(Sun) 15:53:51 No.4

nasi.gif 無償版QHMでHPを作り始めてまだ一週間程度なのですが、毎日少しずつ機能を覚えて頑張っています。

分からないことがあると、検索などでしらべて、こちらのサイトにたどり着きました。
とても参考になっています。ありがとうございます。

ところで、Neko Fumioさんのサイトは、見出し文字の背景に画像を使ってらっしゃいますよね?

私も設定してみようと、挑戦したのですが、うまく出来ませんでした。

background-image:url("画像");
background-repeat:no-repeat;

↑こんな感じのをcolor.cssファイルに差し込んでみたのですが、IEではうまく表示されたのに、ファイアフォックスでは、文字が下よりになってしまいました。

text-align:center や padding 設定を変更したら、画像がフォントに合わせて上下に短く切れてしまって・・・

よろしければ、見出し文字に背景をつける設定方法を教えていただけないでしょうか?
ぶしつけなお願いで申し訳ないですが、よろしくおねがいします。


Re: すごく参考になっています 投稿者:Neko Fumio 投稿日:2009/03/20(Fri) 18:40:02 home No.6

neko.gif  お役に立てて幸いです。

 そういえば、画像を使って表示した時に、画像が切れて表示したのを、分からないなりに、paddingを大きく取って調整したような気がします。
 その時試行錯誤しながらやって、それを他人に説明できるまでに、客観化して説明するところまで整理するには、大変なパワーが再度必要になるので、デザイン変更については、新たに書き進む元気がなかなか出ません。

 とりあえず今の私の設定では、
****************************************************************
#body h2{
/* font */
color:#ffffff;
font-size:18px;
padding:10px 25px;
/* background */
background-position: left;
/* borderコンテンツ内メインボーダー色設定 */
/*background-color:#1E90FF; */
/*border-bottom:double 3px #ffffff; */
/* borderコンテンツ内メインボーダー画像設定 */
background-image:url("icon_source/h2_bg.png");
background-repeat:no-repeat;
/* border */
}
****************************************************************
の様になってますね。
 左右は、あまりいっぱいに画像を作ると切れてしまうので、少し小さめに作ることと、上下は、少し大きめにpaddingを設定したような気がします。


Re: すごく参考になっています 投稿者:Too 投稿日:2009/03/24(Tue) 22:54:20 No.7

nasi.gif 返信ありがとうございます。
書き込んでから、何度も試して、

background-position:left bottom;
>padding:10px 0px 5px 30px;

を差し込んで、何とか、納得できる位置に表示する事が出来ました^^
これらの設定も画像幅、好みのフォント次第で変わるでしょうから、確かに、サイトで説明するのには大変なパワーが必要でしょうね。。。
これからも、ちょくちょく覗きに来ますので、頑張ってください。応援しています。


Re: すごく参考になっています 投稿者:Neko Fumio 投稿日:2009/03/29(Sun) 16:44:59 home No.8

neko.gif  少しはお役に立てましたでしょうか

 最近ページを更新し出すと、掲示板の迷惑投稿がむごいことになって、今までコメントをくださっていたことに気がつきませんでした。

 やっぱり、迷惑投稿対策のない掲示板では使い物になりませんでしたね。
 今回掲示板のcgiに換えました。

 これからもよろしくお願いします。


- YY-BOARD -