※削除厳禁※ボタンアニメーション追加マニュアル

プレビューで以下のマニュアル動画を再生できます。

以下、追加CSSクラスのコードです。コピペか、どこかにメモして使ってください。
※アニメーションの動作確認は必ずプレビュー画面で行ってください。

追加CSSクラスコード：reflection

追加CSSクラスコード：animated infinite bounce

追加CSSクラスコード：animated infinite bounceIn

追加CSSクラスコード ： animated infinite flash

追加CSSクラスコード ： animated infinite pulse

追加CSSクラスコード ： animated infinite rubberBand

追加CSSクラスコード ： animated infinite shake

追加CSSクラスコード：animated infinite headShake

文字にも適用可能

※コードは、infinite（無限に再生） を省略すると、一回だけアニメーションを行う仕様に変更可能。

その他の設定

追加CSSクラス	アニメーション速度
slow	2秒
slower	3秒
fast	800ミリ秒
faster	50ミリ秒

追加CSSクラス	開始遅延時間
delay-1s	1秒後
delay-2s	2秒後
delay-3s	3秒後
delay-4s	4秒後
delay-5s	5秒後

コードの最後に、上記のクラス名を追加することで、アニメーションの速さ・開始時間の調整が出来ます。それぞれ併用可。

例）

見出しの飾り枠

飾り枠の例①上下二重線

(↑追加CSSクラス: wline )

飾り枠の例②左下ライン

（↑追加CSSクラス: Lline ）

飾り枠の例③吹き出し

（↑追加CSSクラス: hukidasi）

黒板風デザイン
追加CSSクラス：kokuban

囲み枠

（↑追加CSSクラス: kakomipink）

記事背景に罫線を引く

article{
background-color: #FFF;
background-image: linear-gradient( transparent 95%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .06)), linear-gradient( 90deg, transparent 95%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .06) );
background-size: 15px 15px;
background-repeat: repeat;
}

↑をカスタムCSSへ追記
罫線幅は、15pxの数値を変更すると変えられる

タイトルの非表示

article header{
height: 0;
padding:0;
display:none;
}

↑をカスタムCSSへ追記
※タイトルを画像で作りたい場合（h1を非表示にしてるのでseo的に良くない）

スライダー

以下再利用ブロックで導入可能なhtml

ポイントボックス

ポイントボックス2

ラジオボタン

• はい
• いいえ
• どちらでもない

追記（当日の日付を表示させるh3）

追記：

口コミ系

口コミ風1（アイコン画像あり）
※アイコン画像は1：1のものでないとゆがむので注意。

口コミ風2（★）

口コミ風3（twitter）
※アイコン画像は1：1のものでないとゆがむので注意。

line画面風
※アイコン画像は1：1のものでないとゆがむので注意。

記事内コメント風
※アイコン画像は1：1のものでないとゆがむので注意。

左右吹き出し
※アイコン画像は1：1のものでないとゆがむので注意。

リアルタイムメンバー表示

画面下にずっとくっ付いてくる〇時〇分現在〇人が見ています。
という表示。どこに入れてもOKですが、基本記事の一番下に設置してます。

囲み枠リスト（ピンク）

この記事を書いた人