【Plugin】CSSデバッグツール XRAY を RapidWeaver に導入出来る無料プラグイン Codafy

RW4.4検証済み
このエントリの内容は RapidWeaver 4.4 を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
CSSEdit2などでおなじみのXRAY(X-ray)をRapidWeaverに簡単に導入出来るプラグイン、Codafy が発表されました。
Codafy - RapidWeaver Plugins by NimbleHost

XRAYとは

XRAYとは、CSSデバッグツールと呼ばれる物です。サイトをプレビューした状態で各プロパティの値やID/クラス名を視覚的に確認することが出来ます。
例えば、「自分の使ってるテーマのサイドバーは最大どれくらいの幅のバナーが置けるかな?」、「このパーツを制御したいけど、どのIDを編集すればいいんだろう?」と言うような時にもの凄く便利です。


導入方法

  1. Copafyのページにアクセスして$0で購入(直接ダウンロードするボタンはありません)
  2. ダウンロードしたプラグインをRapidWeaverにインストール
  3. 新規ページでCodafy(コーダファイー)を追加
  4. XRAY Inspectorタブをクリックして「Generate XRAY Button Code」ボタンをクリックして専用のコードを出力(ボタンのCSSを編集する事も可能)
  5. 出力したコードを任意のページに貼付ける

使い方ついて

ボタンを貼付けたらプレビューして「XRAY」ボタンをクリックします。
ページの任意の場所をクリックするとその部分のプロパティやIDなどが表示されます。

作成した
Codafyのページの左上にある「Enable the Webkit Web Inspector」チェックボタンは、Safariの開発メニューにある「Webインスペクタを表示」と同じ機能が使えるようです。(私の環境では再現出来ませんでした)


お勧めの使い方という訳ではありませんが、作成したCodafyをページインスペクタの「出力しない(Enabledのチェックを外す)」状態にして、ボタンのコードを任意のページに貼っても機能しますね。
PlusKitプラグインと併用して全ページのサイドバーに標準装備するのもいいかもしれません。

XRAYウィンドウの解説




XRAY

実際に動きますのでクリックしてみてください。

参考URLCSSEdit 2.5 | ppmweb

blog comments powered by Disqus