マルチパパの
    WordPress

webデザインが崩れる意外な原因

phpファイルやcssファイルを編集するのに、いつも使っているのがNotepad++というソースコードエディタです。

Notepad++は様々なプログラム言語の編集に対応しており、テキストエディタとしても使うことができる優秀なソフトウェアですが、wordpressを始めて困ったことがでてきました。

それはphpファイルに直接日本語文字を入力した時に起きます。
このページの左にあるメニューの「テーマ一覧」と「記事・新着順」などはまさにそうです。
wordpressのphpファイルだけなのかは不明ですが、フォーマットはANSI形式になっています。
これに日本語を打ち込むと、、、、
文字化けします。

これを文字化けしたまま保存して、アップロードしてもブラウザ上ではちゃんと日本語で表示されるので、いいと言えばいいのですが、これではエディタ上で誤字脱字をチェックできません。

文字化けを直す方法としては、
NotePad++のメニューにある[フォーマット]から
[UTF-8形式で開く]

[UTF-8に変換]
があります。

しかしここにトラップがあります。
[UTF-8に変換]を行って編集後に保存しアップロードするとちゃんと日本語表示はされますが、ページのデザインがくずれることがあります。

ページの一番上にスペース(マージンのように)ができてしまったり、微妙に位置ずれしたりするのです。

しかもローカル上(自分のPC上)では問題なく表示されているのに、サーバーにアップしてブラウザで最終確認をした時に発生するのです。

これにはずいぶん悩みました。
phpファイルとcssファイルのソースコードのバグ探しを行ったり、コードを書き換えてみたりしましたが解決しません。
おそらくこれはサーバーの仕様の問題なのだろうと思っていますが、まさか文字コードが原因だとは、、、

まだ続きがあります。
一度[UTF-8に変換]を行ってしまったものを今度は[ANSIに変換]を行ってはいけないのです。
最初にANSI形式で開いたときと同じように文字化けした形になるのですが、これをアップロードすると文字化けしたまま表示されます。

ではどうすればいいのか?

最初に開いたときに[UTF-8形式で開く]を行う
日本語入力を行う
[ANSI形式で開く]
[上書き保存]
これをアップロードします。

ちなみにWindowsのメモ帳(wordpad)でphpファイルを開いて日本語入力を行っても文字化けしません。
実はこれはS-JIS形式で開かれているためです。
Notepad++では標準ではS-JISをサポートしていませんが、改良されたNotepad++ EUC-JP対応版では使うことができます。

http://notepad-plusplus-euc-jp.hp.infoseek.co.jp/
ここから改良版をダウンロードできます。



この記事のテーマ WordPress
RSS 2.0 | Trackback | Comment

この記事へのご意見・ご感想をお書きください


コメントに使えるXHTMLタグ
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>