Rapid Weaver!! 2012.5.19

これまでiWebでHPを作り、Mobile Meで公開でしてきたのですが、なんと今年(2012年)6月で、MobileMe が終了することに。それで、急きょ、さくらネットに申し込んたのですが、iWebで作ったこれまでのHPはなかなか公開できず。tiffの画像が引っかかるのだとか*。それで、すべての図表をチェックして直し、何とか公開できたものの、今度は画像が出なかったり、ズレていたり。

 *iWebでお気軽ホームページ
http://lblevery.com/iweb_lab/iweb_howto.html

結局、iWebはあきらめ、iWebに似ていて簡単だというRapidWeaver(バージョン5.2.2)というHP作成ソフトを急きょ購入。ですが、RapidWeaverの使い方はよくわからず。チュートリアルのbeginner用ビデオは、「え、これで終わっちゃうの!?」という感じで、知りたいと思っているところは、分からずじまい。もっと上のレベルのビデオを見ようとすると、チュートリアルを買わないといけない(そんなぁ)。
仕方なくネットで色々と調べたのですが、私のように、「仕組みはわからないけど(分からなくていいけど)、使いたい」というレベルの人からすると、どれも説明が難しすぎる(HTMLの知識が必要と言われても…)。結局、自分で試行錯誤してやってみるしかないと決意し、何とかここまで来ました。

このHPは、Rapid Weaver5だけで作っています。もっといいものにしたいと思えば、アドオン(RapidWeaver Addons)で、色々とソフトを購入しなければならないようです。
ともあれ、Rapid Weaver5を使って、どのようにしてこのHPを作ったかについて、書いてみようと思います。

■ページとテーマを選ぶ
①まず、ページを選択します。
画面の上(ツールバー)の一番左にある「ページを追加する」のアイコンをクリック⇒テキストスタイル
(または)ファイル⇒ページを追加⇒テキストスタイル
このページのような文章を書くページを作りたい場合は、「テキストスタイル」を選びます。

②テーマを選ぶ
ツールバーにある「テーマ」のアイコンをクリック⇒画面の下にテーマのリストが掲示されるので、その中から好きなものを選ぶ。
ちなみにこのHPは「シンプルビジネス」。
どんな画面かを知るには、画面の一番下にある四角形の窓の右側(目のアイコン側)をクリック(⇒プレビュー・モード)。なお、左側(エンピツのアイコンの方)は文章を書いたり写真を貼り付けたりする作業用のページ。

■テーマはほとんど変更できない
テーマを選んだ後、修正を加えたいと思っても、ほとんど(あまり)できません。この「シンプルビジネス」の場合は、サイドバーの位置を右側にするか左側にするかしか選べません。
もっとも、変更できる範囲はスタイルによります。どのような修正ができるかは、以下のようにして「ページスタイル」を見ればわかります。

ツールバーの右側のアイコン「ページ情報」⇒ページインスペクター⇒スタイル⇒ページスタイル

私は最初「iPhone」にしようかと思ったのですが、サイドバーを移せなくて断念。iPhoneの場合、変更できるのは文章の幅だけのようです。
「シンプル」にしようかとも思ったのですが、地のグレーが読みにくいので、これも断念。ここらへんを修正できるといいのですが!!
ということで、つまらないけど無難そうなシンプルビジネスにしました。

■サイドバーは2種類
サイドバーは2パターンあります。一つはシンプルビジネスのように、右か左にあって、そこに書き込めるタイプ。もう一つは、ページの上にあって、そこのアイコンをクリックするとサイドバーが開くというタイプ。お好みで選べばいいのですが、左右の方が一見して分かりやすく、たくさん書き込めます。

■リンクを張る
リンクを張るには、画面下にある茶色のバーの一番左側のチェーンのアイコンをクリックすればオッケーです。ですが、どこにリンクを張るかで、少しばかりやり方が違います。

①他のサイトにリンクする場合
これはネット上の他のサイトを紹介したりする時の方法。

アドレスをコピー&ペースト⇒そのアドレスを選択⇒チェーンのアイコン(「リンクを追加する」)⇒小さな画面が開くので、「URL」を選択。アドレスが書き込まれているのを確認して、「リンクを設定」をクリック

②自分のHPの文章を自分のHPの他のページにリンクさせる場合
こちらは、自分の書いた文章等にリンクを張る時の方法。

リンクを張る箇所(文字)を選択⇒チェーンのアイコン(「リンクを追加する」)⇒小さな画面が開くので、「ページ」を選択⇒リンク先のページを選択し、「リンクを設定」をクリック

③写真などにリンクを張る場合
リンクを張る写真を指定した後は、②とかわりません。以下の写真をクリックすると、esseyのページにとびます。

DSCF8279

■リソースにリンクを張る
私の「論文」のページのように、「リソース」に収録した文書にリンクを張る場合は一手間かかります。最初に、リソースに文章を登録した上で、リンクを張ります。リンクの方法は上記と同じです。
上のバーの左側にある写真のアイコン(「リソースを追加する」)をクリック⇒「リソースを追加」⇒その中に自分の書いたword文書などのファイルを選択します。文書ファイルをリソースにドラッグ&ドロップしても入ります。
リソースにファイルを入れた後、「フォルアを追加」⇒「フォルダ」を選んで、リソースのファイルをフォルダに入れて整理することができます。

ここで一つ問題が。
リソースに入れた文書のタイトルが日本語だと公開の際に引っかかってしまうようです。なので、私は適当な英語のタイトルに修正して、やっと公開に至りました。リソースのタイトルは表には出ないので(リンクを張られる側なので)、自分で何の原稿かが分かればオッケーです。

■写真を入れる
iMedia(メディアブラウザ)⇒写真のアイコンの「イメージ」をクリック⇒置きたい場所にカーソルを置いて、iPhotoの写真をドラッグ&ドロップ
⇒大きな映像⇒メディアエディターを開いて、「大きさ」を縮小

下の写真はメディアエディターで4%に縮小したもの。このHPで使っている写真は、大きなものは18〜20%ほど、サイドバーなどにある小さな写真は5、6%に縮小。適当に%の数値を入れて、バランスを見ます。幅と高さを指定して縮小する方法もあるのですが、縦横のバランスが難しい。

DSCF8279

写真の位置を移動する場合
フォーマット⇒左寄せ、中央寄せ、右寄せの中から選ぶ
これはサイドバーの場合も同じ。
ただし、中央寄せなどをすると、その後の文章も同様になってしまいます。その場合は、写真の後に来る文章を再度左寄せにすれば、直ります。

■グラフを入れる
①他のHPからグラフなどの図表を入れる場合
普通にドラッグ&ドロップ(またはコピー&ペースト)をすればオッケー。でも、重すぎるかもしれません。以前はそのまま載せていたのですが、メモリが少ないパソコンやウインドウズでは、グラフが見えないこともありました。なので、一旦軽くしてから、載せるようにしています。このHPではSkitch Plusというソフトを使っています(gifに変換)。
その場合、載せたい図表をSkitch Plusにドラッグ&ドロップ。写真も同様です。載せたい場所にカーソルを置いて、Skitch Plusをコピー&ペーストすれば、グラフが表示されます。

②エクセルで作ったグラフを入れる場合
これも同じです。エクセルのグラフをそのままコピー&ペーストすればいいのですが、軽くする場合はSkitch Plusに一旦入れてから、挿入します。


■フォトアルバム
フォトアルバムを作るには、あらかじめiPhotoで、HP用のアルバムを作っておきます。
ページを追加⇒フォトアルバムを選択
すると、iPhotoのリストが出るので、その中からHPに載せる写真を選びます。写真のタイトルは、iPhotoのタイトルがそのまま出ます。Rapid Weaverでは修正できないようです。
「キャプション」の欄に、ちょっとしたコメントを書き込むことができます。もっと説明を加えたい場合は、サイドバーに書きます。

■ツールバーのカスタマイズ
少し便利にするために、ツールバーをカスタマイズ。

表示⇒ツールバーをカスタマイズ⇒必要なアイコンをドラッグ&ドロップ
私はメディアエディターをカスタマイズしました。