DigiPressによるコンテンツ装飾テスト
ノーマル形式
たくさんのトラックバックがある投稿。吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しか...
ポートフォリオ１: ２カラム
ポートフォリオ１ : ３カラム、カテゴリーカラー反映
ポートフォリオ１ : ４カラム
ポートフォリオ２ : ４カラム
マガジン形式 : ３カラム
マガジン形式 : ４カラム
専用プラグイン「DigiPress Ex - BLocks Free」、または「DigiPress Ex - Blocks」とセットで利用すると、WordPress の標準ブロックを大幅に拡張して使い勝手を向上させます。...
この投稿はパスワードで保護されているため抜粋文はありません。
多すぎるほどのカテゴリーに属している投稿。
とても長い単語が含まれたとても長いタイトルの投稿。日本語の場合は単語の区切りにスペースを使用していないので単語の長さはあまり関係ない。タイトルの行の高さ (line-height) とタイトルエリアが狭い場合に起こりうるオーバーフローの問題...
スライダー（４種類） : カルーセルタイプ
CSS3アニメーションで動きをつけてインタラクティブに
Internet Explorer以外のブラウザにてご確認ください。
class に
img-circular セレクターをつけると、画像が円形になります。
円形にするコード
<img src="画像のURL" alt="" width="300" height="300" class="alignleft img-circular" />
マウスカーソルを画像に合わせてみると…
ブルブルシェイク(animate-shake)
<img class="img-circular animate-shake" src="画像のURL" alt="Circular image" width="300" height="300" />
くるっと回転(animate-rotate)
<img class="img-circular animate-rotate" src="画像のURL" alt="Circular image" width="300" height="300" />
ズームイン(animate-zoom-in)
<img class="img-circular animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300" />
ズームアウト(animate-zoom-out)
<img class="img-circular animate-zoom-out" src="画像のURL" alt="Circular image" width="300" height="300" />
ホバーシャドウ(animate-shadow)
<img class="img-circular animate-shadow" src="画像のURL" alt="Circular image" width="300" height="300" />
スウィング(animate-swing)
<img class="img-circular animate-swing" src="画像のURL" alt="Circular image" width="300" height="300" />
ぐらぐら(animate-wobble)
<img class="img-circular animate-wobble" src="画像のURL" alt="Circular image" width="300" height="300" />
ぴくぴく(animate-wiggle)
<img class="img-circular animate-wiggle" src="画像のURL" alt="Circular image" width="300" height="300" />
バウンド(animate-bounce)
<img class="img-circular animate-bounce" src="画像のURL" alt="Circular image" width="300" height="300" />
パルス(animate-pulse)
<img class="img-circular animate-pulse" src="画像のURL" alt="Circular image" width="300" height="300" />
複数組み合わせた場合
<img class="img-circular animate-shadow animate-shake animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300" />
About This Author
