MT(ムーバブルタイプ)は基本UTF-8なのですが
携帯サイトや文字コードが一部だけ違う場合などに不便。

そこで、PHPを使って簡単に変更する方法をメモひらめき電球

あとで調べたら「MT-I18Nプラグイン」という
MTの文字コードを変換するプラグインがあったのでこちらを使ったほうが簡単かも!

モバイルサイトを作ったときに使った方法は
まず、MTでモバイルサイト用のテンプレートを作って
そのファイルの中身を全部読み込んでエンコードをする。

こんな感じ
$contents = file_get_contents('hoge.php');
echo mb_convert_encoding($contents, 'SJIS', 'UTF-8');


これだけですビックリマーク
最初にファイルチェックをかけた方が良いです。


違う方法としては、テンプレートのときにPHPでエンコードを
かけるやり方があるのですが、タグが入っていることが多いので
これだとシングルクオートとかダブルクオートでエラーに
可能性が高いのでやめました。
それに、あとでエンコードさせる方が他の文字コードの対応が
できるので便利です。
cssでaタグにオーバーしないときはアンダーラインを
表示させない設定にしといて、a:hoverで表示させる
ときに、なぜかIEだと表示されるときに下にずれる。
firefoxやchromeとか他のブラウザだと起きていない。

IEのバグかなぁと思っていろいろ探したがよい解決方法が
見当たらなかったが、なんとか解決したのでメモひらめき電球

解決方法

smallタグをaタグの外に書く。
<p><small><a href="">ほげほげ</a></small></p>


このやり方は今回の場合だったので正しい解決の仕方
なのかは分かりません。



aタグのhoverでボーダーが表示されと1px下に動く

CSSの設定
a:link {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

これでアンカーテキストをマウスオーバーすると
下にボーダーが表示される。
このときに下に動いてしまう。

見た感じ1pxずれているのでaタグにpadding-bottomで1px指定
すればいけるかなぁと思ってやってみたら
直った。

これでOKって思ってクロームで見たら崩れはしないが
ボーダーが表示されない。
この方法は違うと思って再度デバッグ作業ガーン
っでなんとか解決したのでメモひらめき電球


今回の解決方法は私の場合なのでもしかしたら解決しない
ことがあると思います。

まず、問題が発生している箇所を見るとこうなっていたので

<p><a href=""><small>ほげほげ</small></a></p>

smallタグをaタグの外に出してあげた。
<p><small><a href="">ほげほげ</a></small></p>


これだけ問題解決しました!
ん・・・。いいのでしょうかあせる



これだと何かスッキリしないのでもう少し調べた。
違うパターンで

<p>ここにテキストを入れる<a href=""><small>ほげほげ</small></a></p>

このようにaタグの前にテキストが入っていると
1pxずれる現象は発生しません。

また、この現象が発生していないaタグにsmallタグを入れたら
発生するだろうと思って

<a href=""><small>ほげほげ</small></a>

こう書いてもなりませんでした。
そして、smallタグを使わないと発生しません。
ん・・・。何なんでしょうか?


そこで実験してみました。
aタグのhoverでアンダーラインが表示されない問題

たぶん推測ですが、aタグの中にsmallタグを書くと高さが違うので
それかな?って思いました。
ブロック要素で囲まれると高確率でなる感じがします。



解決はできましたが、完全な発生条件が特定できませんでした。
誰か知っている方、教えていただければ助かります。

Googleの翻訳ツールを使うと簡単にサイトを多言語化できます。
サイトのURLを入れると翻訳してくれるものと同じでそれをサイトに
組み込めます。

アメブロだと制限があってプログラムとか置けないので
サイトを立ち上げました。
Googleの翻訳を使って簡単に多言語対応させる方法 - Web++ in 長野

これでいろいろ試せるのでのせていきたいと思います。
長野県のホームページ制作現場からWeb制作テク配信!

よろしくです!