Home > Movable Type > title bannerに画像を使用する

title bannerに画像を使用する

2005-10-26 (水) 6:17
Movable Type

　スタイルシートとメインページのテンプレートをうろうろしながら、なんとか今日は納得いくカタチにできました。タイトル部分のバナーがどうしてもうまくいかなくて四苦八苦しましたが、同じテンプレートを使用している他の方のサイトでバナー部分にイメージを採用しているところのソースをのぞいたりしながら、ようやく出来上がる。

　うん、今のところは悪くないんじゃないかな。

　とりあえずはこれでいってみよう。

　カタチはできたから…yaplogの700エントリー（冗談でしょう…？！）をこっちにもってこなくちゃ。やれやれ、何日かかることだろう。気長に地道にこつこつやっていきますか。しかし、テキストだけならまだしも画像も全てこちらにインポートしないといけないのか！

10/28 追記

　なぜ、バナーがうまくいかなかったかというと、タイトルバナーにimageを使用しようとしたからなのだが、大抵のブログは背景にイメージを使用してタイトルとそのタイトルの説明についてはテキストリンクで表現していて、もちろんどのテンプレートもデフォルトではそうなっている。

　しかし、タイトル部分ぐらいはきっちりと作りこみたいので画像でどうしてもやりたかったので、を使用して、その画像にトップページへのリンクを貼ろうとしたのですが、どうしてもうまくいかず、タグがそのまま表示されてしまう。背景にその画像を持ってきてもよいのですが、そうするとトップページに戻るのに不便。タイトルバナーにトップページへのリンクが貼ってある、というのはもう常識だし、そうなっていないサイトにあたると舌打ちしたくなるくらい嫌いなので、自サイトでそうするわけにはいかない。

　もともと、テンプレートについてはstylecatcherというプラグイン(MT3.2から装備）を使用しようと思ったのですが、どうしてもうまくプラグインをインストールできなかったので、テンプレートを使うことにしたのですが、私が使用させていただいているのは小粋空間というサイトのもので、とにかくシンプルだったから。それを色々カスタマイズしていこうと試みていたのに、のっけのバナーからつまずいてしまって困ったなぁと思いつつ、そこのテンプレートユーザーのサイトにいくつか訪れてみて、タイトル部分に画像を使用しているサイトのソースを拝見。

　そうすると、謎がとけました。

元　＜img src=”画像のパス.jpg”＞
　↓
今　＜img src=”画像のパス.jpg” width=”850″ height=”156″ alt=”画像名” /＞

widthとheight,altはわかるにしても、最後の「 /」は何？！と怪訝に思いつつやってみたら成功…。どうしてこれで成功するんだ！！！

とかなり疑問に思っていたら、偶然ながらタイムリーにIKIMONO’s DIARY | Firefox 拡張：HTML Validatorこの記事を読んではっとする。そうか！！！

HTMLじゃなくてXHTMLは、空要素であっても必ず終了タグを付与するか、もしくは開始タグの要素名後に / を含めなければならない（例：br要素は＜br/＞あるいは＜br＞＜/br＞と記述しなければならない（このような書き方では古いブラウザで正常に表示されない場合があるので実際には互換性のために＜br /＞のように書くことが多い））。

ということなのですね。

　目からうろこ。

Newer: 便利グッズ
Older: 7-11 original itune card

Comments:0

Trackback+Pingback:0

この記事へのTrackBack URL 記事への言及のないもの等は削除する場合があります。また、スパム判定ですぐに反映されない場合があります。: http://www.sky-s.net/sky-blog/archives/2005/10/26-061755.php/trackback
Listed below are links to weblogs that reference: title bannerに画像を使用する from sorarium

Home > Movable Type > title bannerに画像を使用する