CodePen の Pen を WordPress ショートコードで Embed

だいぶ調子が戻りました。軽い二日酔いだったのかもしれません…。

今日は朝から CodePen でちまちまと CSS の実験をしておりました。なんとかやりたいことができたので、このブログにも書いておくかと Embed 機能を使おうとしたら「WordPress Shortcode」なるものを発見しました。プラグインがあるのですね。

さっそくプラグインを導入してみました。これがショートコードでの Embed。

See the Pen box hover css animation by semicolon (@semicolon) on CodePen.0

が、ショートというほどショートでもないし、いつかおとずれるかもしれないブログ用 CMS の変更を考慮すると素直に HTML で Embed しておく方がよさそうですね。コピペする手間は同じですし、表示も同じようですし。以下は HTML Embed。

See the Pen box hover css animation by semicolon (@semicolon) on CodePen.

ちなみにこの Pen は CSS アニメーションだけで hover 時にボックスが浮かぶ風にしてみたかったもの。外枠の中心点をキープするところがキモかと。