2009年6月アーカイブ

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 で画像の一番下に1ピクセル位の白い線が入ってしまう。よく見ないと気に成らないが、納得いかない。

ググってみたら、#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

Melody

| コメント(0) | トラックバック(0)

WordPressに対抗した、新たにオープンソース版のMTという事で、MTOSとの関連性など取り沙汰されている。

Melody が出たなら Nelson はどうした、などと変な事も言われている (^_^)

melody.jpg早速インストールしてアップしてみた。

REDONC MELODY


取りあえず特に変わった所は無いが、インストールの手法が少しだけ昔に戻った。

ALLER's Website

Secondary Site

BBS

月別 アーカイブ

OpenID対応しています OpenIDについて
Powered by Movable Type 6.3.2

Hatena