超強力オンラインCSSエディタ,URL入力だけで簡単にスタイルシートを自動作成♪。
スタイルシートエディタのWebツールです
ブログのカスタマイズをしませんか?
テンプレートって使っていますよね。あのテンプレートって大体CSSというスタイルシートというので書かれているため、 当サイトでこっそりテンプレートの微修正が可能です。
テンプレートを編集したい
変更の確認が大変
ブログ独自のセレクタがよくわからん
って思ったことありませんか?
「たぬきのしっぽ」では既存のスタイルシートをいじる形をとっているため感覚でデザインできます。 また、ボタンひとつで一瞬で変更結果が分かります。これはサーバに問い合わせていないので、瞬時に変更確認できます。 さらに赤枠表示という機能があり、押している間だけそのセレクタを太い赤枠表示します。 これにより瞬時にそのセレクタの影響範囲が分かります。 、、もちろん普通のサイトも編集可能です。。
起動
たぬきのしっぽの起動はここに編集したいサイトのURLを入れて起動します。
URL
ためしに眞鍋かをりのブログ http://manabekawori.cocolog-nifty.com/ とか
ほりえもんのブログ http://blog.livedoor.jp/takapon_ceo/ とか入れてみてください。
注意点
動作報告をサポート用ブログのコメントに に残していただけないでしょうか?もしくはメールフォームまでよろしくお願いします。
一応IEとFireFoxで動作しますが、、、IEの場合はセレクタの*を表示できません。FireFoxではカラー表示がrgb(nn,nn,nn)形式になってしまいます。
使い方
  1. まず編集したいサイトのURLを上記の窓に入れて起動ボタンを押します。
    注意:編集は1枚目のスタイルシートのみです。
  2. するとサイトの情報を取得しコピーしたサイトのウィンドウが開きます。
    でもこれは実際はあなたのサイトではありません。URLはhttp://style.yarea.net/disp.cgiとなっているコピーページです。
  3. ポップアップを許可してください。
  4. するとつぎのようなウィンドウがポップアップで出てきます。
    このウィンドウを操作しコピーページで表現を確認するという使い方をします。
  5. まず、セレクタのドロップダウンリストがあります。ここで選択すると値が枠に入っていきます。

    ここでまず選択して編集していきます。
  6. 赤枠表示のボタンを押すと、押している間だけそのセレクタが赤枠表示されます。


    するとコピーウィンドウでは


    赤枠表示されます。このためテンプレート等他人が作成したスタイルシートを流用していてもセレクタの影響範囲を確認することが出来ます。
  7. 値を欄の中に入れていきます。

  8. そして「スタイル更新&CSS作成」ボタンをクリックします。


    するとコピーウィンドウの表示が更新され、


    下のボックスにスタイルシートソースコードが作成されます。

入力補助
  1. パとはパレットのことでカラーパレットを表示/非表示します。クリックするとカラーコードを自動入力します。


  2. 「CSSソースコードのエリアへ」をクリックするとソースコードのボックスへジャンプしコピーペーストしやすいようにコードを選択状態にします。


English