いつまでも青く、枯れても青く ~ご案内~

ブログ「いつまでも青く、枯れても青く」は、2006年2月より開始したブログで、管理人のそれまでの過去の日記やブログを統合しています。
   Part1:2001年05月~2005年07月 【日記のススメ「気まぐれ日記」】(2005年6月6日から2005年7月21日までの日記は紛失)
   Part2:2005年07月~2005年12月 【ブログ「モデラーな日々」】
   Part3:2006年02月~現在     【ブログ「晴れたり曇ったり」、2006年8月に「いつまでも青く、枯れても青く」に改題】
   2011年7月15日に、鉄道模型関係をブログ「Enjoy!鉄道模型!」に移行。
   2014年7月10日に、お気に入り写真のブログ「気ままなカメラ散歩道」を開設。
   2018年2月18日に、「Enjoy!鉄道模型!」と「気ままなカメラ散歩道」を統合。(順次統合)
プロフィール

Warachan

Author:Warachan

    生息地:愛知
    年 齢:50代後半
    性 別:オヤジ
    趣 味:模型製作、カメラ、
        オーディオ、
        クルマ、パソコン

お知らせ
Warachanをフォローしましょう mixiやっています

にほんブログ村に登録しています。
ブログランキング・にほんブログ村へ
次のブログランキングに参加しています。
にほんブログ村 写真ブログへ  にほんブログ村 写真ブログ デジタル一眼レフカメラへ
にほんブログ村 鉄道ブログへ  にほんブログ村 鉄道ブログ 鉄道模型へ
にほんブログ村 その他日記ブログへ  にほんブログ村 その他日記ブログ 気ままへ

トリップアドバイザーに
お勧めブログとして認定されました。
瀬戸 旅行情報
瀬戸 旅行情報

メールフォーム

名前:
メール:
件名:
本文:

カレンダー
10 | 2019/11 | 12
- - - - - 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
相互リンク
月別アーカイブ
天気予報

-天気予報コム- -FC2-
ブロとも申請フォーム
ブログ内検索
QRコード
QR

04/25(土)  Google Chromeのその後。

Google Chromeをインストールしてみたら・・・」で書いたように、このブログのレイアウトが崩れるという理由でメインブラウザの立場を獲得できなかったGoogle Chromeですが、あとで調べてみると、FirefoxでもNetscapeでも同じ崩れが発生するということがわかって、これはブラウザではなくてこのブログのテンプレートに問題がありそうだということで、調査をしてみました。

レイアウトが崩れるというのはこのような状態です。
なぜか、IEは問題なく表示されていますので、この問題には気づきませんでした。

pic20090425_1
(左から、InternetExporer6、Netscae7.1、Firefox2.0、GoogleChrome1.0)

このブログのテンプレートのオリジナルは、fuul's Display というところからいただいています。それを少し加工し、画像をオリジナルに変えて使っています。

そのオリジナルだと下の写真のように問題ありません。

pic20090425_2
(左から、InternetExporer6、Netscae7.1、Firefox2.0、GoogleChrome1.0)

そこで、再度オリジナルをベースに加工するという作業をおこないました。
オリジナルのスタイルシートに対して次の作業をひとつずつ表示を確認しながらおこないます。

   ・オリジナルよりもブログ全体の幅を広げ、メニュー部分と記事の部分を広げます。
   ・利用している画像のURLを変更します。
   ・レイアウトバランスをとるために、marginとpaddingの数値を微調整します。
   ・リンクのある文字の色とカーソルを合わせたときのデコレーションを変更します。
   ・コメントのツリー表示の定義を入れます。
   ・カレンダー表示の定義を入れます。

すべておこないました。

その結果がこれ。

pic20090425_3
(左から、InternetExporer6、Netscae7.1、Firefox2.0、GoogleChrome1.0)

直りました。
IEでもFirefoxでのNetscapeでもGoogle Chromeでも正しく表示されます。
(IE系、Mozilla系(Firefox、Netscape)、Safari系(Google Chrome)の違いとなるのでしょうか。)

でも、原因はわかりません。

仕方がないので、今まで使っていたテンプレートと今回再度作ったテンプレートをWordに移して一行一行の比較をおこないました。

pic20090425_4そして見つけたのがこれ。

今まで使っていたスタイルシートには、余分に「}」がはいっています。IEはこれを余分なものとして解釈してくれて、IE以外は律儀に解釈したと思われます。私としては、コンピュータは曖昧さがなく律儀でなくてはいけないと思っていますので、IE以外の解釈の方が好ましく感じます。

これで、完了かと思って最終チェックとしていたところ、新旧で若干の動きの違いを発見。これはIEもMozilla系も同じことが起きています。

その現象とは、リンクされている文字のところにカーソルを置くと、

 今まで使っていたスタイルシートは、
  「文字の下にアンダーラインが出て背景がグレーになる。」 (これが私が意図した動き)

 今回修正したテンプレートは、
  「背景はグレーになるが、文字の下にアンダーラインが出るものと出ないものがある。」

アンダーラインが出るものと出ないものの違いは、どうも、そのリンク先にアクセスしたことがあるかどうかという違いのようです。通常、リンク先に飛ぶと、その文字が紫に変わるというように、リンク先にアクセスするとその扱いが変わるというのはよくあります。それが出ているようです。これは、過去にも経験したことがあったので、新旧のテンプレートで確認すると、

正しくは、
   a:link {font-size:12px;color:#427DCC;text-decoration:none;}
   a:visited {font-size:12px;color:#427DCC;text-decoration:none;}
   a:hover {font-size:12px;color:#427DCC;text-decoration:underline;background-color:#d1d1d1;}
   a:active {font-size:12px;color:#427DCC;text-decoration:none;}

なのが、今回修正したものはオリジナルに従って、
   a:link {font-size:12px;color:#427DCC;text-decoration:none;}
   a:hover {font-size:12px;color:#427DCC;text-decoration:underline;background-color:#d1d1d1;}
   a:active {font-size:12px;color:#427DCC;text-decoration:none;}
   a:visited {font-size:12px;color:#427DCC;text-decoration:none;}

となっていました。

この順番で動きが違ってくるというわけです。
オリジナルに対する加工作業が、この点だけ漏れていました。

これで、正しいと思われるテンプレートにはなりましたが、またわずかな違い(下に追記)があります。IEとNN系をまったく同じにするのは仕様上不可能に近いかもしれませんが、テンプレートの作り方でなんとかできる部分はちょっとトライしてみたい気もあります。

ここでやっと本題。
Google Chromeのその後です。

かなり軽快で早い!
使いにくいと思っていたタブも違和感無く使いやすいです。
IEの重さに嫌気を持っているかたは一度試してみる価値はあると思います。
通常使うブラウザはIEにしてありますが、私は今はGoogle Chromeを使う機会の方が完全に多くなっています。


<追記>
記事のタイトル文字の大きさと色がIEとそれ以外のブラウザで異なっていましたが、テンプレートの、a:link、a:visited、a:hover、a:activeの定義行に全角スペースが入っていたためとわかりました。IEは全角スペースを無視してくれ、その他は全角スペースが入っているためにその定義が無視されていたようです。

あとひとつ、画像表示のvspace、hspaceがIEは効いて、そのほかのブラウザは効かないという問題のみ残っています。
にほんブログ村には同じ趣味を楽しむブログがたくさんあります。興味ある方は、下のバナーをクリック!
にほんブログ村 写真ブログへ  にほんブログ村 写真ブログ デジタル一眼レフカメラへ  にほんブログ村 鉄道ブログへ  にほんブログ村 鉄道ブログ 鉄道模型へ  にほんブログ村 その他日記ブログへ  にほんブログ村 その他日記ブログ 気ままへ

COMMENT

EDIT COMMENT

非公開コメント