追加CSSはすべて「カスタマイズ → 追加CSS」に入れてあります
また、ヘッダーまたはフッターに必要なコードは、
Insert Headers and Footers » Settingsに入れております。
機能⓪
パソコン表示
どっちも表示
機能①
これは「yellow」色のアニメーションマーカーのテストです
これは「pink」色のアニメーションマーカーのテストです
これは「green」色のアニメーションマーカーのテストです
これは「purple」色のアニメーションマーカーのテストです
これは「aqua」色のアニメーションマーカーのテストです
これは「lime」色のアニメーションマーカーのテストです
これは「fuchsia」色のアニメーションマーカーのテストです
これは「red」色のアニメーションマーカーのテストです
これは「blue」色のアニメーションマーカーのテストです
↑色を変えたい場合は、RGBコードを色指定している部分に置き換えてください
ファーストビューはスクロールしないと表示されないので、何か対策してもいいかも？
.marker-animation.active {
background-position: -100% .9em; ← ここの部分が位置
}
.marker-animation {
background-repeat: repeat-x;
background-size: 200% .3em; ← ここの部分がマーカーの太さ
background-position: 0 .9em; ← ここの部分が位置
transition: all 2s ease;
font-weight: bold;
}
機能②
↓ここにコードが埋め込まれています
現在 人 がこの記事を見ています
※Post Snippets にランダム表示数字のタグと目のアイコンのコード入れています
※30人±10人で表示するようになっています
※blinkingというスタイルで点滅するようになっています
↓画面下に常に表示される用コードは以下をInsert Headers and Footers » Settingsにのフッターに入れてください。
<div class=”current-people”><span class=”count”><i class=”fa fa-eye”></i> 現在<span class=”blinking” style=”color: red; font-weight: bold;”> <script type=”text/javascript”>
<!–
var rand = Math.floor(Math.random() * 20) + 20; //乱数を発生
document.write(rand);//値を表示
// –>
</script>人 </span>がこの記事を見ています </span></div>
※以下のCSSをヘッダー埋め込んでいます
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
機能③
※背景が白以外でも使える設定
↑背景が白以外でも、白背景に薄くなるパターン
↓普通に透明化するパターン
※背景が白のときの方がよさそう
機能④
<body onCopy=”return false;”>
上記のタグをソースに追加してください
機能⑤
ここでは文字を点滅させます
ここでは文字をアニメーションせずに点滅させます
機能⑥
jQueryでも点滅ができます。フェード早さは調節してください
<script>
$(function(){
setInterval(function(){
$(‘.blinkjs‘).fadeOut(1200, function(){$(this).fadeIn(200)});
}, 1400);
});
</script>
画像のclassに入れてください。
その他、機能②も機能⑤もそのまま適用できます
例えば・・・
class=”blinkjs”
class=”flash1″
class=”flash2″
class=”blinking”
機能⑦
最終更新日は：2024年07月26日 です！
普通に show_today のショートコード作ったので、それ入れればテキストで表示されます
機能⑧
↓下のようなコードを貼り付け、もしくはクイックタグより可能です
<div class=”comment-box common-icon-box”><span class=”bold”>たまに体の変なところにニキビ出来るから最近これ使ってるんだけど、顔以外にも使えるやつ</span></div>
機能⑨
見出しを全体的に変更する場合は：
外観 ＞＞ カスタマイズ ＞＞ 投稿スキン設定 ＞＞ 見出しのデザインを変えてください
あるいは、黒背景であれば
.kurohaikei{
color: #fff;
background-color: #000;
border-left: solid 5px #e95295;
font-size: 24px;
padding: 25px;
border-radius: 2px;
margin: 2.4em 0 1em;
line-height: 1.25;
font-weight: bold;
}
このように黒背景での見出しになります
機能⑩
著作権のために画像は少し加工してあります
← すこし薄くしてそれっぽくしました
.pinkborder {
background: url(https://mote-channel.info/wp-content/uploads/2019/05/image_border.jpg) 0 0 repeat-x, url(https://mote-channel.info/wp-content/uploads/2019/05/image_border.jpg) 0 100% repeat-x;
margin-bottom: 20px;
padding: 18px 0;
font-size: 2.0rem;
}
文章に装飾ができます
もちろん見出しタグ適応したのにも使えます
機能⑪
ポイントボックス
あああああ
あああああ
ここにコンテンツが挿入されます。
ブランクボックス
画像以外にもいけます。
ああああ
ああああああ
ピンク背景ドット枠
あああああ
あああああ
ボイスはソースコードをコピペして使ってください（テキストモードで）
ピンク色の円の背景は著作権のために、若干色を変えています
- voice01
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- voice02
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
- voice03
ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう