MacIE文字化け回避CSS編

※今更ながら改めてご注意を。※
このMacIEのtextareaが文字化けする不具合というのは「UTF-8」というcharsetになっている場合に主に発生するものです。Shift-JISやEUC-JPではあまり起こらないので、UTF-8以外のcharsetのブログなどをお使いの場合はスルーよろしくお願いいたします。
★CSSでform部品（input,textarea,select等）に直接Macに無い日本語フォントや欧文フォントのみが指定されている状態ですと、無条件でMacIE化けしたりしますので、その辺よろしく(^^;

---

MacIEにはUTF-8でtextarea（コメントフォームとかで文字入力する部分）が文字化けするバグがある。
前に書いたMacIEの初期設定変更は、どうもOS9.2以前？では駄目なようで。（IE5.0でもOS9.2だと初期設定変更でOKとの報告があったと思うので。OSの機能拡張のどれかのバージョン差が原因だとは思うが、最早見当付かず。）フォント指定無しで化けるとは…orz

んではテンプレート側のCSSで化け回避するには？
7/5現在、当ブログのCSSには

textarea {font-family:"ＭＳ Ｐゴシック","Osaka";}

と放り込んであります。要はtextareaにMacで認識出来る日本語フォントをスタイル指定すればOK。※この時、フォントを書き連ねる順番に注意。欧文フォント…例えば「selif」とか入れたい場合は「"Osaka"」よりも後に。Mac用日本語フォントの前に欧文フォントが来ないようにする。

▼7/20 修正。こちら推奨▼
MTのブログで拝見した、MacIE以外に障らない（MacIEのみ適用の）CSSでの書き方↓

/*\*//*/
textarea, select, input {font-family:Osaka;}
/**/

「/*\*//*/」〜「/**/」で囲むのがミソらしき。
↑忍者ブログ管理画面でもこの形でOsaka指定されるようなので、まねっこさせていただきます。m(_ _)m

2007.1.30 追記：
上記推奨指定はCSS中何処に入れても構いませんが、ダウンロードした共有テンプレなどに追加する場合、既にtextarea等の指定が入っていることもありますので、CSSの一番最後に入れるのがいいかもしれません。MacIEだけfont-familyの上書きされるだけのことなので、影響少なし。

MacIEの文字化け回避・改

※MacIEの初期設定変更でtextarea（コメントフォーム等）の文字化けを回避する方法です。テンプレートのCSS側で対応させるにはCSS編にどぞ。

---

以前の記事だと判りにくいかな…ということで。
MacIEで文字化けする方がやはり多いようなので、図解入りで書いてみます。

▼ MacIE5.17の場合。UTF-8ベースブログ対応用。 ▼

IEの「編集」＞「初期設定」＞「Webブラウザ」＞「言語／フォント」で以下の画面になりますが
←クリックで拡大
まず、赤丸部分を「ユニバーサル文字（UTF-8）」に持って行く。
すると、初期状態ではその下のピンクの三角部分が欧文フォント（Timesなど）になっていると思われるので、ここを何らかの日本語フォント（うちではOsaka）にしてみてください。念のために他の部分も日本語にした方がいいかもしれません。
あとは赤丸部分を「日本語（自動判別）」に戻して「ＯＫ」で初期設定を終了。

これで大抵文字化けは防げると思うんですが…
やってるのに化ける！という場合は、お手数ですがこの記事にコメントいただけるとありがたいです。（ここも化けるんではと思いますが(^^;）

ちなみにこの記事MacIEで書いてます。
テンプレ改造の途中で放置してるので、色々見苦しいかと思いますがご容赦を。

共有テンプレートその３

共有テンプレ修正版４つ出る。
これで現段階で出てるものは改良終了かな。開発部の方々お疲れさまでした。

■ 15_brown：センター表示ばつ。崩れは特になし。14_greenに同じく記事日付が崩れて見えるのはフォントの差だからなぁ…こういう部分は％指定にしたほうがいいのだろうか？
■ 16_GothicLolita：センター表示ばつ。ブロック崩れあり。
■ 17_rain：センター表示ばつ。ブロック崩れあり。
■ 18_pig：センター表示ばつ。ブロック崩れあり。

せっかくのデザインが、見に行くと崩れてるのは哀し。
まぁ、MacIEで見て回るのが間違ってるべな。
その辺は自分のへそ曲がり趣味だから工夫しつつ楽しむべし。ヽ(´ｰ`)ﾉ

仕事も押してくるようなのでしばらく休憩。
新規テンプレ作成ページの動きを期待しつつ自主規制。（何度目だよ）

共有テンプレートその２

共有テンプレ修正版が７つ出た。
■ 07_autumn：MacIEでは変わらずプレビュー見るのも危ない。何が引っかかるんだろ。
■ 08_garden：センター表示ばつ。全体ブロックのバックグラウンドイメージが読めず。ん？
■ 09_gray：これもプレビュー危ないまま。何か特定の画像読みに行く時に詰まってる？
■ 11_teatime：センター表示ばつ。崩れは特に無さそう。
■ 12_shibadog：センター表示ばつ。ブロック崩れあり。
■ 14_green：センター表示ばつ。bodyの背景画像読めず。記事ブロックの微妙な崩れは何だろ。記事日付部分はフォントの差か、解像度の問題か？
■ 03_desktop：これはセンター表示ではないので特に問題なし。WinでもMacでもplugin_data_dateがはみ出して見えるのはpaddingしてないせい？

原因調べるのはまた後で。
取り敢えず確定してよさそうなのは、body直下に「div align="center"」持ってこられると、何故かMacIEは困るのでした。という事ぐらいだろうか。
フォントサイズの％指定はブラウザによって大分違って見えるかな。フォントファミリー指定にもよるだろうし…（Macはほぼ問答無用でosakaになるから、あまり気にならないが）。

MacIEでのテーブル表示

kunoichi 2を編集してみる。
このテンプレは全体がtableの中。で、CSSに「table{ margin:auto }」を入れてみる。無事センター表示出来た。記事ブロックの崩れも一気に解消。ラッキー。どうもこの設定入れないとMacIEではテーブルブロックをまともに表示してくれないようだ。同様にdivブロックベースのテンプレだと「div{ margin:auto }」入れると高確率でブロック崩れを防げるような。この辺のブラウザ初期設定が違うのかいな。ただ、細かくチェックしてないから、細部に差し障りがあるのかどうか…
プラグイン部分の表示が消える理由は不明。h2とpとdivの食い合わせ？まだ謎。

CSSについてネット検索で調べていると、WinIEの表示の仕方が根本的にバグだと言う記述を散見。最早Mac側がおかしいのかWin側がおかしいのかわけわかめ。深いぞCSS。
泥縄式で調べてないで、一度最初から勉強すべきだろうか。しかし真面目な勉強苦手なんだよな…