FRANKIES

DigiPressによるコンテンツ装飾テスト

約19分

ご挨拶

2020年、行徳駅にオープンした「Frankies International Bar」のマスター Frank(フランク)です。

長年、日本でのバーテンダーとしてのキャリアがあり日本語も話せます。
もちろんスタッフは全員英語が通じます。

フランキーズはお一人様から団体様、また男性から女性まで自由に楽しめる空間を提供しています。
お客様同士の出会いを求めたり、ゆっくり一人で飲みたい方も、ぜひお気軽にお越しください。

皆さまとお話できるのを楽しみに待っています。
ぜひ気軽に遊びに来て下さい。


DigiPressによるコンテンツ装飾テスト
デモ内容テーマに搭載の装飾CSSによるスタイリング
アイコン利用1つ1つ選定したアイコンフォントは300種類以上
拡張性独自アイコンセットのため、今後も随時追加
マニュアルオンラインドキュメントにて参照可能
その他投稿オプションの「フリーメタ情報」として自由項目(最大5件)を指定すると、このように本文の先頭に自動表示されます。

CSS3アニメーションで動きをつけてインタラクティブに

Internet Explorer以外のブラウザにてご確認ください。
class に img-circular セレクターをつけると、画像が円形になります。

円形にするコード

<img src="画像のURL" alt="" width="300" height="300" class="alignleft img-circular" />

マウスカーソルを画像に合わせてみると…

ブルブルシェイク(animate-shake)

Circular image

<img class="img-circular animate-shake" src="画像のURL" alt="Circular image" width="300" height="300" />

くるっと回転(animate-rotate)

Circular image

<img class="img-circular animate-rotate" src="画像のURL" alt="Circular image" width="300" height="300" />

ズームイン(animate-zoom-in)

Circular image

<img class="img-circular animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300" />

ズームアウト(animate-zoom-out)

Circular image

<img class="img-circular animate-zoom-out" src="画像のURL" alt="Circular image" width="300" height="300" />

ホバーシャドウ(animate-shadow)

Circular image

<img class="img-circular animate-shadow" src="画像のURL" alt="Circular image" width="300" height="300" />

スウィング(animate-swing)

Circular image

<img class="img-circular animate-swing" src="画像のURL" alt="Circular image" width="300" height="300" />

ぐらぐら(animate-wobble)

Circular image

<img class="img-circular animate-wobble" src="画像のURL" alt="Circular image" width="300" height="300" />

ぴくぴく(animate-wiggle)

Circular image

<img class="img-circular animate-wiggle" src="画像のURL" alt="Circular image" width="300" height="300" />

バウンド(animate-bounce)

Circular image

<img class="img-circular animate-bounce" src="画像のURL" alt="Circular image" width="300" height="300" />

パルス(animate-pulse)

Circular image

<img class="img-circular animate-pulse" src="画像のURL" alt="Circular image" width="300" height="300" />

複数組み合わせた場合

Circular image

<img class="img-circular animate-shadow animate-shake animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300" />
Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Evernote
Feedly
Send to LINE