忍者ブログ
壱岐君、退陣ゃ テストブログ TEST_02
ともだちは神になり人類は滅亡する計画。この言葉の意味が分りました。  ~ 各ブロックを確認しやすいように色分け & 文字色クッキリ ~
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

このテンプレは、記事中に使う画像に対してborderが効かないようになってる。

<Img Src="" Border=0> ← このBordeが0だろうが10だろうが、
周囲に線は表示されない。

なので、それは俺にとっては不自由なので、この規制を解除する。

CSS部

/*-------------------------------------------------------
画像
-------------------------------------------------------*/
img,
a img {
     border: none; 
}



  この部分がborderを無効にしてる

この一行 border: none; を削除、または none だけでも削除すれば
イメージタグのborderが有効になる。

あっ!
IE系だと有効にならない(枠線が表示されない)?。要調査。




あー、わかった
none だけの削除では、IEの場合だけborder有効にならない。
なので、 border: none; 丸ごと一行削除で。

拍手[0回]

Firefoxで見ると、サブタイトル部分が下に落ちてる。




修正後





/*-------------------------------------------------------
ヘッダー
-------------------------------------------------------*/
/*タイトルブロック*/
#TopBlock {
     width: 910px;
     height: 120px;
     background-color:#FFFFFF; /* ヘッダーの背景色です*/
     text-align: left;
     margin: 0px;



赤文字部分、ヘッダー部の高さ指定を 90px → 120px に変更。

Firefoxは、段組やTableタグの高さの数値指定があると、
キッチリそれに従ってその指定数値で区切って表示してしまう。

高さ指定数値以上の大きな画像や多くの文字数があっても容赦なく、
ハミ出したり隠れて見えなくなったりする、そんな仕様。

IEやOperaは、指定数値より中味の大きさに従って表示することが多い。
よく言えば『柔軟』、悪く言えば『身勝手』な仕様。

拍手[0回]

CSS見たら、こーなってますね
/*-------------------------------------------------------
ヘッダー
-------------------------------------------------------*/
/*タイトルブロック*/
#TopBlock {
     width: 910px;
     height: 90px;
     background-color:#f0f0f0; /* ヘッダーの背景色です*/
     text-align: left;
     margin: 0px;
/*--------- タイトルバックに画像を使う場合はここを修正してください
     background-image:url('http://file.sala.ya-gasuri.com/psala441291.jpg');
-----------*/

     background-repeat:no-repeat;
background-position:http://file.sala.ya-gasuri.com/psala441291.jpg;
}


こーしてみましょー
/*-------------------------------------------------------
ヘッダー
-------------------------------------------------------*/
/*タイトルブロック*/
#TopBlock {
     width: 910px;
     height: 90px;
     background-color:#f0f0f0; /* ヘッダーの背景色です*/
     text-align: left;
     margin: 0px;
/*--------- タイトルバックに画像を使う場合はここを修正してください
-----------*/
     background-image:url('http://~~ ヘッダー画像URL~~.jpg');

     background-repeat:no-repeat;
     background-position: ;

}


赤文字部分が変更箇所。
青文字の部分(http://file.sala.ya-gasuri.com/psala441291.jpg)は不要。
ここに有っても意味無い、有るべき記述じゃない。

background-position:は、背景画像の表示位置を指定するもの。
たぶん、これ無くても平気。ってか、このテストブログでは削除しちゃってる。

拍手[0回]

[4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14
カスタマイズ実験場
上部に記載するプラグインの説明文:
下部に記載するプラグインの説明文:
カレンダー
上部に記載するプラグインの説明文:
10 2024/11 12
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
下部に記載するプラグインの説明文:
プロフィール
HN:
gonsuke
性別:
非公開
下部に記載するプラグインの説明文:
ブログ内検索
最新コメント
カテゴリー
最新トラックバック
フリーエリア カテ1
カテゴリー1のフリーアリア
下部に記載するプラグインの説明文:
フリーエリア カテ2
カテゴリー2のフリーエリア
フリーエリア ページランクテスト
フリーエリア カテ3
プラグインHTMLの編集:プラグインのHTMLを直接編集する事ができます。 カテゴリー3のフリーエリア
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
フリーエリア カテ4
上部に記載するプラグインの説明文:
プラグインHTMLの編集:プラグインのHTMLを直接編集する事ができます。
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行 カテゴリー4のフリーエリア プラグインHTMLの編集:プラグインのHTMLを直接編集する事ができます。
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
改行
下部に記載するプラグインの説明文:
ブログ内検索 カテ4
上部に記載するプラグインの説明文:
下部に記載するプラグインの説明文:
バーコード
P R
  
PR
Copyright ©   TEST_02   All Rights Reserved
Design by MMIT simple_plain Powered by NINJA TOOLS
忍者ブログ [PR]