Melody のページ画像を貼り付けて、そこに外部リンクしようとしたら、様々な問題に気が付いた。
知人からホームページの製作に付いて相談を受け、試作という事で検討したが、一応会社のHPなのでソースが文法的に出来るだけ間違いの無い様にしたい。
昔は単純なHTMLで、DOCTYPEはHTML 3.2 くらいで、それから先はブログの世界に入って行ったので普通のHPの勉強はストップしていた。
先進性とかを考慮していざ、まともなHPを書こうとしたら、XHTML＋CSS が主流で、従来のHTMLとは細かな部分で違いが有る。
まず、XHTML 1.0 でも XHTML 1.0 Strict DTD XHTML 1.0 Transitional DTD XHTML 1.0 Frameset DTD
が有る。
色々調べたら、従来のHTMLとか各種ブラウザの互換性・整合性からすると、取りあえず、XHTML 1.0 Tranditional
が一番無難、という事に成った。将来的には XHTML 1.0 Strict → XHTML 1.1 の流れに成るらしい。
CSS の解釈が各ブラウザにより異なっていて、特に問題に成るのは IE6 らしい。
実際に自分の作ったサイトで検証してみると、微妙に違いが生じている。このサイトも部分的にカスタマイズしていて、ブラザの違いが分かる。
前置きが長く成ってしまったが、検証する為に各ブラウザのシェアを調べて、IE(6・7) Firefox Safari Chrome と各種取り揃えていた。
Melody の画像を貼り付けて、リンクしようとしたら出来ない。仕方が無いので、入力のフォーマットをリッチテキストのHTMLモードにして、
<a href="http://openmelody.org/"><img src="http://midforce.net/images/melody.jpg" /></a>
と書いて、さらに
<div align="center">
<a href="http://openmelody.org/"><img src="http://midforce.net/images/melody.jpg" /></a>
</div>
としてみた、一応見る事は出来るがどうもテクニック的にすっきりしない。「画像の挿入」アイコンで出来るHTMLソースを使って
<a href～>*****</a>を入れる事にした。
最初は位置を指定しないで画像を入れて
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg"" class="mt-image-none" style="" width="458" height="200" /></form>
から
<div align="center">
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg"" class="mt-image-none" style="" width="458" height="200" /></a></form>
</div>
としてみた、<text align="center">もしくは<p style="text-align:center">だったかもしれない。これでOKかと思って各ブラウザで確認したら、一部おかしい。
色々なやり方を試したので、細かい部分では違う手法だったかも。
とにかく、Safari で画像の一番下に１ピクセル位の白い線が入ってしまう。よく見ないと気に成らないが、納得いかない。
ググってみたら、#fc0 で「テキストにリンクを貼っていると、画像にリンクを貼れない」
が有った。
さらに、リンクする画像を、IEの場合はリンクする画像をドラッグして、リンクアイコンからURLを貼るが、たまたま使っていたのが Lunascape で、IE以外の場合では、リンクする画像をクリックして、リンクアイコンからURLを貼る。
最初からリンクのやり方が間違っていた。
結局、「画像の挿入」アイコンから、位置を「中央」にして画像を貼り、その画像をクリックしてリンクアイコンからURLを貼った。
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" width="458" height="200" /></a></form>
と成り、どのブラウザで見てもOK。
この form 要素は、MT がブログ記事とアイテムとの関連性が有るので、書き換えない様に、と
「Movable Type 4.2 パーフェクトガイド」に書いて有った。
出力ファイルでは
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" width="458" height="200" /></a></span>
参照サイト
#fc0
小粋空間
PHP & JavaScript Room
知人からホームページの製作に付いて相談を受け、試作という事で検討したが、一応会社のHPなのでソースが文法的に出来るだけ間違いの無い様にしたい。
昔は単純なHTMLで、DOCTYPEはHTML 3.2 くらいで、それから先はブログの世界に入って行ったので普通のHPの勉強はストップしていた。
先進性とかを考慮していざ、まともなHPを書こうとしたら、XHTML＋CSS が主流で、従来のHTMLとは細かな部分で違いが有る。
まず、XHTML 1.0 でも XHTML 1.0 Strict DTD XHTML 1.0 Transitional DTD XHTML 1.0 Frameset DTD
が有る。
色々調べたら、従来のHTMLとか各種ブラウザの互換性・整合性からすると、取りあえず、XHTML 1.0 Tranditional
が一番無難、という事に成った。将来的には XHTML 1.0 Strict → XHTML 1.1 の流れに成るらしい。
CSS の解釈が各ブラウザにより異なっていて、特に問題に成るのは IE6 らしい。
実際に自分の作ったサイトで検証してみると、微妙に違いが生じている。このサイトも部分的にカスタマイズしていて、ブラザの違いが分かる。
前置きが長く成ってしまったが、検証する為に各ブラウザのシェアを調べて、IE(6・7) Firefox Safari Chrome と各種取り揃えていた。
Melody の画像を貼り付けて、リンクしようとしたら出来ない。仕方が無いので、入力のフォーマットをリッチテキストのHTMLモードにして、
<a href="http://openmelody.org/"><img src="http://midforce.net/images/melody.jpg" /></a>
と書いて、さらに
<div align="center">
<a href="http://openmelody.org/"><img src="http://midforce.net/images/melody.jpg" /></a>
</div>
としてみた、一応見る事は出来るがどうもテクニック的にすっきりしない。「画像の挿入」アイコンで出来るHTMLソースを使って
<a href～>*****</a>を入れる事にした。
最初は位置を指定しないで画像を入れて
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg"" class="mt-image-none" style="" width="458" height="200" /></form>
から
<div align="center">
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg"" class="mt-image-none" style="" width="458" height="200" /></a></form>
</div>
としてみた、<text align="center">もしくは<p style="text-align:center">だったかもしれない。これでOKかと思って各ブラウザで確認したら、一部おかしい。
色々なやり方を試したので、細かい部分では違う手法だったかも。
とにかく、Safari で画像の一番下に１ピクセル位の白い線が入ってしまう。よく見ないと気に成らないが、納得いかない。
ググってみたら、#fc0 で「テキストにリンクを貼っていると、画像にリンクを貼れない」
が有った。
さらに、リンクする画像を、IEの場合はリンクする画像をドラッグして、リンクアイコンからURLを貼るが、たまたま使っていたのが Lunascape で、IE以外の場合では、リンクする画像をクリックして、リンクアイコンからURLを貼る。
最初からリンクのやり方が間違っていた。
結局、「画像の挿入」アイコンから、位置を「中央」にして画像を貼り、その画像をクリックしてリンクアイコンからURLを貼った。
<form mt:asset-id="49" class="mt-enclosure mt-enclosure-image" style="display: inline;" contenteditable="false"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" width="458" height="200" /></a></form>
と成り、どのブラウザで見てもOK。
この form 要素は、MT がブログ記事とアイテムとの関連性が有るので、書き換えない様に、と
「Movable Type 4.2 パーフェクトガイド」に書いて有った。
出力ファイルでは
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://openmelody.org/"><img alt="melody.jpg" src="http://midforce.net/images/melody.jpg" class="mt-image-center" style="margin: 0pt auto 20px; text-align: center; display: block;" width="458" height="200" /></a></span>
と成る。
参照サイト
#fc0
小粋空間
PHP & JavaScript Room
コメントする