RapidWeaver の使い方・メモ

スポンサーリンク


RapidWeaver を Setapp で使えるので、サイト制作に導入することにしました。情報源が英語しかないので、分からなくなったときのためにメモしておきます。

似顔絵サイトを新しく作るのにカラーミーショップで作るつもりでいたんだけど、あまりうまくいきませんでした。
カラーミーにアクセスして、分かりにくい文字の羅列をかいくぐり、さらに多すぎるフォームを前にして、型番なんかをつけたりしなきゃいけない。
クレジットカード決済とかもややこしいし、それなりに月額料金を取られるのは馬鹿らしい。
そのお金を Setapp にをまわしたかったので、カラーミーショップは止めて思い切って RapidWarver でいくことにしました。

RapidWeaver を採用する理由


  • Setapp のおかげで安価で利用できる
  • アプリなので直感的。日々の更新が簡単
  • 静的サイトとして書き出されるので、表示が高速
  • 書き出される HTML がキレイ
  • Publish を押したら、サーバーにアップされる手軽さ
  • メールフォームが内蔵されている
  • テーマによるけど、レスポンシブデザインなフレームワークを使える

とても大切なテーマの改造について


  • ThemeFlood というサイトで Minalicious というテーマを無料で購入できた。paddle という決済システム経由でのダウンロードになるけど、無料だった。
    • 仕事が順調に入ってくれれば、テーマやアドオンを買い足すという選択肢も生まれる
  • Preferences > Addons > Reveal in Finder をクリックすると、Finder にアドオンがあるファイルが表示される。Themes フォルダに入ってテーマファイルを選択、右クリックして「パッケージの内容を表示」を選ぶと HTML や CSS が入っているので、ここをいじればテーマのカスタマイズができる。
    • しかも、リアルタイムに RapidWeaver 側で反映される
    • テーマを本格的にカスタマイズする前に、テーマファイルをバックアップした方が良い。
    • 毎回、Preferences から入っていたら時間がかかるので、テーマファイルへのショートカットをドックなりお気に入りのランチャーなり、どこかに作っておくと良い
  • CSS を編集するだけであれば、テーマファイルを下手にいじらずに標準でついているカスタム CSS の機能を使って上書きしたほうが良い。サイドバーの Code > CSS に CSS の記述を追加していけば良い
    • ちなみに、プレビューで要素を右クリックして Inspect Element を押すと、CSS の指定名称がわかるので、HTML 上でダブルクリックしてコピペすれば良い
    • 個々のページの Inspector にある CSS 欄に記述すれば個々のページの CSS を上書きできる。ぼくは使わない。
  • テーマを改造したら、テーマファイルのアイコンをダブルクリックして、テーマをインストールし直す必要があるのかもしれない。

HTML が記述できる


  • Add から普通に HTML Code を追加できる
  • Bootstrap に準拠して HTML を記述すれば、キレイなレスポンシブデザインのサイトを作れる!
  • RapidWeaver-Bootstrap-Snippets をダウンロードして RapidWeaver に入れておけば、簡単に Bootstrap のタグを入力できる!

RapidWeaver の Tips メモ


  • Add で使いするページに Styled Text を選ぶと、font タグが HTML にたくさん入ってしまい上手くいかない。Markdown を選んだほうが HTML がキレイになる
    • 画像を入れたい場合も Markdown で記述する。まず使う画像を Resources にドラッグしてストック。 Markdown 記法で画像を指定する。 ![alt](画像URL) が画像の記法。画像を選択して Copy Macro を押してから、画像 URL 部分に貼り付ければ OK!
  • Ver 7 からの機能だけど File > Precview Page in... で、ブラウザでプレビューできる。しかも、更新がライブで反映される。
  • View > View Source で HTML ソースをチェックできる。ここから編集することはできない。
  • Offsite page を使えば、メニューに外部リンクを置ける。URL は Inspector のオプションに書く欄がある。ぼくはこの機能を使って、ブログだけ、このサイトへのリンクを貼ることにした。
  • アクセス解析も設置できる。サイドメニューから Code > Head を選択して、そこに Google Analytics のコードを貼れば良い。ぼくの場合は Piwik のコードを貼る。
  • RapidWeaver からロゴを入れ替えたのにブラウザ上で変わらない場合、キャッシュが残っているから。ファイル名を変えてロゴを入れ替えれば確実にすぐに表示される。
  • アクセス解析の Piwik が大量のアクセスを誤認識していた。RapidWeaver でプレビューする度にアクセス解析に読みこまれていたようだ。Offsite Page で一時的に Piwik の URL に飛ぶようにしてから、Piwik でクッキーを使って除外にすれば OK!
  • Publish して 403エラーが出るようなら、ファイルを少し修正してもう一度 Publish すれば案外いけたりする。
  • 公式のビデオチュートリアルは有料会員にならないとほとんど見れない
    • Getting Started と New Features in RapidWeaver 7 のカテゴリーの動画は無料で閲覧できた

似顔絵のご注文は、RapidWeaver で作成したサイト「にすぎや」にて承っています。

スポンサーリンク