スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ホームページビルダー10でFC2ブログを編集(やっと)
picartblog1

Homepage Builder 10 でこのブログを編集してみた。
といっても、現在のブログの状態をここまでまともにBuilderに表示できるようになるまで何と、2日もかかってしまった。
で結局どうすればこうして編集画面に正常に表示できるかということは、せっかく自由さ最大のFC2ブログに異常なミス・スクリプトをアップしてメッチャクチャにされても困るので、詳しい手順は書かないことにするけれど(関係ない?)、非常ぉ~に大変でした。

CSSの有効範囲とか、HTMLのタグの属性をこれは何だっけとか、ちょっとこうしたいというデザイン的なアイデアを実際に表示させるにはかなり総合的なWebコンテンツの知識が要るぞしかし。

何が一番引っ掛かったかというと<div>の扱いだった。
ブラウザが表示(出力)するブログのHTMLソースをそのままBuilderに読み込ませるとご存知のとおり、レイアウトがめちゃくちゃになるよね。
現在ブログに使っているCSSを「適用」させてもガタガタです。だいいち文字エンコードからして違ってしまう。


このレイアウトはいったいどうなっているのか?と修正にスクリプトを直接いじりだすと何処とどこが対になっているのかわけがわからなくなってしまう。むろんガタガタのまま終了。いい線まで行ったんだけどね。

原因はメニューブロックの大半が別のベースブロック<div>として扱われてしまうことだ。
どのような表示かというと、途中まで切れ端になったメニューブロックの残りが、はるか下のブログの終点で別ベース内に始まっているという状態。HTMLはトップダウンだからね。
もしかしてブラウザの未表示部分<div>がこうなるのかもしれない(オカルト?)し、IEでソースを取り出せばうまくいくのかもしれない(ちなみに私はOpera使い)。しかしこの修正はかなり勉強になるので挑戦してみた。

むろんビルダーの「どこでも編集」を使えばもっと楽に修正できるが、あれはテーブルタグを駆使して出来上がるレイアウトなので元のソースと似て非なるものになってしまう。それどころかまったく別なやり方だ。

ということでどうしたもんだか…と腕をこまねいて二日め。スクリプトを詳細に読み解くことはやめた(そもそもビルダーがまともな構文的整形をしてくれないんだよ)。仕上がりに近い表示のままで編集できる「ページ編集」画面で、Builderを信じて<div>枠の切り貼りを用いたら意外とうまくいってしまったのであーる。

この操作のかなめは枠選択だ。しかしビルダーのヘルプには部分選択について書かれていない。<div>枠線上の右クリックから枠全体の切り取り・コピーもできない。選択のメニュー項目にも「すべて選択」しかないのだが、実はキーとクリック、つまり「Sift」+マウスクリックで<div>枠の一つを部分選択できるのであーる。
コツは<div>外の始める改行をクリック⇒「Sift」を押しながら終わり<div>外をクリックで選択。こうなれば<div>ごと切り取り⇒貼り付け、が可能だ。「Sift」+↓でも一発で選択できる。長い間マウスしか使わなかったのですっかり忘れていた。
何だか簡単そうだが実はこの操作もある程度HTMLの知識がなければもっとメッチャクチャになるのです。

ホームページビルダー10および解説本のセット ⇔ 安っ。私は当時13,000円で買ったというのに…。

あとは画像リンクを自分の編集用フォルダに手作業でつないでゆく。
これを始めたきっかけがこのブログテンプレート右上の大きな画像で、そこに何か常設表示ができるのではないかと思ったことだ。位置も大きさもぴったりだ。
実際やってみたがビジュアルいまいち…。
このテンプレートのデザインは気に入っていてその大きな割合を占めるのが実はこの画像だったんですね。インパクトあります。
しばらく画像はこのままにしたくなってしまった。

ちなみにこのキリンの大きな画像は上下に分割してあり、軽くロード出来るようにWebデザイナーは気を使っている。

ホームページ作成ソフト EasyHome
おすすめ度 :
コメント:何と 1,995 円(税込) 5年前に作ってくれよぉ…。
ここにある「メーカーサイト」リンクで跳べば、ネット銀行や
コンビニ払いもOK。
スポンサーサイト

Comment

管理人にのみ表示する


Track Back
TB*URL

Copyright © PC修復-コテ先修理. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。