iWeb – Template 改変 1 ページ幅

Digitalboo penguin

ここからはとても素人臭くなると思います。なぜなら私が素人だからです。
それに、デザインの好き嫌いは個人的な問題なので、バグのあるフォントを改変する以外は、特に必要性の高いものではありません。
  *こちらのサンプルページを参照してくださいませ
Appleのデザインしたテンプレートは、各部品はともかく、ページ全体のデザインがどうもいただけません。いくら素人でも変えたいものは変えたいのであります。
まずはiWebのパッケージをどんどん開いていって、index.xml.gz を見つけて解凍、元のファイルは退避させます。
index.xmlをエディタで開いて、ごちゃごちゃのソースを眺めますが、何が何だかよくわかりません。
同時に、iWebを起動し「新規ページ」で該当のページを開きましょう。インスペクタを表示し、色んな数値をソースと比較します。
まず個人的にページ幅が700pxあるのが気に入らないのでこれを変えてみましょう。
ソース”700”で検索すると色々な”700”があります。
size-width=”700″ とか sfa:w=”700″ とか。number=”700″ってのもありますが、結論から言うとそれも含みます。とにかく「検索・置換」で “700” を”550″ にしてみました。
iWebで「新規ページ」を選んで確認します。こうなりました。
ページ幅は550pxになりましたが、部品がずれています。このズレを比較しながらソースを変えていきます。
例えば、はみ出した横棒、インスペクタでは「起点35px 終点665px」になってます。
ソースを”35″ “665” “78”(これはY位置)などで検索してその周りのタグを確認すると、起点とオブジェクトの長さで記されているのがわかりました。
「”35”位置から”630″の長さ」というような記述です。ページ幅550の両端35pxずつ空けるとすれば、”630″ を検索して “480” で置き換えれば丁度よくなる計算になります。
“630” で検索すると、横棒だけではなく、画像やテキストボックスの幅なども同じ数字で揃えられていることに気付きます。
そこで、ソースの “630” をまとめて”480″ に置換しました。
こうなりました。 画像が歪んでしまいましたがまあいいか。
最後にアップルマークの位置を置き換えて取りあえず完成 です。
他のテンプレートでも基本は同じ。
オブジェクトをiWebのインスペクタで確認し、ソースで検索・置換。これで大抵のものは思い通りです。

コメントを残す