Macテクノロジー研究所

アクセスしていただければサイトの雰囲気ががらりと変わったことは明白…(笑)。まだ試行錯誤の部分があるので変更の余地もあるが、ラピッドウィーバー(RapidWeaver) によるサイト構築をやり始めてから早くも2年近く…やっと念願のオリジナルテーマを採用することに挑戦した次第。 

ここで言うところのテーマ(theme)とは、ウェブページの上部に表示するグラフィック部分のことである。RapidWeaverはアプリケーションのリソースとしていくつかのテーマが組み込まれ、それらを選択するだけで “それらしい” ページを作ることができるわけだが、残念ながらアプリケーション自身にはオリジナルのグラフィックと簡単に入れ替えるような機能は持っていない。 

 
※ラピッドウィーバー (RapidWeaver)3.6のテーマ選択機能 

RapidWeaverを使い始めてから久しいが、このテーマがずっと気になっていた…。RapidWeaverにスイッチした際の事情もあり、まずはコンテンツの移動が最優先だったから、テーマの一部に3Dで作った林檎のデザインを載せてしのいできた。しかしそれだけではどうにも物足りないため、テーマの下にオリジナルな主張を加えてきたものの、サイト製作のプロである友人からは「スペースの無駄」と言われていた(笑)。 

さてご承知の方も多いとは思うが、RapidWeaver自身には前記したようにユーザー独自のテーマを採用する機能は持っていないものの、サードパーティからはすでにプロたちがデザインした多くのテーマが有償あるいは無償で提供されている。さらに「RWThemeMiner」や「RWmultitool」といった、テーマをカスタマイズするためのアプリケーションも販売されている。したがって私もそれらを入手してあれこれとやってみたが、正直RapidWeaver専用のソフトとしては気に入らない部分や使い勝手の悪い部分、そして一部に納得できない部分があったりするので本格的な使用は控えてきた。 

ともかくご想像いただけると思うが、現在運営中のページ全体のデザインを大幅にリニューアルすることは結構大変な作業となる。RapidWeaverでオリジナルテーマの採用は大げさになるがある種の改造となり、注意深く作業を進めないとそれこそアプリケーション自身を壊したりしてサイト運営に支障が出てくる可能性もある…。 
ということで、サイト更新を休む土日を使って前記したアプリをあらためて調べたりしている内に今更ではあるがテーマの構成や関連データのあり方などが分かってきた…。であるなら下手にツールを使うまでもなく、現行のテーマデータを同じファイル名でオリジナルなものと入れ変えれば済むと考えた。特にテーマの改造だけならその方が事は早い(笑)。 
以下取り急ぎテーマをオリジナルなものと入れ替える手順を示すが、あくまで本例は個人的なものであり、もしかしたら言葉足らずの部分もあるかも知れない。また改造の方法もいろいろとあるようだから、同じ事を実践された結果の責任は持てないことを明言させていただく(笑)。 

私はRapidWeaverの組み込みテーマの中で「ブログ」というテーマの「緑」というスタイルを使ってきた。ここでいきなり現在のテーマならびにスタイルを変更するのは危険なので、同じ「ブログ」の中にある「青い草原」というテーマをオリジナルなものに変更し、その後でRapidWeaverの設定をこれに合わせるという方法を取ることにした。ちなみに何故「青い草原」なのか…。それはそのページカラーの基本がシンプルなブルー系なので、これから改造・変更したいとするオリジナルテーマデザインにもしっくりいくのではないかと考えたからだ。 

早速だが、一番の問題は改造・変更する「青い草原」というテーマデータがどこにあるかだが、前記したようにRapidWeaverのテーマはアプリケーションのリソースとして存在している。そこでまずRapidWeaverアプリケーションを選択し、マウスの右ボタンをクリック…すなわちコンテクストメニューを表示させその「パッケージの内容を表示」を選択する。 
ここで「Contens」ホルダーが表示されるはずだが、ウィンドウの表示方法をカラム表示にしておくと次からの手順がやりやすくなる…。 

 
※ラピッドウィーバーのアプリを選択し、コンテクストメニューを表示の上で「パッケージの内容を表示」を実行する 

「Contens」/「Resources」/「Install」と階層を追うと「Install」の中に組み込みのテーマデータがずらり表示されるはずだ。今回はその中から「Blog.rwtheme」を選択する。なぜなら前記したようにターゲットは「ブログ」というテーマだからだ。 

 
※「Contens」/「Resources」/「Install」と階層を追うと「Install」の中に組み込みのテーマデータがずらりと表示する 

ここで再び前記の要領で「Blog.rwtheme」をターゲットとしてコンテクストメニューから「パッケージの内容を表示」を実行する。 
「Contens」フォルダの階層を追い「images」の中を見ると「bluegrass」というフォルダがある。無論これは前記した「青い草原」のデータ名だ。そしてそのフォルダ内にある「header_bg.png」が改造しようしているオリジナルテーマのグラフィックデータである。 

 
※前記の要領で「Blog.rwtheme」をターゲットとしてコンテクストメニューから「パッケージの内容を表示」を実行(上)。続けて「Contens」フォルダの階層を追い「images」の中を見ると「bluegrass」というフォルダがある(中)。その中の「header_bg.png」イメージファイルをQuick Lookで確認(下)。このデータをオリジナルなイメージと変えることになる 

ここではいつでもオリジナルな環境に戻せるようにと、まずは「header_bg.png」の複製を作ったが、幸い問題がないようなのでそのままそこに置いておくことにする。 
そして別途同じサイズならびに解像度で作成し、ファイル名を「header_bg.png」と.png拡張子を持つグラフィックデータを重ね書きすればこの時点での作業は完了である。 

 
※別途Photoshopで「header_bg.png」と同じサイズのオリジナルテーマをデザインし、.pngファイルとして保存するが、ファイル名は元データと同じく「header_bg.png」にする 

なお、間違っても他のデータ類を移動させたり消さないように注意をしながら作業を進めなければならないが、問題がなければすべてのウィンドウを閉じて当該変更を加えたRapidWeaverを起動してみよう。 

この後はすべてRapidWeaver上での作業である。例では「設定」ボタンから「ページインスペクタ」ウィンドウを開きその「テーマのスタイル」を選択。そしてページのスタイルをこれまでの「ブログ」/「緑」から「ブログ」/「青い草原」に変更する。 

 
※RapidWeaverを起動し「ページインスペクタ」の「テーマのスタイル」を開く。そしてページスタイルの「スタイル」を「緑」から「青い草原」に変更する。万一表示にトラブルが生じたら即元に戻すことができる 

そしてページをプレビューさせればそのテーマが、先に入れ替えたオリジナルなものに変わっているはずだ。 
基本的にはこれでテーマの変更は完了したわけだが、サイト構成によってはテーマ上に表示させていた「見出し」…すなわちテキスト類を消去したり、細部の構成を編集し直さなければならないことになる。無論新しい構成を検証後は設定の保存はもとより、各サイトページを新たに書き出すことになる。 

※これまでのトップぺージおよびテーマデザイン(上)と、スタイル変更と共にテーマをオリジナルなものに変更したプレビュー例(下) 

以上当サイト自身の実体験をレポートさせていただいたが、作業自体は決して難しいことではないものの、大切なことは「自分はいま何をしようとしているのか」を十分理解した上で作業を進めることが肝心だ。間違っても面白半分に始めては、くどいようだがトラブルの元になる可能性もあるのでご注意いただきたい。また作業に当たりRapidWeaverはもとより、関連データのバックアップコピーを取ってから作業を進めるべきだ。 
本来は専用ツールなどを使うことをお勧めすべきなのだろうし、今回のようなやり方はストレートで些か乱暴かも知れないが同じようなことを考えている方々に少しでもご参考になれば幸いである。 
今後はテーマそのものの完成度を上げると共に、各細部のカスタマイズを少しづつ実践し、可能な限り好みのデザインに仕上げたいと考えている…が、これまたいつのことになるのやら…(笑)。 

【参考】 
・RapidWeaverで簡単HP作成
・RWThemeMiner
・RWmultitool