cosmemoテキスト装飾一覧

１. 文字装飾

ピンク色の太い文字：

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

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

点滅する文字：

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

２. 吹き出し・ボックス

青い見出し：

左にボーダー：

ポイントボックス：

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

ピンクの吹き出し：

h2ピンクの吹き出し：

h3ピンクの吹き出し：

h4ピンクの吹き出し：

※サイズ：以下色違いの吹き出しは、<span class=…></font color=”green”>を<h2〜h4 class=…></font color=”green”>と変更できる

金色の吹き出し：

紫色の吹き出し：

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

オレンジ色の吹き出し：

✓ ピンクのボックス：

点線ボックス： <strong>テキストテキスト</strong>
</div>
</span class=”ctd_dotbox”>

VOICE①テープ付ボックス：

毎日、気になるシミの部分に塗り込むと…2週間過ぎたころから…
菊池　奈々さん（42歳）

「タイトル」</span class=”box-title”>

水色ボックス：

</div class=”box26″>

<!–吹き出しはじまり–>

<!–吹き出しはじまり–>
<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>
<!–吹き出し終わり–>
</div class=”sample-code”>

<!–吹き出し終わり–>

３. アニメーション

①動くピンクマーカー

テキストテキスト

<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=”sample-code”>

②矢印＋プルプル画像（アテニア）

<!–矢印＋プルプルはじまり–>
<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&advname=skinoil054&argument=ZCLdMVgx&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&_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=”sample-code”>

③プルプル画像（アテニア）

<!–プルプルはじまり–>
<div class=”vibration”><a href=”https://ad-fam.com/ad/p/r?_site=6318&_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=”sample-code”>

④プルプルボックス

【公式】
スキンクリアクレンズオイルを
試してみる！

<!–プルプルボックスはじまり–>
<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&advname=skinoil054&argument=ZCLdMVgx&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>
<!–プルプルボックス終わり–>
</div class=”sample-code”>

4.SEO追加CSS

公式HPはこちら

ピンクのボタン

ピンクの文字

h2用の吹き出し

h3用の吹き出し

薄紫色のライン

1
2
3
ピンクの番号リスト

1
2
3
ピンクのチェックリスト

<!–左からの吹き出し–>

/////////チャットの内容////////////

<!–左からの吹き出し–>
<div class=”kaiwa”>
<figure class=”kaiwa-img-left”>
<img src=”https://cosme100.net/wp-content/uploads/2021/01/reviewer_icon001.png” alt=”no-img2″ width=”256″ height=”256″>
<figcaption class=”kaiwa-img-description”>
/////////名前////////////
</figcaption>
</figure>
<div class=”kaiwa-text-right”>
<span class=”kaiwa-text”>
/////////チャットの内容////////////
</span>
</div>
</div>