使い方

文字点滅→フッターPHPに下記のジャバスクリプト入れる

ワードプレスへは下記のクラスを追加
class=”blink”

<span class=”blink” style=”color: #ff0000;”>無料プレゼント中!!</span></strong></span>

FTPでフッターPHPに下記を入れる
フッターPHPへのいきかた

wp-content→themes→twentyfifteen→footer.php

<script>
jQuery(function() {
setInterval(function() {
jQuery(‘.blink’).css(‘visibility’, jQuery(‘.blink’).css(‘visibility’) == ‘hidden’ ? ‘visible’ : ‘hidden’);
}, 800);
});
</script>

日付→下記文字列をワードプレスのテキストに追加

<div><script>
var now = new Date();
now.setDate(now.getDate()-0);
document.write(‘<span style=”font-size: 14pt;color:#000000;”><strong><span class=”txt20 bold”><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span>’+(now.getMonth()+1)+’月’+now.getDate()+’日~再販が決定されたようです!!</span></strong></span>’);
</script></div>
0を変えることで日付をコントロール
文字の大きさと 色も変えられる

プルプルボタン→CSSに下記
外観→カスタマイズ→追加CSS
@-moz-keyframes animate1 {
0% { -moz-transform: skewX(9deg); }
10% { -moz-transform: skewX(-8deg); }
20% { -moz-transform: skewX(7deg); }
30% { -moz-transform: skewX(-6deg); }
40% { -moz-transform: skewX(5deg); }
50% { -moz-transform: skewX(-4deg); }
60% { -moz-transform: skewX(3deg); }
70% { -moz-transform: skewX(-2deg); }
80% { -moz-transform: skewX(1deg); }
90% { -moz-transform: skewX(0deg); }
100% { -moz-transform: skewX(0deg); }
}

@-o-keyframes animate1 {
0% { -o-transform: skewX(9deg); }
10% { -o-transform: skewX(-8deg); }
20% { -o-transform: skewX(7deg); }
30% { -o-transform: skewX(-6deg); }
40% { -o-transform: skewX(5deg); }
50% { -o-transform: skewX(-4deg); }
60% { -o-transform: skewX(3deg); }
70% { -o-transform: skewX(-2deg); }
80% { -o-transform: skewX(1deg); }
90% { -o-transform: skewX(0deg); }
100% { -o-transform: skewX(0deg); }
}

@-webkit-keyframes animate1 {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes animate2 {
0% { -moz-transform: translateX(0px); }
45% { -moz-transform: translateX(20px); }
50% { -moz-transform: translateX(25px); }
55% { -moz-transform: translateX(20px); }
95% { -moz-transform: translateX(0px); }
100% { -moz-transform: translateX(0px); }
}

@-o-keyframes animate2 {
0% { -o-transform: translateX(0px); }
45% { -o-transform: translateX(20px); }
50% { -o-transform: translateX(25px); }
55% { -o-transform: translateX(20px); }
95% { -o-transform: translateX(0px); }
100% { -o-transform: translateX(0px); }
}

@-webkit-keyframes animate2 {
0% { -webkit-transform: translateX(0px); }
45% { -webkit-transform: translateX(20px); }
50% { -webkit-transform: translateX(25px); }
55% { -webkit-transform: translateX(20px); }
95% { -webkit-transform: translateX(0px); }
100% { -webkit-transform: translateX(0px); }
}

.anim{
animation-name:animate1;
animation-timing-function:ease-in;
animation-duration:2s;
animation-iteration-count:infinite;
}

ワードプレステキストに下記
class=”anim”

完全コピペ→右上の点点のその他のツール→名前をつけてファイルを保存

完コピ→画像変更→ファイル名変更

ボックスを作る→文字列

<div style=”margin: 0 auto; padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #009999; color: #ffffff; width: 150px;”> これはヤバイ♥</div>

margin→自分につけると自分が小さくなる

pading→親にpadingをつけると中のものが小さくなる

左右動かなくする→ width:100% overflow hidden

これはヤバイ♥

コメントをどうぞ

メールアドレスが公開されることはありません。