文字点滅→フッター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>
０を変えることで日付をコントロール
文字の大きさと 色も変えられる
プルプルボタン→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