Word 2007を使って、HPを作れるらしいが、Seesaaブログでも使えそう。
そこで、作ってみました。本館の「世界遺産スクレ観光」のページです。ブログの中にホームページがあるような感じです。
サイトマップとして使える目次をWordで作る
このメニューページは、「WORD 2007」を使ってつくってみました。ところが、アップすると画面構成が崩れてしまいます。しかたなく、alphaEDITを使って、WORDでつくったものをコピーペしました。
少しずれていますが、まあ、こんなものでしょう。
最初、WORDでつくれるのでこれは簡単だと喜んだのですが、htmlを見てびっくり。何が何だかさっぱり分からない！ ネットで検索したら「htmlが汚い」との書き込みがありましたが、確かに汚い。１行ずつ定義をしているのか、大量のコードが書かれていて、とても読む気にならない。これがフリーソフト『alphaEDIT』で作り直した理由です。それに、WORDだとたくさんのファイルをアップしなければならず、これをseesaaブログでやるのはちょっと大変なので、普通に作り直しました。
そうは言っても、かなり役立ちます。ご参考までに作り方をご紹介。下の画像は、WORDで作ったものです。
設定
① WORDを起動し、画面右下の「webレイアウト」のアイコンをクリックし、webレイアウト表示にする。
② ホーム＞段落 で、中央揃えにする。
③ テキストボックスを使って、好きなようにフレームを作っていく。上の例では、トップ画像、および記事の欄を二つに分けたテキストボックスを使った。
④ テキストボックスの下に、Copy rightや「トップページに戻る」などを入れる。これって対策上、結構重要らしい。
ちょっと便利
作業はこれだけ。
後は、普通にWORDの機能を使って、テキストボックスの背景の色を決めたり、テクスチャにするとか、お好きなように。
ちなみに、水平線も簡単に入れることができる。
ページレイアウト＞ページ罫線＞線種とページ罫線と網掛け設定＞水平線 を選択。
また、背景は、
ページ レイアウト＞ページの背景＞ページの色＞塗りつぶし効果 でお好みのものを。せっかくなので、「テクスチャ」がいいかも。
WORDでつくるメリットは、ボタンのようなものがテキストボックスで簡単につくれること。wordをhtmlで保存すると、このボタンのようなものは、画像として保存されます。これって、ボタン作りには最適です。何しろWORDなのでワードアートが使えます！ そして作ったものを画像として簡単に保存できるということです。
ボタンアイコンの作り方
① テキストボックスに文字を入れる。
フォントを太字のものに変更する（例では「ふみゴシック」を使用）
② ホーム＞段落 で水平方向を中央揃えにする。
③ 右クリック＞テキストボックスの書式設定＞テキストボックス で、「垂直方法の配置」を「中央揃え」にする。
④ 書式＞テキストボックススタイル で、メニューの中からグラデーションのきれいなものを選ぶ。
これで、ボタンのようなものが完成。
これは見出しとして使っているが、ボタンとしても使える。
ボタンのリンク設定
① 上で作ったテキストボックスを左クリックして選択し、右クリック。プルダウンメニューから「ハイパーリンク」を選択。開いたウインドウの「アドレス」にリンクしたいURLを記入。これで、ボタンとして使える。
保存
① Officeボタン＞「名前をつけて保存」をクリック。下の画面の「ファイルの種類」で［webページ（*.htm、*.html）］を選び、ファイル名を記入し、拡張子を「.html」にする。ここで、「タイトルの変更」をクリックして、タイトルを入力すると、“ページのタイトル”を変更できる。
② そうすると、ファイル名（たとえば、AAA.html）と付けたとすると、『 AAA.files 』というフォルダが作成される。この中に、先ほど作成したテキストボックスが画像ファイルとして保存されている。
この機能は、ボタンを作るのにすごく役立つと思う。
WORD 2007で作ったページをSeesaaブログにアップする
ここでやっかいなことが。Seesaaブログでは、フォルダを作ることができるが、使えるのは英数字だけなので『 AAA.files 』というフォルダは作れない。これはやっかいだ。Seesaaブログに別の名前のフォルダ（下の写真では『AAA』というフォルダ）を作り、そこに、AAA.filesの中身を全てアップする。
次に、AAA.htmlのリンクの張り直し。既定ではAAA.filesを参照しているので、これをアップしたフォルダ名『AAA』に変更する。
AAA.htmlをメモ帳でもalphaEDITでもなんでも良いから、開く。
検索で、（この例では）AAA.filesを探し、これを絶対パス（http//****というやつ）に書き換える。
終わったら、これを保存して、SeesaaブログのAAAフォルダにアップする。
なぜ、AAAフォルダにアップするのか。それは、ホルダごと削除するため。
Seesaaブログでは、同じ名前のファイルでも上書きされず、同じ名前のファイルが二つできるようです。これは、ブログ記事ではなく、別につくったページをアップするときです。このため、このAAA.htmlファイルの他のフォルダにアップすると、更新のたびに同じ名前のファイルができてしまうのでどれが最新なのか分からなくなります。また、古いファイルにリンクされ表示されるようです。これを避けるため、AAAフォルダにAAA.htmlをアップし、更新のたびにフォルダごと削除した方が良いのではないかと思います。このため、絶対パスにしています。
表示がずれる
「やっとできた！」と思って、webで表示してみたら、右に寄って表示されています。どこかで間違えたか？ 途中ではちゃんと表示されていたのに。ソースを見て驚いたのは、WORDでつくったため、膨大な量のソースになっていて、原因を追求する気力も失せました。
そこで、『alphaEDIT』で作り直すことに。でも、シンプルだし、アップするのはhtmlのファイルと画像ファイルだけ。htmlファイルを画像ファイルと同じフォルダに入れれば、パスをいじらずそのままアップできるし、フォルダ毎削除できるのでとしても便利。
こうやって作ったのが、本館にアップしたページです。右サイドバーに、「世界遺産スクレ観光」というでかいバナーがありますので、よろしかったらご覧ください。
ブログ・イン・ホームページのようで、結構いいかなぁと思います。記事投稿のフォームでは、こんな風にはとても作れません。私には。
