私は、PC関連、WordPress関連のことをテーマを決めて固定ページにまとめているのですが、固定ページも少しずつ増えてきたことですし、ブログでは時折、番外編的な雑記も書いていこうかなあと思います。

上部に背景が見える余白
上部に背景が見える余白

上部の要らん余白を巡る迷走

今、WordPressのテーマ『twentyfourteen』カスタマイズをしているのですが、先日、ふっとHOME(TOP)ページの上部に余白が出来ていることに気づきました。スタイルシートで上下のマージンを0に設定いるので、上部の背景が見えるのはおかしいし、下部は設定通りです。他のページをクリックしたところ、他のページでは、余白はなく正常に表示されています。もしかして、NOTEPAD(メモ帳)が原因かなあと思いました。実際、NOTEPADが原因だったんですけど、このあと、私は問題の原因になった行動を、全ファイルについて、繰り返しやってしまうので、状況は一向に改善しませんでした(^_^.)。

NOTEPAD
NOTEPAD

NOTEPADは、Windows標準のテキストエディタ。日本語メニューでは『メモ帳』と訳されていますが、プログラム名も『notepad.exe』なので、国内でもIT技術関連の書籍などでもNOTEPADと表記されることも多いです。Windows7環境のNOTEPADはデフォルト、文字コードはデフォルとANSIが指定されています。私がはじめてHTMLを勉強したとき、NOTEPADは文字コードの問題があるからHTMLの記述には使うなと教えられたものです。PHPも同様だろうと思いました。固定ページの記事のなかではWordPressの管理画面から使える『テーマの編集』を使っていますし、Web系ではテキストエディタはフリーソフトの某エディタを利用していますが、サイト表示が微妙におかしなことになっているのは、NOTEPAD側の文字コードの問題ではないかと考えました。私は編集しているPHPファイルやスタイルシートをNOTEPAD上でUTF-8で保存しなおしてしまったのです。

デフォルトANSI
デフォルトANSI

 

一般的にWordPressは文字コードにUTF-8を利用します。だから、ファイルをUTF-8で扱うというのは正しい選択だし、今はNOTEPADでも文字コードUTF-8を指定して保存することもできる。だから、デフォルトANSIになっている文字コードをUTF-8指定したつもりだったですが、状況は全然、改善しません。『ありゃ、検討違いのことやったかなあ』と調べてみたところ、検討違いのことをやってしまったことが判明しました。どうせなら、他のテキストエディタでやれば良かったのですが、NOTEPADが原因だと思い込んでいたので、NOTEPADで保存しなおしてしまったんですね。

UTF-8がBOM付きだった

BOM(Byte Order Mark)は、あるファイルを読み込むプログラムに対して、「このファイルの文字コードはUTF-8ですよ」と自動判別するため、テキストデータの先頭部に付与された情報です。BOMを付けるか、付けないは、状況によって違うので、ネットワークの標準化を担うRFCでも、どういう状況ならBOMを付ける、付けないという条件のガイドラインがあるようですが、NOTEPADを使って保存するUTF-8はBOM付きで、BOM付きで保存されたことで、WordPressのファイルの読み込みに支障を来たし、トップページに要らん余白が出来てしまった。いぜんにも、NOTEPADでファイルを開いて、UTF-8に保存しなおしたことがあったので、それが原因だったということです。編集してなくても、保存しなおすという作業をしただけで、ダメみたいです。

他のエディタを使いBOMなしのUTF-8で保存すれば問題は解決しますが、Windows上で右クリックのコンテキストメニューから新規作成を選んで、テキストファイルを作り、NOTEPAD上で一度も保存しないまま、WordPressの管理画面の[外観]-[テーマの編集]のみでファイルを更新した場合は、問題が起きませんでした。私の環境の場合、NOTEPAD上で保存したデータは、[テーマの編集]で更新しなおしても、ダメでした。
NOTEPADはOS標準のテキストエディタなので、OSのバージョンによっても状況に違いが出るかもしれませんし、WordPressのバージョンも現状の最新版の場合しか分かりませんが、PHPをBOM付きのUTF-8で保存してしまったことが原因で起きる問題は、結構あるようです。

 

 

 

 

アマゾンゲームバナー