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

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

マニュアル動画

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

追加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クラスアニメーション速度
slow2
slower3
fast800ミリ秒
faster50ミリ秒
追加CSSクラス 開始遅延時間
delay-1s1秒後
delay-2s2秒後
delay-3s3秒後
delay-4s4秒後
delay-5s5秒後

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

例)

animated infinite bounce slower
animated infinite pulse delay-5s

見出しの飾り枠

飾り枠の例①上下二重線

(↑追加CSSクラス: wline )

飾り枠の例②左下ライン

(↑追加CSSクラス: Lline )

飾り枠の例③吹き出し

(↑追加CSSクラス: hukidasi)

記事背景に罫線を引く

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的に良くない)

スライダー

previous arrow
next arrow
Slider

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

囲み枠(ポイントボックス2)

C3のホームケア脱毛器は
ココが凄い!

プロ仕様ハイパワー脱毛器だから
 全身ツルスベに!
自分の時間がある時に脱毛できちゃう!
✅最先端脱毛器で痛くない!

ラジオボタン

追記(当日の日付を表示させるh3)

追記:

口コミ系

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


アイコン画像

年齢:40代 / 職業:OL

★★★★★★★
★★★★★★★
文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる文章を入れる
BA画像

口コミ風2(★)

画像
35歳/主婦
★★★★★★★
★★★★★★★

ここに文章を入力(黄色★の数を変更したいときは↑のwidth:93%の数字を変更してください)

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

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

ライングループ名を入れる
YUI
ラインのチャット風口コミ
名前
みたいなこともできる
スタンプエリアに画像やGIFいれてもOK
既読
0:30
既読
0:30

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

投稿コメント一覧

太田
1時間前
これ、ほんとに痩せるの?
まゆ Re:太田
40分前
ほんとに痩せるよ!試してみる価値あり!
YUI
13分前
売り切れが怖いから、まとめて買っといた
遠藤えりな
10分前
最近、会食多すぎてガチで太ったから、これ絶対試す。
田中 圭輔
5分前
デブすぎるのに、運動しない俺でも痩せたから、マジでおススメする!

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

アイコン画像
文章を入力
アイコン画像
文章を入力

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

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

囲み枠

囲み枠

(↑追加CSSクラス: kakomipink)

この記事を書いた人

アイコン画像
元美容部員の美容ライター
現在40歳で2児のママ。今まで試したコスメやサプリは数千種類以上!ホームタウンは恵比寿。
  • ここに文章を入力
  • ここに文章を入力
  • ここに文章を入力
Point

ここに文章