おやぢの部屋2
jurassic.exblog.jp
ブログトップ
サイトのリニューアル
 連休の1日目、「演奏会の写真を・・・」とか言っていましたが、その前に片づけなければいけないことが出来てしまって、まずはそちらから着手ということになってしまいました。それは、「禁断」と「おやぢ」のリニューアルです。「なにそれ?」という人もいるかもしれませんが、いいんです。とにかく、そういうページが私のサイトにあるんですよ。毎日交互に更新をしていて、それは、そのままコピーして「おやぢの部屋2」という私のブログに掲載しています。さらに、そこへのリンクをFacebookから張るという、まるで作った翌日に食べるカレーみたいな、同じものでも2度(3度?)おいしいというコンテンツです。それのデザインを変更した、ということなのですよ。
 そのサイトは、もう作ってから15年も経っています。これまでに時折マイナー・チェンジは行ってきたのですが、最近はさすがにデザインが古いというか、素朴というか、なんの工夫もないシロートっぽいところが鼻に付くようになってきました。そこで、全面的に「テーブル」を使って、まるで出来合いのブログのスキンのようなデザインにしてみようと思ったのです。
 これは、今まで普通に書いていたテキストなり画像なりを、そのまま「枠」の中に閉じ込める、という技法です。縦3×横3という升目を用意して、その真ん中の升(「セル」と言います)の中にその今までのテキストを流し込み、まわりの8つのセルに画像をはめ込んで「枠」を作るということです。ソフトの上での表示では、こういうことになります。

 これをブラウザで見ると、

 このように、まるで和紙の中に文字が書いてあるようなデザインに仕上がるのですね。
 実は、このやり方はすでに、やはり私が作っている仙台ニューフィルの公式サイトで使っています。そのノウハウがありますから、手順的には今度の私のサイトでのリニューアルはそんなに難しいことではありませんでした。ところが、完成していざアップされたものを見てみると、ある部分で「隙間」が空いているのですね。上の図のように、枠は分割した8つの画像をつなげて作っていて、その境目は絶対に分からないようになるはずなのに、左の縦の境目が、上から下まで1ピクセルの隙間が空いてしまっているのですよ。
 不思議なことに、それは今デフォルトで使っている「Chrome」で見た時だけに起こります。その他のブラウザ、「IE」、「Firefox」、「Safari」では、全く何の問題もなく表示されているというのに。これには困ってしまいました。正直、こんな状態では全く打つ手がないのですよね。ですから、その隙間が目立たなくなるように、ページのbackgroundの色を、テーブルのベースの色と同じにして、とりあえずはごまかしておきました。でも、いろいろなソースを見ていると、全てのセルに画像を「image」ではなく「background」として挿入しているところもあるんですね。私の場合は、角のセルは「image」、その間のセルは「background」にしてありました。つまり、サイズが決まっている四隅以外はサイズが変わることがあるので、「background」にして、画像が連続してつながるようにしておかないと対応できないからです。それが普通のやり方なのですが、ダメモトで、四隅のセルまで「background」にしてみたのですね。そうしたら、見事にこの問題は解決されてしまいました。
 でも、今度は別のところで問題が発生しています。両方とも、アクセス解析のためのバナーが一番上に表示されているのですが、それを隠すためにその部分を黒くした縦長の素材をページの「background」として使っています。その繰り返しの部分が、なぜかiPhoneのSafariだけで、縦線になって見えてしまっているのですよ。PCの各種ブラウザや、iPadでは、そんな線なんか全然見えないのに。まあ、この場合はそういうデザインだと主張することもできるので、もう惑わされるのはやめにしましたよ。

 と書きながら、いったいなんのことなのか分からない人はたくさんいるだろうなあ、と、思っています。こんなことは、普通に生活していく上では全く何の必要もないことですからね。
[PR]
by jurassic_oyaji | 2014-11-01 22:06 | 禁断 | Comments(0)