CSSでタイトルバナーに画像を表示する

CSSでタイトルバナーに画像を表示する

Posted at July 21,2006 1:31 AM
Tag:[CSS, Image]

デフォルトテンプレート変更後ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショットのように画像を表示することができます(季節に合わない画像ですいません)。
なお画像は Link Style 様より利用させて頂きました。ありがとうございました。

1.基本的な設定方法

バナー部分のHTMLと画像を表示するCSSの基本的な構造は次の通りです。

HTML

HTMLは h1 タグと a タグでブログのタイトルをリンク表示しているだけです。

<h1><a href="http://~/">タイトル</a></h1>

CSS

この h1 タグに対し、下記のような CSS を設定すれば背景画像(リストの「画像ファイル名」)が表示されます。リストは画像以外のプロパティを省略しています。

h1 {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

プロパティの説明

CSS で設定する各プロパティの内容は次の通りです。

background-image
画像ファイル名を指定します。画像ファイル名の部分にはURL指定(例:http://domain/images/hogehoge.gif)・ドキュメントルートからの絶対パス(例:/blog/image/hogehoge.gif)・スタイルシートからの相対パス(例:../images/hogehoge.gif)が指定できます。
background-position
画像の表示開始位置を指定します。ここではleft(水平位置が左端)と top(垂直位置が上端)を指定しています。右下端から開始する場合は「right bottom」とします。記述順序は基本的に1番目が水平位置、2番目が垂直位置です。% や px 指定による設定も可能ですので、表示位置を細かく決めたい場合はこちらの方が良いでしょう。ご自身で調べていろいろお試しください。
background-repeat
画像の繰り返しを指定します。バナーのサイズに等しい画像を表示する場合はサンプルのように「no-repeat(繰り返しなし)」とします。バナーからはみ出した部分は表示されません。
バナーより小さい画像で繰り返し表示をするには、水平方向に繰り返す場合は「repeat-x」、垂直方向に繰り返す場合は「repeat-y」、水平・垂直方向に繰り返す場合は「repeat」とします。

プロパティをまとめる

各プロパティを background プロパティで次のようにまとめて記述することも可能です。

h1 {
    background: url("画像ファイル名") no-repeat left top;
}

サブタイトルがある場合

また、タイトルバナーにはタイトルの下にサブタイトルを表示している場合が少なくないと思います。

<div id="banner">
<h1><a href="http://~/">タイトル</a></h1>
<h2>サブタイトル</h2>
</div>

このような場合は h1 タグではなく、タイトルおよびサブタイトルを括っている div タグがあると思いますので、この div タグ(の id 属性)に対してスタイルを設定します。

#banner {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

2.公開テンプレートの設定方法

公開テンプレート変更前デフォルトの状態では左のスクリーンショットのように青色の背景色を設定しています。
参考までに、テンプレートのHTMLは1項の最後で説明したようにタイトルとサブタイトルを div タグで括った構造になっています。

<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>

タイトルバナー部分のCSSは下記のようになっていますので、赤色の背景色設定用の background プロパティを削除します。
そして、そのすぐ下に記述しているコメントアウトマーク(「/*」と「*/」)も削除してください。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}

このコメントアウトされていたプロパティを利用して画像表示の設定をします。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

公開テンプレート変更後これで左のように画像が表示されます。

3.Movable Type デフォルトテンプレートの設定方法

デフォルトテンプレート変更前Movable Type のデフォルトテンプレートも左のスクリーンショットのように青色の背景色を設定しています。参考までにデフォルトテンプレートのHTMLは下記のようになっています。
<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>

先程よりやや複雑な構造ですが、スタイルは一番外側の div タグの id 属性(banner)に設定します。スタイルシート(styles-site.css)のタイトルバナーのCSSに対して赤色を削除します。

#banner {
    width: 710px; /* necessary for ie win */
    background: #a3b8cc;
}

そして2項と同様、画像表示の関連プロパティを追加します。

#banner {
    width: 710px; /* necessary for ie win */
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
}

デフォルトテンプレート変更後これで左のように画像が表示されます。

4.リキッドレイアウトの場合

上記は固定レイアウトをサンプルに説明しました。リキッドレイアウトの場合はディスプレイの解像度によって横幅がかなり長くなる可能性があるので、横長の画像を用意するか、水平方向の繰り返し表示を指定するようにしましょう。

5.画像が垂直方向に収まらない場合

苦労して作成した画像がタイトルバナーの縦方向に収まらない可能性もあります。このような場合、タイトルバナーの縦幅を広げます。公開テンプレートであれば、

/* タイトルバナー */
#banner {
    padding: 30px 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
    text-align: left;
}

と、padding プロパティの上下方向の値を増加させることでタイトルバナー全体の縦幅が広がります。

6.タイトルを任意の位置に表示する

5項の設定ではタイトルは左中央に配置されます。タイトルを左上や右上等に表示する場合は、5項の padding プロパティを修正します。ここでは左上に表示する例で説明します。

まず、5項で修正した padding プロパティ

padding: 30px 15px;

の値は下記の意味になります。

  • 30px:上下のパディング
  • 15px:左右のパディング

なお、これは上下パディングと左右パディングを一括設定する場合の省略形で、

padding: 30px 15px 30px 15px;

と書いても同様の効果があります。指定する順番は、左から時計回りに「上・右・下・左」です。
ちなみにパディングを個別に指定する場合は、

padding-top: 30px;
padding-bottom: 30px;
padding-left: 15px;

とします。なお右のパディングについては

text-align: left;

と、テキストを左寄せにしていることと、テキストの右側は他のプロパティでブログ全体の幅を指定しているため、省略しても問題ありません(テキストを右寄せにする場合は必要になります)。

さて、タイトルを左上寄せに配置するには、左パディング・上パディングを少なくし、下パディングを増やせばよい訳です。

padding: 15px 15px 45px 15px;

下パディングの値が少ないと画像の表示範囲が少なくなりますのでご注意ください。
左右のパディングは一括して設定できるので、

padding: 15px 15px 45px

としても良いです(2番目の値が左右パディング)。

なおテキストを右寄せにする場合は、

text-align: right;

とします。

関連記事
トラックバックURL


トラックバック

タイトルバナーの壁紙設定 from 私立大学職員の情報オフィス
PRmanです。 ブログカスタマイズ、タイトルバナーに画像を表示しました。 なんだかわからない画像ですが、 [続きを読む]

Tracked on May 13, 2007 1:06 PM

CSSいじってタイトルバナーを画像に変更した from kncafe(ゲームの合間のコーヒーぶれいく)
やりたかったブログカスタマイズの一つ、 タイトルバナーに自分の好きな画像を設定する。 がようやくできた。 今まで好きな画像を使った事はあったけど、... [続きを読む]

Tracked on August 2, 2010 11:50 PM
コメント

 yujiroさん、いつもお世話になって居ます。つい先日、バージョンアップを機にスタイルもこちらのテンプレートを利用させていただき、liquidタイプを取入れる事が出来ました。
 その際、苦労したのがタイトルバナーでしたので、私にとってはとてもタイムリーなレクチャーでした。有り難うございます。
 現在は何とか希望に合うバナーにはなっているのですけど、出来ればバナーの縦幅をもう少しだけ広げたいと思っています。
 「5」のご説明を参考に「padding プロパティの上下方向の値を増加」させてみたのですけど、バナーの下部、alfa、beta、gammaがバナー部分にめり込んできます。バナーが垂直方向に広がった分、下の部分も素直に下がってくれるように設定するにはどこを直したら良いのでしょう。教えていただければありがたいです。
 尚、拙ブログではバナーの中に更にバナーインナー画像を表示させています。こちらの方はheightを指定する事で収ったのですけど、バナーの方はheithを指定しても、やっぱり下の部分がめり込みました。

[1] Posted by 路子 : July 21, 2006 7:34 AM

>路子さん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、「バナーの幅を変更しても左右サイドバーの(垂直方向の)開始位置が下がらない」ということでよろしいでしょうか(違っていたらご指摘ください)。
この件につきましては別途エントリーしたいと思いますので少々お時間ください。
それではよろしくお願い致します。

[2] Posted by yujiro : July 25, 2006 12:28 AM

 yujiro さん、お返事有り難うございます。その御解釈で間違いありません。
 エントリーを作っていただけるとの事、恐縮ですけど、とても有り難いです。急いではいませんので、どうか宜しくお願いします。
 また新エントリーの「ASCII 文字のみのトラックバックをフィルタリングする プラグイン」もとても有り難いです。
 私の本日の課題になりました。いつも痒いところに手が届くサポート、感謝して居ます。

[3] Posted by 路子 : July 25, 2006 6:33 AM

>路子さん
こんにちは。
ご連絡ありがとうございます。
エントリーネタが増えて助かりますので、どうぞお気遣いなく。
プラグインもよろしければお試しください。
ではでは!

[4] Posted by yujiro : July 25, 2006 11:37 AM

いつもお世話になります。

1つ質問させてください。
タイトルバナーの縦幅を大きくすると、タイトルの文字が中央にきてしまいます。

これを左上に持っていきたいのですが、なにか方法はありますでしょうか?

お忙しいところ申し訳ありませんが、よろしくお願いします。

[5] Posted by ヒロ : July 28, 2006 7:10 AM

>ヒロさん
こんばんは。
ご質問の件ですが、

#banner {
    padding: 15px 15px 145px;
       :

としてください。
なお、6項を追記しましたので参考になれば幸いです。

それではよろしくお願い致します。

[6] Posted by yujiro : July 29, 2006 8:04 PM

いつもお世話になります。

ありがとうございました!

[7] Posted by ヒロ : July 30, 2006 9:27 PM

>ヒロさん
こんにちは。
ご連絡ありがとうございました。
うまくできたようでよかったです。
ではでは!

[8] Posted by yujiro : July 31, 2006 1:26 PM

お世話になっております。
このたびタイトルバナーに背景画像を入れました。そこで高さが足りなかったのでheight: 150px;と設定しました。

/* タイトルバナー */
#banner {
padding-top: 30px;
padding-left: 15px;
border-bottom: 1px solid #666699;
color:#000000;
background-position: left top;
background-repeat: no-repeat;
background-image: url("画像url");
height: 150px;
text-decoration: left;
}

このようにCSSを変更したのですが、タイトル画像とborder-bottomとの間にスペースが入ってしまいます。これをなくすためにはどこを直せばよいのでしょうか?
宜しくお願い致します。

[9] Posted by Ally&Monk : December 18, 2006 6:12 PM

>Ally&Monkさん
こんばんは。
ご質問の件ですが、

height: 150px;
の代わりに
padding-bottom: 60px;

を追加されてはいかがでしょうか(値は調整してください)。
それではよろしくお願い致します。

[10] Posted by yujiro : December 18, 2006 9:34 PM

いつも、お世話になっております。
おかげさまで、バナーに背景画像を入れることができたのですが、Firefoxで確認すると、なぜか、バナーの画像が表示されません・・・
スタイルシートは↓このようにしてるのですが・・・

/* タイトルバナー */
#banner {
padding: 35px;
border-bottom: 0px solid #666699;
color: #999999;
background-position: right top;
background-repeat: no-repeat;
background-image: url("http://event-gift.com/otoriyose/images/title2007.jpg");
text-align: left;
}

どのようにしたら、表示されるようになるのでしょうか;;

お忙しいところ申し訳ありませんが、よろしくお願いいたします。

[11] Posted by chi : January 21, 2007 2:57 AM

>chiさん
こんばんは。
ご質問の件ですが、スタイルシートの

ul li {
    list-style-type: circle;
     color: #996600;

の "}" が抜けているのが原因のようです。
それではよろしくお願い致します。

[12] Posted by yujiro : January 23, 2007 1:35 AM

yujiroさん、こんばんは!


スタイルシートの"}"を付けましたら、firefoxでも、無事表示されるようになりました?!!!

お忙しい中、どうもありがとうございました!

感謝感謝です;;

[13] Posted by chi : January 23, 2007 3:02 AM

>chiさん
こんにちは。
ご連絡ありがとうございました。
無事になおったようでよかったです。
ではでは!

[14] Posted by yujiro : January 23, 2007 9:45 AM

はじめましてyujiroさん!すごく親切な解説で素晴らしいです!MT初心者の知花と申します!どうか教えて下さい。この3日間ず?とタイトルバナーに背景画像を表示させようとしているのですがなかなか出来なくて困っています、スタイルシートはMTデフォルトのテンプレート設定になっています、設定変更はスタイルシートだけでよいのでしょうか?お忙しいと思いますがアドバイス宜しくお願いします。

#banner {
width: 710px; /* necessary for ie win */
background-position: left top;
background-repeat: no-repeat;
background-image: url("http://nobuyuki.boy.jp/blog/images/p1010224.jpg");

[15] Posted by 知花 : March 8, 2007 1:17 PM

>知花さん
こんにちは。
記事参照ありがとうございます。
ご質問の件ですが、background-image に指定されているURLの内容を確認したところ、HTMLファイルになっております。そこからさらに実際の画像を引き込んでいるので、background-image プロパティには

http://nobuyuki.boy.jp/blog/images/p1010224.jpg/P1010224.jpg

を設定すれば正常に表示されると思います。
それではよろしくお願い致します。

[16] Posted by yujiro : March 8, 2007 5:01 PM

やった?(^^)/
yujiroさんありがとうございました!!
やっと出来ましたありがとうございます、
なぜできなかったのか不思議です?

本当に感謝感謝です!!
師匠と呼んでもいいですか?
これかれもお手数かける時があるとおもいますが
宜しくお願いします。

本当にありがとうございましたm(__)m

[17] Posted by 知花 : March 9, 2007 2:08 PM

>知花さん
こんにちは。
ご連絡ありがとうございました。
無事になおったようで良かったです。
是非呼んでやってください(笑)。
ではでは!

[18] Posted by yujiro : March 12, 2007 12:18 PM

画像を表示することはできたのですが、
テキストでのタイトルとブログの説明が
画像に重なってしまいます。
消す方法はありますか?

[19] Posted by まりっぺ : March 26, 2007 2:00 AM

>まりっぺさん
こんにちは。
ご返事遅くなり申し訳ありません。
ご質問の件ですが、スタイルシートの最後に下記の設定を追加すれば画像のみ表示されるようになります。

h1, #banner-description {
    visibility: hidden;
}

なおこの方法ではSEO上、問題があるかも知れませんので、機会があれば別途エントリーしたいと思います。
それではよろしくお願い致します。

[20] Posted by yujiro : April 5, 2007 5:00 PM

画像のサイズはどのようにして指定すればよいのでしょうか?

[21] Posted by 白鳥 : May 6, 2007 3:04 PM

>白鳥さん
こんばんは。
ご質問の件ですが、画像を CSS の背景画像に設定する場合には img タグの width や height のように画像サイズの指定はできません。background プロパティで指定できるのは、

  • 画像ファイル
  • 描画開始位置
  • 描画を繰り返す・繰り返さない

のみです。
ただし、背景画像を表示するタグ(div 等)の CSS に width や height が設定できますので、それで調整することは可能です。

例えば下記の青色のプロパティを追加すれば、結果的に画像サイズを設定できます。

#hogehoge {
    width: 300px;
    height: 50px;
    background-position: right top;
    background-repeat: no-repeat;
    background-image: url("画像ファイル名");
}

ご質問の内容からどのような表示を希望されているか不明ですが、例えばバナーに1つの画像を目一杯表示するのであれば width は与えず、やや大きめの画像を背景画像に用いて height や padding で調整するのが良いでしょう。
それではよろしくお願い致します。

[22] Posted by yujiro : May 7, 2007 10:20 PM

こんばんは。
タイトルバナーに画像を表示させる事に成功したんですが
タイトルと説明の文字がWinだと上手く表示されなくなりました。
どうすれば上手く表示されるのかアドバイスお願いしますm(_ _)m

それと、もう1つ教えて頂きたいのですが
http://yocco.sakura.ne.jp/archives/2007/07/05-194747.php
上のエントリーの文字色と、下の「トラックバックURL」「トラックバック」
「コメント」「コメントする」の所の文字色を合わせる場合、CSSのどの部分を
変更したら良いのでしょうか?
お忙しい所スミマセン・・・ペコリ(o_ _)o))

[23] Posted by yocco : July 31, 2007 8:37 PM

こんばんは。
タイトルは無事に表示されました。
CSSとにらめっこしてましたw

[24] Posted by yocco : August 2, 2007 9:48 PM

>yoccoさん
こんばんは。
ご連絡ありがとうございました。
自己解決されたようで良かったです。お疲れ様でした。
ではでは!

[25] Posted by yujiro : August 4, 2007 1:38 AM

こんにちわ!
本を購入して、カスタマイズがんばってます。

さて、ヘッダに画像は無事に表示できたのですが、
この画像を押すとトップに戻るようにするには、
どうすればいいのでしょうか?

よろしくお願いします。

[26] Posted by sato : November 16, 2007 10:23 AM

>satoさん
こんにちは。
ご質問の件ですが、サポートサイト(サンプルデータダウンロードサイト)の「サポートブログ」に情報を追加しましたので、お試しください。
それではよろしくお願い致します。

[27] Posted by yujiro logo : November 19, 2007 6:08 PM

> yujiro さん
ありがとうございます!
無事にできました!

URLを探すのに苦労しました…。

あと、シンプルタイプを使わせていただきましたが、
構文の、<$MTBlogURL$$> となっています。
$ を1つ削りうまくいきました!

ありがとうございました!

[28] Posted by sato : November 20, 2007 11:05 AM

>satoさん
こんにちは。
ご連絡ありがとうございました。
色々不備があり、申し訳ありませんでした。
うまくできたようで良かったです。
ではでは!

[29] Posted by yujiro logo : November 20, 2007 8:14 PM

いつもいつもいつも・・・・・お世話になります。
質問場所がエントリー違いかもしれませんが、一応こちらで質問させていただきます。
スタイルシート内のheader設定部にて、画像を設定しているのですが、貴サイトの“Movable Type 4 の PHP 化で XML 宣言を自動的に切り替える”を適用させていただいたところ、IEではヘッダー部の縦幅が縮んだ状態になってしまい困っている次第です。加えて、以前質問させていただいた、ページ最上部にスペースが出来てしまう現象(IE&Firefox)も出てきている状況です。
最近ブログパーツやらの設定でアチコチ弄っているせいだとは思うのですが、どのタイミングでなるのかがどうもよくわからず、またタイトルバナー部に係わるのでこちらで質問させていただきました。当方でも検証中ではありますが、yujiroさんからもアドバイスいただければ幸いです。

[30] Posted by toycozy : December 18, 2007 11:03 PM

ページ最上部のスペースという件は、ヘッダーの中のどこかに原因があることが判明しました。お騒がせしました。ただ、PHP化の際のXML宣言によるタイトルバナーの縮小という部分が謎です。一部自己解決コメントでした。申し訳ありません。

[31] Posted by toycozy : December 19, 2007 3:41 AM

重ね重ねのコメント失礼いたします。
ページ最上部のスペースについては、metaタグの記述順を変えて解決出来ました。順番のせいなのか、記述自体をミスっていたのかは定かではありませんがとりあえずOKみたいです。
タイトルバナーの見え方については、どうらやFirefoxとIEとの違いのようです。XML宣言が何故影響してくるかまでは素人にはワカリマセンでした(笑)。
またまた参考にさせていただきます。

[32] Posted by toycozy : December 19, 2007 10:13 AM

>toycozyさん
こんばんは。
ご連絡ありがとうございました。
無事に解決されたようで良かったです。
ではでは!

[33] Posted by yujiro logo : December 23, 2007 2:33 AM

いつもお世話になってます。

バナー画像表示の確認なのですが、paddingで色々と指定してみた所
Firefoxでは問題ない場合でも、IEで上手く表示ができずタイトルが見れないという事態になりました。
IEにあわせると、もっと酷い為
width: 890px;
height: 250px;
と、画像サイズをそのまま指定した所、IE&Firefoxとも同様に表示されたのですが
ブログタイトルが一番上に来てしまって・・・もうちょっと下げたいと思うのですが(我侭w)
上からの高さを指定する事は可能でしょうか?
私の認識では、paddingで行う以外ないと思ってるのですが・・・・
何かいい方法があれば・・・・と思いまして、書き込み致しました。
背景画像様のdivを設定するのかな?と、漠然としたものしか浮かんで来ないので
いつも頼ってしまって、申し訳有りません。
お手隙の際にご教授頂ければ幸いです。

宜しくお願いします。

[34] Posted by RiCO : February 6, 2008 3:34 AM

>RiCOさん
こんばんは。
ご質問の件ですが、line-heightで指定する手があります。
それではよろしくお願い致します。

[35] Posted by yujiro logo : February 8, 2008 1:29 AM

 yujiro さんお願いします。m(_ _)m
 お忙しい折、申し訳ない。
 公開テンプレートでは#bannerを#headerに書き替えてありました。headerをbannerに読み替えると、意味内容が分かり、公開テンプレートをカスタマイズできることが分かりました。HTML文書というのも何かと言えば、index文書とarchive文書とを指すとわかりました。

 フロントページには修正後のバナーが表示されました。ところがアーカイブページで表示されません、真っ白になっています。ソースの表示を見ると、修正後のバナーを呼んでいます。それでいてどうして、バナーが真っ白になるのか分かりません。
 バナーのカスタマイズ方法を掲示されてから、どうやらyujiroさんの方で公開テンプレートのHTML文書とcss文書は内容を手直しされたようで、バナーのカスタマイズ方法の基盤が変わっているようです。
  申し訳ありません。ご確認いただけると大変ありがたいです。

[36] Posted by かたし : May 23, 2008 11:13 AM

 解決しました

[37] Posted by かたし : May 24, 2008 11:23 PM

こんばんは、
この記事を参考にスタイルシートを編集しようとしましたが
どこを探しても/* タイトルバナー */ や#banner の部分が見つからないため編集できません・・
こちらの4.1対応版のテンプレートを使用していますが対処方法を教えてもらうとうれしいです。
お忙しいところ宜しくお願いします。

[38] Posted by トレイン : August 25, 2008 8:33 PM

>トレインさん
こんにちは。
ご要望の件ですが、時間をみてMT4.x対応の内容をエントリーしたいと思います。
記事がそのまま利用できるかどうかわかりませんが、お急ぎであれば、id="banner" を id="header" に、#banner を #header に読み替えて試してみてください。
それではよろしくお願い致します。

[39] Posted by yujiro logo : August 28, 2008 3:01 PM

yujiro様

こんばんは。コメントありがとうございます。早速試しましたが、上手くいかなかったのでMT4.x対応のエントリーを待ちます。急がないので時間があるときで大丈夫ですよ!

[40] Posted by トレイン : August 30, 2008 6:55 PM

こんばんは。

いきなりすみません、質問なのですが、
タイトルを画像にしてTOPに戻るようにリンクを貼ったのですが、
a hoverでリンクの背景を指定しているため、リンクのある画像全てに
適用されてしまいます・・・・。

背景を白にしたりと色々試してみたのですが、
リンクの色が下のほうにだけ表示されて
消えません;;

ブラウザはfirefoxを使っていますが、IEだと
なんの問題もなく表示されるらしいです。

リンク付の画像にa hoverが適用されないようにする
CSSはありますか?

お手数ですが、教えていただけませんか?
よろしくお願い致します。

[41] Posted by かこ : February 4, 2009 12:29 AM

>かこさん
こんばんは。
ご質問の件ですが、img要素のa要素にclass要素を追加して、そのclass属性名をCSSセレクタにする方法jがあります。具体的には、

<a class="hoge"><img … /></a>

として、CSSに

a.hoge:hover{
  background: none;
}

を追加します。

それが面倒であれば、下記のスクリプトをbody要素の終了タグの直前に設定してください。

<script type="text/javascript">
ele = document.getElementsByTagName("img");
for (i = 0; i < ele.length; i++) {
  if (ele[i].parentNode.nodeName == 'A') {
    parent = ele[i].parentNode;
    parent.style.background = 'none';
  }
}
</script>

それではよろしくお願い致します。

[42] Posted by yujiro logo : February 7, 2009 1:15 AM

ありがとうござぃました
カウンターだけがなぜか直らなかったのですが、
その他のリンクは直すことができました!!

aタグをどこにいれていいのかわからず、
スクリプトを入れたのですが
今後の為、教えていただきたいのですが、

●<a class="hoge"><img … /></a>
はHTMLのほうに入れるんですか?

●<img。。。>の。。。は各画像ごとに指定しないと
いけないですか?

すみません、初心者の質問ですが、よろしく
お願いしますm(_ _"m)

[43] Posted by かこ : February 8, 2009 11:18 PM

>かこさん
こんにちは。
ひとつめのご質問の件ですが、今、画像リンクを表示するために、HTMLに

<a href="..."><img … /></a>

というタグを埋め込まれてますよね。その埋め込んでいるaタグに

class="hoge"

というものを追加して、

<a class="hoge" href="..."><img … /></a>

としてください。

この「class="hoge"」に対応するデザインをスタイルシートで設定するのですが、「class="hoge"」を設定したaタグのデザインしか変更されないため、すべての画像リンクを対象にしたい場合は、すべての画像リンクのaタグに「class="hoge"」を設定しないとなりません(といっても多分20ヶ所程度だと思います)。

念のため、「hoge」という文字列は例なので、正式に設定する場合は意味のある半角英文字にしてください。例えば「image_link」などが良いと思います。

それではよろしくお願い致します。

[44] Posted by yujiro logo : February 9, 2009 12:48 PM

ありがとうござぃました!
丁寧なご説明すごくわかりやすかったです。

[45] Posted by かこ : February 11, 2009 11:50 AM

Yujiroさん、またまたお世話になります。貴テンプレートに戻した後、タイトルバナーを画像を表示させようとしております。 

 概ね上手くいったと思ってますが、気になる点がひとつ、ブログを開いたときは上手く表示されますが、ブログを読むためにストロークしていますと、タイトルバナー横一線に白い線が入ります。その高さはちょうどタイトル文字の高さとほぼ等しいのです。 リロードすればもとのように上手く表示されますが、またそのうち同じよう白い線が入ります。

 今回タイトル文字も画像化しているのでそのCSSの記述の仕方がおかしいのかと思い質問させていただいております。何かアドバイスできる点あればご助言いただきたくお願いいたします。なお、ブラウザはIE7しか試しておりません、よろしくお願いいたします。

[46] Posted by harry : February 13, 2009 12:07 AM

>harryさん
こんばんは。
ご質問の件ですが、下記の青色を追加してください。

#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
    height:100%;
    text-indent:-9999px;
}

それではよろしくお願い致します。

[47] Posted by yujiro logo : February 16, 2009 12:48 AM

yujiroさん、早速のアドバイスありがとうございました。助かりました、また質問があるときはよろしくお願いいたします

[48] Posted by harry : February 16, 2009 11:25 PM

yujiroさん、もう一つ質問させてください。タイトルバナーに横幅850pxの画像にしましたが、IE6では右サイドバーが崩れ、左サイドバーの下のほうに表示されるようになってしまいました。IE7、firefox最新版では問題ありません。画像サイズを848とか852とか微妙に調節してみたのですが、状況は同じです。 気がつくことあればご教示いただけますようお願い致します。

[49] Posted by harry : February 24, 2009 12:25 PM

>harryさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の部分について、青色の内容に修正してください。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #f6f6f6;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 85%;
    overflow: scroll;
}

それではよろしくお願い致します。

[50] Posted by yujiro logo : February 24, 2009 8:08 PM

yujiroさん、早速のアドバイスありがとうございました、今、会社PC(IE6環境)でちょんと表示される旨確認できました、。

preタグの修正と言うことは画像サイズはまったく関係なかったわけですね、大変勉強になりました。

[51] Posted by harry : February 25, 2009 10:11 AM

yujiroさん、差し出がましく、もうひとつ質問させてください。 トップバナーの下に1pxほど白い空間が空くのはCSSでどこを直せばよろしいでしょうか?

[52] Posted by harry : February 27, 2009 12:16 AM

>harryさん
こんばんは。
ご質問の件ですが、下記の修正を行なってください。

変更前

#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
    height:100%;
    text-indent:-9999px;
}


変更後

#header {
    padding: 14px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
    height:100%;
    text-indent:-9999px;
}
html>body #header {
    padding: 15px;
}
*:first-child+html #header {
    padding: 14px;
}

それではよろしくお願い致します。

[53] Posted by yujiro logo : March 2, 2009 10:32 PM

yujiroさん、いつもながらありがとうございました。

[54] Posted by harry : March 3, 2009 11:26 PM

お世話になります。以前、同じような質問がでておりますが、自己解決されて情報を確認できなかったので宜しくお願いします。

タイトル背景に画像を割り当てたところ、ファイフォックスでは問題ありせんが、IE(6)でタイトルおよび説明が表示されません。一度、スクロールしてタイトル部分を非表示にし、再度スクロールし表示させるとタイトル部分に白色のラインが入ります。繰り返すとそのラインの高さがその都度変わり、タイトルの上1/3くらい見えることもあります。

ご教授願えればと思います。

[55] Posted by hiro : July 3, 2010 12:52 PM

>hiroさん
こんばんは。
ご質問の件ですが、可能であれば不具合が発生しているページのURLをご連絡ください。
なお、この事象については、[46]でも回答している通り、スクロールによって見えなくなる要素に対してスタイルシートに、

height: 100%;

を追加すれば解消すると思います。例えば、

<h1 id="header"><a href="http://.../">タイトル</a></h1>

で、タイトルが見えなくなるのであれば、

#header {
    height: 100%;
}

をスタイルシートに追加してみてください。
それではよろしくお願い致します。

[56] Posted by yujiro logo : July 3, 2010 9:22 PM

タイトルバナーを変更しようと悪戦苦闘してます。
リキッドレイアウトの場合です。

左サイドのカレンダーがタイトルバナーの下に下がりません。
どこを変更すればよいのかわかりません。

/* タイトルバナー */
#banner {
padding: 80px 100px;
border-bottom: 1px solid #666699;
color: #999999;
backgroud-position: right top;
backgroud-repeat: no-repeat;
background-image: url(http://livedoor.blogimg.jp/mayumi_m_cat/imgs/8/e/8eeccbf5.jpg);
text-align: left;
}

ご教授いただければ幸いです。
よろしくおねがいします。

[57] Posted by mayumi.m.cat logo : February 24, 2013 2:45 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)