わぷー、Web Componentsになったってさ。 @wckansai2015
WordCamp Kansai 2015のブログでわぷーがまさかのCSS化されました。 海外でも人気のわぷーをCSSで作ってみました！ | WordCamp Kansai 2015 作られたのは広報チームの三角さん。 G […]
WordCamp Kansai 2015のブログでわぷーがまさかのCSS化されました。
海外でも人気のわぷーをCSSで作ってみました！ | WordCamp Kansai 2015
作られたのは広報チームの三角さん。
GitHubにもGPLで公開されているので、Forkして自由にカスタマイズ可能です。
せっかくなので、Polymer
贅沢を言えば実際にサイトで表示する時にあのコードを毎回コピペするのはちょっとしんどそうかなと思いました。
と、いうわけでおそらくどこのサイトでもまだ使われていないであろう「Polymer 1.0」でWebComponents化させてみました。
bowerでPolymer1.0を引っ張ってきた状態で上のファイルを適当な場所にclone。
あとは下のサンプルのようにHTMLファイルのインポートと表示させたい場所へのタグ追加でどこでも簡単にCSSわぷーを表示させることができます。
[html]
<!– Import CSS Wapuu Components –>
<link rel="import" href="css-wapuu.html">
<!– Write the Polymer Components Tags –>
<css-wapuu></css-wapuu>
[/html]
スピード重視でちょっと中途半端な状態ですが各パーツ別に更にComponent化させているところですので、最終的にはパーツ単位でComponentをインポートすればオッケーなレゴブロックっぽい感じを目指そうと思います。
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。