• かちびと.net

    HTMLやCSSのマークアップのパターンを作成し、その場で編集、インタラクティブに確認出来るツール・・・・を作れるWordPressテーマwユニークなテーマがあるもんですね・・・

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTMLやCSSのマークアップのパターンを作成し、その場で編集、インタラクティブに確認出来るツール・・・・を作れるWordPressテーマw

スポンサーリンク

ちょっとネタ的な話題。HTMLやCSSを書くと
その場でインタラクティブに反映、確認する
事が出来るツールやWebサービスは沢山ある
のですが、それをWordPressで作ってしまった
ようです。こういう発想は全然思い浮かば
なかったので敬意を込めてご紹介。

例えばJavaScriptならJisbinjsfiddlejsdoitなどが該当します。

また、少し前にdabbletというツールもご紹介しました。ブラウザ上で書いてその場で結果を確認出来るツールはいくつかあるのですが、こんな感じのツールをWordPressのテーマで作成してしまったみたいです。

作成したのはデザイン事務所・simplebitsさんです。ここはGoogleやYahoo!,Insterpaper、Youtubeなどなど有名サイトばかりのデザインを手がけている、結構有名な会社さんです。

このsimplebitsが、WordPressテーマでインタラクティブなマークアップツールを開発、公開していて、ユニークだったのでなんとなくシェア。

Pears


下にHTMLとCSSを書く場所があって、上部に反映されます。これだけなら良く見かけるんですが、これはWordPressのテーマとして動いています。というのがちょっと珍しいなーと思いました。jsfiddle等でしてることをブログ形式で、みたいな感覚・・

何に使うの?


同サイトでは、マークアップパターンの生成と保管を目的として作成したみたいです。このようにナビゲーションのパターンを生成し、試したいマークアップをその場で試す、みたいな感じ。

動作デモ

パターンの作り方


パターンは記事を書くことで作っていきます。HTMLやCSSはカスタムフィールドを使います。名前としてcss、htmlをつくり、値にマークアップを書けばいいだけ。これでベースが出来ますので、あとは記事内でインタラクティブに変更、実装の確認ができます。

ただし、変更したものを保存することは出来ません。この辺はもう少し自分でカスタマイズする必要がありそうです。

ちょっと工夫すればjs版も作れそうな気がします。これでjsfiddleライクなWebサービスも作れるかもしれませんね。

実用性は置いておいて、ちょっと面白いアイデアだったのでシェアしてみました。

Pears / Github

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services