DigitalBoo

iWebにコメントを付けるiCommentというソフトがあるらしいです。iComment

英語のページは問答無用で翻訳サイトのお世話になっているのですが、このページを翻訳ソフトにかけてみたところ、タイトルと日付だけが翻訳されました 。
・・・文字がイメージになっているのでした。

テンプレートでのオブジェクトの位置や大きさを実測に基づいて変更する手順は以前書きました。

あとはフォントサイズさえ指定できれば、とテンプレートソースをじっくり見ていたんですが、やっぱり分からなかった。
サンプルサイト 　本日のリンク記事
そもそもiWebでは、ページ毎にフォルダが作られ、その中にそれぞれ個別にCSSファイルが作られます。
フォントサイズなどは全てこのCSSファイルに書かれています。
ページを作成中に変更した数値はCSSには反映しておらず「そもそものCSSでの設定をページ内記述で変更した」にすぎません。無駄以外の何ものでもないです。
調べてみたところ、ページ毎に作られる個別CSSは、名前は違うが内容は同じものでした。
これは悔しいですね。
アーカイブやBlogページと異なり、ページ毎に作られるCSSを後でまとめて変更することは解決にならないし現実的ではありません。
中身が同じCSSがフォルダ毎に個別に生成されるとなれば、生成元はやはりテンプレートソースしかないと思うのですが、もともとこの手の知識に乏しい私には解析不能です。
テンプレート内で、どの項目がCSSに反映されるのか、
これが解る方がおられれば、是非教えを請いたいと思います。
・・・ページ内、エントリー内は、その都度フォントサイズや色を再指定するしかなさそうです。
というわけでiWebとの格闘も最早これまで。
あとは皆さんの健闘を祈ります。

BlogやPodcastでは、リストとアーカイブのページが自動的に作られます。
しかしフォントがデカすぎてみっともない。何とかもうちょっとマシなものにしたいところです。

公開されたフォルダを覗いてみると、簡単な場所にcssファイルが作られていました。
　サンプルサイト ではこのページ に関連しています。

公開されたフォルダを見てみると、iWebフォルダの中にそれぞれのサイトフォルダが、サイトフォルダの中にそれぞれのページフォルダがあります。
ブログ系のフォルダの中にはブログ名を冠したリストページとアーカイブページのフォルダが見つかります。”Archive_files” と ” (blog名)_files” ですね。
この中にcssファイルがありますので、エディタで開いてフォントの大きさやなんかを変えてしまいます。

テンプレート改変と異なり、cssファイルはコンパクトで中身の把握も容易いです。
.Summary_Date_Archive
.Summary_Read_More_Archive
.Summary_Title_Archive
こういった括りになっているので、font-sizeやline-heightなどの数値を変えて保存。

キャッシュの悪さに気をつけてリロードするとちゃんとウェブサイト上で反映されていることが確認できるでしょう。

気になることは、iWebを更新するたびに、せっかく書き替えたcssがデフォルトに戻ってしまうのではないかということです。
これに関してはよくわかりません。戻ってしまうこともあるし、書き替えたものが生きていることもありました。

面倒ですがこれは手動で行うことしか思いつきません。よくわからないからです。
私は公開先のフォルダのエイリアスを使ってポイポイと放り込むような手筈を整えましたが、今のところ更新しても毎回cssが初期化されてしまうことはないみたいで一安心です。

テンプレートを眺めていてわかりましたよ。・英文でもテンプレートによってテキストがイメージになってしまう場合がある
この謎が解けました。

ちょっと話題が前後するけど、これは進展です。
詳しくはサンプルページ でどうぞ。
BlogからBlog 2への流れでお読みください。
.
.
.
ようするに画像化する筈のない Arial が、何らかの不具合で画像になってしまってたわけです。

テキストエディタの検索・置換などを用いて、Arialを殺し、テキストのままで出力されるフォントに変えてあげれば解決、とそういうことですね。

これにより、テンプレートによって挙動に一貫性がない謎が解けました。
では
サンプルblog2のこのページ の後半の実験について解説します。

1　どこにも半角スペースを入れない場合、1字でも行を折り返すと、テキストが画像になる。

2　一つの半角スペースのおかげで、多少の折り返しがあってもテキストはテキストのまま。

3　沢山の半角スペースで「分かち書き」。これは安全。

4　2と同じ場所に半角スペースがあっても、折り返しすぎたらテキストは画像になりました。

5　2、4と同じ場所に半角スペース、折り返した文章が短いとテキストのまま出力された。ハテナハテナ。

6　そこでふと、こういう実験。折り返した後のテキストの終わりが、前の行の半角スペース位置より後ろ。画像になった。

7　そこでふと、こういう実験。折り返した後のテキストの終わりが、前の行の半角スペース位置と等しい。テキストのまま。

8　こうなると、8は余裕です。

応用問題。

行の前のほうや後ろのほう、色んな位置に半角スペースを入れてみている。折り返しても、前行のスペースの位置より手前で止めるかぎりそのテキストはテキストのままです。
最後の「あ・い」はさらに応用問題。

1行目のスペース位置の手前で「あ」の折り返し終了。ここでスペース。「い」がスタート。「い」にもスペースを入れる。

折り返した「い」はあくまで「い」のスペースからスタートしているので、前行「い」のスペース位置を越えなければテキストになる。
まとめるとこうです。

行をまたがるとき、前回のスペース位置を折り返して越えてはならない。
これでテキストはテキストのまま出力されます。
ここまでの調べで判ったことと併せるとこうなります。

1　テンプレート
テンプレートによって英文でさえ画像になるものがある。
そのテンプレートを使わないか、またはテンプレートを開いてフォント(Arial)を変更する。

2　フォント
ゴシック系以外は画像化する。装飾を施したり、画像化するフォントとの混在も画像化する。

3　文章
テキストボックスで折り返しがあると画像化する。
折り返しがあるときは、半角スペースを挿入する。
その時、前回のスペース位置を折り返して越えないように次のスペースを挿入する。

4　画像化してしまったテキストボックスはコピペで修正しない。破棄する。
（1～3を守れば、想定外の画像化は起こりませんのでこの項目は厳密には不必要になります）

すっきりしましたね。

テンプレートについて書く前に、テキスト画像化について現時点でわかってきたことをまとめておかなければなりますまい。

※iWebシリーズはサンプルサイト と連携しています。併せてご覧ください。

1　テンプレート
WhiteやBlackは画像になりやすい。
アーカイブやブログリストページは特に「ほぼ間違いなく画像化」します。
エントリーページで、以下に示す「テキストのままになりやすい」方法で作成しても尚、画像になってしまうことがあります。
Modernは上手に使えばアーカイブやブログリストページもテキストのままになりやすいです。
条件は「エントリーページ内のアーカイブに使用されるオブジェクトに画像化されたテキストがあってはならない」です。

2　フォント
フォントは角ゴシックやOsakaなど、ゴシック系のものを選ぶのが基本です。
明朝系は画像になります。
下線や影などの装飾、異フォントの混在などを行うと画像化します。

3　文章
基本は「テキストボックス内で折り返さない」ことです。無茶ですがこれが基本です。
もう一つは「単語間に半角スペースを挿入して分かち書きにする」ことです。
沢山のスペースを挿入することで、ほんの少しの折り返しならそのままテキストになることもあります。
ただし、1のテンプレートとも密接で、ほんの一文字の折り返しがBlackテンプレートでは画像に、Modernテンプレートではテキストのままになったりします。
「テキストボックスで折り返さない」ですが、ブログリストページとエントリーページでの整合性を取るのが難しくなります。ここでも、画像化しやすいテンプレートとそうでないテンプレートでは挙動が変わってきます。WhiteとBlackでは油断するとすぐに画像になりました。
「折り返ししない」と「頻繁な半角スペース」を併用するのが望ましいでしょう。・・・さらに無茶ですが。

4　コピーペーストの危機
無茶な条件下で気を遣っていても、公開したら意図せず画像になってしまった。。。という状況に陥ることもあります。
そんなときはiWebに戻って作業をやり直しますが、画像になってしまった（画像になる筈がない）テキスト、これを再利用できません。
テキストボックスごと違うページにコピーペーストして再編集しても、テキストボックスの内容をコピーペーストして安全であろう編集をしても、どういうわけか一旦画像化を経験したテキストはどこにどう持って行ってもほぼ画像になってしまいます。

これを呪いと言わずに何と言おうか。

解決方法はありません。画像化しにくいテンプレート上で、デフォルトのあるいは新たなテキストボックスに手入力で同じテキストを作成するしかなくなるのです。
あるいは、一旦他のエディタを介するのもいいかもしれません。

なんせ呪いに対抗するのですからもはや理屈じゃありません。
以上が現時点でのまとめになります。

鳴り物入りで登場したiLife06に含まれるiWeb。テンプレートに放り込むだけのかんたん仕様、しかしこれがとんでもない代物でした。
ここでは、その問題点を指摘したいと思います。

サンプルページ をご覧ください。
このように、文字が画像になります。テンプレートやフォントの選び方によってはテキストになるようですが基本的には画像です。
言うまでもなく、テキストを画像にすることは
1 ページが重い
2 選択できない
3 検索できない
4 引用、流用ができない
5 文字サイズを変更できない
など数々のデメリットがあります。
ではメリットはあるでしょうか。文字を画像にするとレイアウトが保持できるのがメリットでしょうか？
まず、画像ファイルにレイアウトも糞もありません。これはただの画像ですので、クリッカブル指定できる画像編集ソフトを使えばもっとへんてこりんなデザインも思うままです。一昔前、最も嫌がられ馬鹿にされたデザイン技法といえるでしょう。
もうひとつ、で、これはレイアウトを保持する価値があるデザインなのか。
ご覧の通り、フォントサイズや文字間隔など、とても格好悪いです。これは日本語フォントと欧文の違いによって発生する問題で、日本語フォントとの相性はすこぶる悪い。日本語フォントを使用する前提で作られていないということがはっきりわかります。
もちろん、各ページ内のフォントやサイズは作成時に変更することが出来ます。
サンプル2 のように、文字を小さくすることができます。
しかし、ブログテンプレートにおいてはそれもできません。
ブログページ とアーカイブページ のこのフォントは変更できません。
かろうじてエントリー内は変更できますが、しかしここでまた問題発生です。
エントリー内で変更したものは新しいエントリーで変更が受け継がれません。
文字サイズくらいならともかく、例えば画像の大きさや「次へ」などの位置を変更しても新規エントリーで全て無効になります。冗談抜きで「一切合切全て」テンプレートから外れることが出来ない仕組みになっています。
テンプレートを使用する同じ思想のソフトにKeynote、Pages、iDVDなどがありますが、いずれも多少の変更ができるようになっています。iWebのお仕着せはいくらなんでもあんまりな気がします。