装飾リスト

cosmemoテキスト装飾一覧

1. 文字装飾

ピンク色の太い文字

ピンク色7の太い文字
濃いピンク色の太い文字
えんじ色の太い文字
サーモンピンク色の太い文字
金色の太い文字
紫色の太い文字
青色の太い文字

黄色のアンダーライン
水色のアンダーライン
ピンクのアンダーライン

点滅する文字

「えぇぇ~ウソっ⁉同じ40代に…見えないんだけどっ!」


2. 吹き出し・ボックス

青い見出し

左にボーダー

ポイントボックス

中央に位置する上向きの吹き出し:

ピンクの吹き出し:

h2ピンクの吹き出し:

h3ピンクの吹き出し:

h4ピンクの吹き出し:

※サイズ:以下色違いの吹き出しは、<span class=…><h2〜h4 class=…>と変更できる

金色の吹き出し:

紫色の吹き出し:

ワインレッド色の吹き出し:

オレンジ色の吹き出し:

✓ ピンクのボックス:

点線ボックス

VOICE①
テープ付ボックス
毎日、気になるシミの部分に塗り込むと…2週間過ぎたころから…
菊池 奈々さん(42歳)
「タイトル」

水色ボックス:

<!–吹き出しはじまり–>
<div class="balloon5">
<div class="faceicon"><img class="alignnone size-medium wp-image-4956" src="http://cosmemo.club/wp-content/uploads/2019/12/kao.jpg" alt="" width="300" height="300" /></div>
<div class="chatting"><div class="says">
<b>「TV通販でも連日売り切れの<br><font color="red">シミシワ専用クリーム</font>が凄いのよ!使ってみるべきだよ!」</b>
</div></div></div>
<!–吹き出し終わり–>


3. アニメーション

①動くピンクマーカー

テキストテキスト

<span class="marker-animation">
テキストテキスト
</span>
(ここからページ最後に記載)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
$(".marker-animation").each(function(){
  var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
  var scroll = $(window).scrollTop(); //スクロールの位置を取得
  var windowHeight = $(window).height(); //ウインドウの高さを取得
  if (scroll > position – windowHeight){ //スクロール位置が要素の位置を過ぎたとき
    $(this).addClass('active'); //クラス「active」を与える
  }
});
});
</script>


②矢印+プルプル画像(アテニア)

<!–矢印+プルプルはじまり–>
<div class="float_test2">
 <div class="float_test">
  <div class="arrow_btn"><br><a href="https://www.attenir.co.jp/pub/skinoil_d/sp/a_net01/index.html?data=14054&amp;advname=skinoil054&amp;argument=ZCLdMVgx&amp;dmai=DG_JJcleans_0001"target="_blank" rel="noopener noreferrer">
  <div class="a-arrow"><img src="http://cosmemo.club/wp-content/uploads/2019/12/red_arrow.png"></div></div>
 </div>
<div class="float_test blue-box"><div class="vibration2"><a href="https://ad-fam.com/ad/p/r?_site=6318&amp;_article=2274"><img src="http://cosmemo.club/wp-content/uploads/2019/12/button:SHIZUKAGERU.png" alt="" width="598" height="218" /></a></div></div>
</div>
<!–矢印+プルプル終わり–>


③プルプル画像(アテニア)

<!–プルプルはじまり–>
<div class="vibration"><a href="https://ad-fam.com/ad/p/r?_site=6318&amp;_article=2274">
<img class="alignnone size-full wp-image-18414" src="http://cosmemo.club/wp-content/uploads/2019/12/button:SHIZUKAGERU.png" alt="" width="598" height="218" /></a></div>
<!–プルプル終わり–>


④プルプルボックス

<!–プルプルボックスはじまり–>
<div class="elementor-widget-container">
<div class="arrow_btn">
<a href="https://www.attenir.co.jp/pub/skinoil_d/sp/a_net01/index.html?data=14054&amp;advname=skinoil054&amp;argument=ZCLdMVgx&amp;dmai=DG_JJcleans_0001" target="_blank" rel="noopener noreferrer">
<div class="a-arrow"><img src="http://cosmemo.club/wp-content/uploads/2019/12/red_arrow.png"></div>
<div class="anime_btn animate"><strong>【公式】
スキンクリアクレンズオイルを
試してみる!</strong></div></div>
<!–プルプルボックス終わり–>