忍者ブログ
<< | 2017年04月 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | >>

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Posted by  at 16:27:36 JST | Category: 
Comments [] | Trackbacks [] | del.icio.us はてなブックマーク icon technorati icon AddClips

英文を主体としたサイトで用いる場合の対処法

現在公開中の拙作の共有テンプレートでは「Comfort Liquid 3columnについて」でも記載していた通り、InternetExplorer5.0以上で閲覧する場合ではデザインが崩れてしまう事を防ぐ為に画面上に表示される半角英数字の禁則処理を正しく行わずに各所に設定された既定のサイズに合わせて折り返す様に設定にしています。


その為、英文を主体にしたサイトで拙作の共有テンプレートを用いる場合には、場合によってデザインが崩れてしまう事とのトレードオフになりますがこれらの設定を無効にする事で英文を正しく表示させる事が出来ます。


【変更方法】

1.ブログの管理画面内の「環境設定」項目中にある「管理画面の設定」をクリックして、[テンプレート作成/編集]の方式が「簡素版テンプレート作成 」になっている事を確認します。「テンプレートメーカ使用」が選択されていた場合には「簡素版テンプレート作成 」を選択して、画面下部の「保存」ボタンを押します。


2.ブログの管理画面上部の「ブログ外観の編集」項目中にある、「テンプレート設定 編集」をクリックします。


3.修正対象の拙作のテンプレートが表示されている行にある、「修正」をクリックします。


4.簡素版テンプレート作成画面が立ち上がりますので、簡素版テンプレート作成画面下部の「CSSの編集」内に表示されているCSSファイル内から下記の様な設定の部分を探します。尚、修正に不慣れな方、既にカスタマイズを行っていて既存の設定が消失すると難儀する方などは、この時点で表示されるHTMLファイルやCSSファイルの内容をメモ帳などのテキストエディタに全文をコピー&ペーストして措き、万一の場合に備えておく事をお勧めします。


/* body全体に関する設定 */
body {
    font-family:"Osaka", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", 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に追記するだけで解消する筈ですよ。

PR
Posted by suna77777 at 01:08:01 JST | Category: 共有テンプレート
Comments [0] | Trackbacks [0] | del.icio.us はてなブックマーク icon technorati icon AddClips
コメント
コメントの投稿





コメント文字色:
絵文字入力:

トラックバック
トラックバックURL



投稿されたトラックバックは管理者の承認後に表示されます。

現在、当ブログでは英文のみのトラックバックは受け付けておりません。

Presently, with this blog has not accepted trackbacks only of English.

track word
track word ブログ SEO    
 
カレンダー
<< | 2017年04月 | >>
Sun Mon Tue Wed Thu Fri Sat
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
プロフィール
HN:suna77777
性別:男性
職業:システムエンジニア
趣味:自作PC ネット閲覧 ペット飼育等

suna77777のテクノラティプロフィール

gmail

共有テンプレートご利用の方へ
拙作の共有テンプレートをご利用頂き誠にありがとうございます。
このブログにて拙作の共有テンプレートをご利用頂く上での注意事項やご説明、カスタマイズポイントの解説等のコンテンツを用意しておりますので、お目通し頂けます様、お願い申し上げます。

★★★ 現在公開中のテンプレート ★★★

Comfort Liquid 3column
Comfort Liquid 3column

見易さ・使い易さ等を重視した幅可変レイアウトの3カラムのテンプレートです。
プラグインの配置は左カラムが1、右カラムが2、最上部が3、中央カラムの記事の直上が4、中央カラムの記事の直下が5です。
通常、プラグインは左カラムと右カラムに配置して、他の部分にはフリーエリアを用いてアフィリエイトバナーを張り付けたりブログパーツを張り付けて使用する事を想定しています。
質問事項や不具合報告、要望事項等がありましたら当該記事のコメント欄、若しくは上記のメールアドレスまでお気軽にご連絡下さい。

★★★ ご連絡 ★★★

10/5にこれまでに見受けられた不具合等を修正したVer.1.3をリリースしました。
既に既存バージョンをお使い頂いている方にはお手数をお掛けしてしまい大変恐縮ですが、新たにVer.1.3をダウンロードし直して頂き、可能な限り差し替えてご利用頂けます様、お願い申し上げます。

★★★ Ver.1.1での修正内容 ★★★

1.IE7.0にてブログ内検索プラグインの表示が崩れる事象を修正。
2.エントリーナビゲーション/ナビゲーションバーの階層構造を適正化。
3.link relでのフィードの記述順を修正。

★★★ Ver.1.2での修正内容 ★★★

1.DOCTYPE宣言行の記述ミスを修正。
2.MacIEへの対策を強化。(MacIEでは一部を除きletter-spacingを適用しない様に修正)
3.ブログタイトルと説明文の表示に関する修正。(右マージンを適切に設定)
4.CSS内のコメントを修正。(line-breakとword-breakのコメントを修正)
5.タイトルの修正。(Liquidのスペルを修正)

★★★ Ver.1.3での修正内容 ★★★

1.InternetExplorerにてbrタグにletter-spacingが設定されていると連続する改行表示が正しく行われない事への対処。
アーカイブ
2008年2006年2006年2006年2006年2006年
最新記事
2008年02月01日2006年12月14日2006年12月06日2006年11月28日2006年11月21日2006年11月14日2006年11月06日2006年10月30日2006年10月23日2006年10月16日2006年10月09日2006年10月01日2006年10月01日2006年09月30日2006年09月29日2006年09月26日2006年09月25日2006年09月23日2006年09月21日2006年09月18日2006年09月16日2006年09月16日2006年09月12日2006年09月12日2006年09月09日
最新コメント
Comfort Liquid 3columnについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてとりあえずXHTML化してみました。suna(BlogPet)きょうは日本語を検索したいなぁ(BlogPet)Comfort Liquid 3columnについて英文を主体としたサイトで用いる場合の対処法(BlogPet)プラグインをXHTMLに準拠させる修正方法についてComfort Liquid 3columnについてComfort Liquid 3columnについてComfort Liquid 3columnについてこんな機能が欲しい in 忍者ブログ忍者ブログでリキッドレイアウトのテンプレートを作る場合の注意事項忍者ブログでリキッドレイアウトのテンプレートを作る場合の注意事項
最新トラックバック
忍者ブログ版休日表示カレンダー日本語検索可能な Technorati Searchlet の設置方法忍者ブログでリキッドレイアウトのテンプレートを作る場合の注意事項
BlogPeople
TBP 忍者ブログ
TBP blogカスタマイズ
フィード

RSS2.0フィード

del.icio.usに追加 テクノラティ お気に入りに追加

Add to Google

My Yahoo!に追加

Add to Windows Live


ATOMフィード

RSS0.91フィード

RSS1.0フィード

RSS2.0フィード

各種ブックマーク登録
 
Google 検索
Google 日本
 

Yahoo! JAPAN 検索
Yahoo! JAPAN
 
  


Live Search
Live Search
Technorati 検索
Technorati (US)
 

Blog Pet
QRコード
QRコード
feed meter
人気ブログランキング
ステータス
SEO Stats
カウンター
AdminControlMenu: AdminMenu | NewEntry | EditComment | EditTrackback