[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
現在公開中の拙作の共有テンプレートでは「Comfort Liquid 3columnについて」でも記載していた通り、InternetExplorer5.0以上で閲覧する場合ではデザインが崩れてしまう事を防ぐ為に画面上に表示される半角英数字の禁則処理を正しく行わずに各所に設定された既定のサイズに合わせて折り返す様に設定にしています。
その為、英文を主体にしたサイトで拙作の共有テンプレートを用いる場合には、場合によってデザインが崩れてしまう事とのトレードオフになりますがこれらの設定を無効にする事で英文を正しく表示させる事が出来ます。
【変更方法】
1.ブログの管理画面内の「環境設定」項目中にある「管理画面の設定」をクリックして、[テンプレート作成/編集]の方式が「簡素版テンプレート作成 」になっている事を確認します。「テンプレートメーカ使用」が選択されていた場合には「簡素版テンプレート作成 」を選択して、画面下部の「保存」ボタンを押します。
2.ブログの管理画面上部の「ブログ外観の編集」項目中にある、「テンプレート設定 編集」をクリックします。
3.修正対象の拙作のテンプレートが表示されている行にある、「修正」をクリックします。
4.簡素版テンプレート作成画面が立ち上がりますので、簡素版テンプレート作成画面下部の「CSSの編集」内に表示されているCSSファイル内から下記の様な設定の部分を探します。尚、修正に不慣れな方、既にカスタマイズを行っていて既存の設定が消失すると難儀する方などは、この時点で表示されるHTMLファイルやCSSファイルの内容をメモ帳などのテキストエディタに全文をコピー＆ペーストして措き、万一の場合に備えておく事をお勧めします。
/* body全体に関する設定 */
body {
font-family:"Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif;
font-size:14px;
font-weight:normal;
font-style:normal;
text-align:center;
line-break:strict; /* for IE 5.0+ */
word-break:break-all; /* for IE 5.0+ */
word-wrap:break-word; /* for IE 5.5+ */
color:#000000;
background-color:#ffffff;
}
5.この設定内で下記の2プロパティに対する設定を下記の様に修正して下さい。
word-break:normal; /* for IE 5.0+ */
word-wrap:normal; /* for IE 5.5+ */
6.修正が完了したら修正ミス等が無い事を確認した上で、画面左中上位にある、「データ登録」ボタンを押します。
7.これで修正は完了です。
余談ですが、簡単に解説しますとline-breakプロパティは日本語や中国語、韓国語等のいわゆる全角文字での禁則処理に関する設定で、拙作の共有テンプレートでは厳密に行う様に設定しています。少なくても日本語においてはこれを厳密に行う設定にしてもデザインが崩れる事はありませんので、当初の設定のまま変更する必要はありません。
word-breakプロパティは全角文字と半角文字が混在する文書での改行の仕方を設定するもので、単語の途中での改行を行うかどうかの設定を行うものです。拙作の共有テンプレートでは全角文字と半角文字共に単語の途中で改行する事を許す設定になっています。この設定を規定値のノーマルに指定する事で半角文字での英文表記が正しく行われる様になります。
word-wrapプロパティは実は私も詳しく判っていないのですが、各サイト上での説明に拠るとラテン言語での改行の仕方を設定するものなんだそうで、拙作の共有テンプレートではデザインが崩れる事を極力防ぐ為のおまじない的な意味合いで、単語の途中で改行する事を許す設定にしています。この設定を規定値のノーマルに指定する事でラテン言語表記が正しく行われる様になる筈です。
ちなみにこれらの設定がなぜデザインが崩れる事に結びつくのかというと、少なくても日本語における全角文字での禁則処理の場合は禁則文字が改行位置に差し掛かっている場合には禁則文字の直前の文字から合わせて改行されるので、表示サイズに影響を及ぼす事がないのですが、半角文字での禁則処理では場合によっては表示サイズを広げても単語を改行せずに表示させる様にする為、長い単語や、長いURL文字列等を記載した場合に表示サイズが局所的に広がってしまい、その影響を受けて全体のデザインが崩れてしまう場合があるのです。
InternetExplorer5.0以上のWebブラウザ以外では基本的にline-break、word-break、word-wrapの各プロパティがノーマルを指定された場合とほぼ同様の処理を行うのが通常ですので、これらのWebブラウザにおいても長い半角文字列にてデザインが崩れる場合があります。
また、Netscape6以上、mozilla、Firefox、Seamonkey等のGeckoをレンダリングエンジンとして用いたWebブラウザでは、長い単語や、長いURL文字列の半角文字が表示エリアから突き抜けて表示されてしまう事があります。
このGeckoを用いた一連のブラウザでの問題に関して、現在主流になっているFirefoxではMR Tech's Link Wrapperという拡張機能を閲覧者が各自のFirefoxに導入する事で半角文字が表示エリアから突き抜けて表示されてしまう事を防ぐ事が出来ます。また、日本語版もあります。これは非常に有益な追加機能で私もずっと愛用しているのですが、ここで盲点なのはこれを導入した状態でも上記の3プロパティがそれぞれ規定値のノーマルに設定されているのとほぼ同じ状況になるだけですので、場合によって半角文字での禁則処理の為に表示サイズが局所的に広がってしまい全体のデザインが崩れてしまいます。
本質的にはFirefox自体が各言語を問わず問題なく表示される様に修正される事が望ましいと思うのですが、残念ながらこの後公開されるFirefox2.0でもこの問題は改善されていない様です。
その為、公開テンプレートでは導入していませんが、このサイトではoutsider reflexさんの「Firefoxで長いURIを折り返す」で頒布されているJavascriptをサイト内で実行させる為にちょっと改造した上で用いていて、FirefoxだけではなくGeckoを用いた一連のブラウザにて拙作の共有テンプレートでInternetExplorer5.5以上に対して設定しているのとほぼ同じ仕様で折り返す様にしています。
この記事の主題から完全に外れましたが、これらのブラウザでもInternetExplorer5.0以上と同じ様に折り返したい場合にはこのスクリプトを導入される事をお勧めします。忍者ブログを含む、サイトに対するスクリプト導入方法につきましては、今後折をみて記載してみたいと思っています。
また、他の作者の方が作成された共有テンプレートを使われていて、長い半角文字によるデザインの崩れで困られている方がいらっしゃいましたら、InternetExplorer5.0以上で閲覧する事への対処は上記の3プロパティの設定をお使いになられているテンプレートのCSSに追記するだけで解消する筈ですよ。
投稿されたトラックバックは管理者の承認後に表示されます。
現在、当ブログでは英文のみのトラックバックは受け付けておりません。
Presently, with this blog has not accepted trackbacks only of English.
