BLOG

2017.06.05 Mon

SVGでハンドライティングアニメーションを実装する

文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe…

2017.04.04 Tue

CSSアニメーション(transition)で起こるバブリングの原因と対策

正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C…

2017.03.15 Wed

WordBench 長野 vol.7 で Webデザイナーが VCCW を使ってみた話をしてきました #wbnagano

2017年3月11日（日）、松本で開催された「WordBench Nagano vol.7」に参加および登壇させていただきました。 今さら感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを…

2017.01.24 Tue

WordBench Nagano vol.6 に参加してきました！ #wbnagano

2017年1月21日（土）に長野県の松本市で行われた「WordBench Nagano vol.6」に参加させていただきました。文章化するのが恐ろしく苦手なので、以下、詳細なレポートではなく、ただの参加報告みたいな感じで…

2016.12.24 Sat

WordPressのテーマカスタマイザーにオリジナルの項目を追加する方法

WordPressのテーマカスタマイザー（テーマカスタマイズ画面）にオリジナルの項目を追加して、入力内容をテーマに反映させる方法です。 オリジナルの項目を追加すると、テンプレートファイル側に記載したくないもの（広告や解析…

2016.12.03 Sat

VCCW 3.0 でローカル環境を構築（WordMoveでエックスサーバーにデプロイ）

VCCW3.0でWordPressのローカル環境を構築したので、何をどうやったのか（すぐ忘れるので）自分用の覚書として記録しておきます。併せて、WordMoveを使って、本番環境（エックスサーバー）とローカル環境を同期す…

2016.09.18 Sun

テキストエディタで正規表現の後方参照を使った置換（検索）を行う方法

テキストエディタで正規表現の置換（検索）を行う際に、一部分だけを残し、その他の部分を置き換える、いわゆる後方参照を使った置換ができることを知ったのでメモ。忘れそうなので詳細を記載します。 正規表現を使って置換ができるテキ…

2016.08.17 Wed

GulpでSVGスプライトを自動生成する

前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示さ…

2016.08.08 Mon

外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する

SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても…