せっかく始めたブログで、他の方と差をつけてみませんか?
- アニメーションを使ってみたい
- ユーザーの目を惹いてみたい
- 楽しく読める記事にしてみたい
そんな悩みには、文字や囲み枠などが上下左右どこからでも出てくるフェードインがおすすめです!

これは絶対に難しいやつだ・・・

CSSなどのコードたくさん使うけど、コピペで実装できるようにするよ
コピペのみで簡単に、変更する必要がある部分はわかりやすく解説していきます。
- アニメーションの種類
- 実装するためのコード3種類
- 実像するための手順

では、早速見ていきましょう。
アニメーションはこんなもの!
まず作り方を説明する前に、アニメーションとはどんなものなのか実際に見てみましょう。

表示された時点でアニメーションがスタートするように設定しているので、ゆっくりとスクロールしてね
フェードイン
上から下へフェードイン
下から上へフェードイン
このようなアニメーションがCSSにて作ることが可能です。

これクマの吹き出しも動かせるの?

ちょっと違和感あるけど動かせるよ
では以下がフェードインをつけた吹き出しになります。
少し画像が遅れて表示されてしまいますが、あくまでも参考例ですのでご了承ください。
アニメーションを作るための準備
アニメーションを表示するだけならCSSのみでも実装可能です。
しかし、表示された時点でアニメーションがスタートする方がインパクトがあるので、こちらの方法を紹介します。
JavaScriptを使用する理由

そもそもJavaScriptって何なの?
って思う方がほとんどでしょうが、Web制作におけるプログラミング用語です。
しかし、ここではあくまでもアニメーションの手順を解説していくので、知識なくても大丈夫です。
手順通りにコピペで進んでいくだけで、簡単に実装することができます。
CSSのみでは実装できない、表示するためのタイミングを指定するため
ここでは使用目的が知っているだけで問題ありません。
javaScriptに必要コードを記載
まず記載する場所ですが、テーマエディタを開くと「javascript.js」という項目があると思います。
※Cocoon使用のため、他テーマの場合相違あるかもしれません
このページを開くと、たくさんのコードが記載されていると思いますが、一番下の行までスクロールしてください。
以下のコードを貼り付けて保存しましょう。
$(function () { $(window).scroll(function () { const wHeight = $(window).height(); const scrollAmount = $(window).scrollTop(); $('.scrollanime').each(function () { const targetPosition = $(this).offset().top; if(scrollAmount > targetPosition - wHeight + 60) { $(this).addClass("fadeInDown"); } }); }); });
このコードの中に、スクロールした際に表示される項目が記載されています。
必要なCSSとHTMLを記述する
次にアニメーションを表示するためのCSSとHTMLを紹介します。
アニメーションに必要なCSSを記述
「外観」→「カスタマイズ」→「追加CSS」をクリックして以下のコードを貼り付けます。
/*フェードインアニメーションの指定*/ .scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/ .fadeInDown { animation-name: fadeInDown; animation-duration: 2.5s; animation-fill-mode: forwards; } @keyframes fadeInDown { 0% { opacity: 0; } 100% { opacity: 1; transform: translate(0); } } /*上下の動きを指定*/ .updown {transform: translateY(-100px);} .downup {transform: translateY(100px);} /*左右の動きを指定*/ .sect02{overflow: hidden;} /*横スクロールバーを隠す*/ .slide-right {transform: translateX(200px);} .slide-left {transform: translateX(-200px);}
上記CSSについて少し解説します。
animationプロパティ
「animation」プロパティは、その名の通りアニメーションを表示するためのプロパティです。
アニメーションを使用する上で、表示スピードなどを指定する必要があります。
プロパティ名 | 意味 |
animation-name | 使うアニメーションの名前 |
animation-duration | アニメーションの進行度合いを調整 |
animation-delay | アニメーションの開始のタイミングを指定 |
animation-timing-function | アニメーション進行スピードの調整 |
animation-iteration-count | 何回アニメーションを繰り返すか |
animation-direction | アニメーションの再生方向を指定 |
animation-fill-mode | アニメーションが開始と終了後の状態を指定 |
animation-play-state | アニメーションの再生や停止 |
このような指定ができるのですが、今回は「animation-duration」の説明をします。

単位は「数値s」で表記しますが、「s=秒」と考えて問題ありません
小数第一位まで指定できるので、お好きなスピードを指定してください。
小数第一位なしで指定する場合は「1s」と記載します。
アニメーションに必要なHTMLを記述
HTMLタグを使用して、実際に表示するためのタグを記述していきます。
<section class="sect02"> <p class="scrollanime">フェードイン</p> <div class="scrollanime"><div class="box1">ここに文字</div> </div> <p class="scrollanime updown">上から下へフェードイン</p> <div class="scrollanime updown"><div class="box1">ここに文字</div> </div> <p class="scrollanime downup">下から上へフェードイン</p> <div class="scrollanime downup"><div class="box1">ここに文字</div> </div> <p class="scrollanime slide-right">右から左へフェードイン</p> <div class="scrollanime slide-right"><div class="box1">ここに文字</div> </div> <p class="scrollanime slide-left">左から右へフェードイン</p> <div class="scrollanime slide-left"><div class="box1">ここに文字</div> </div> </section>
こちらは5種類のフェードインタグです。
ご自身で使用したいフェードインをコピペしてお使いください。

全てコピペして下書き記事などに保存してもOK!
クラシックエディタ(プラグイン)を使用している場合は、テキストエディタへ貼り付けて編集します。
ブロックエディタを使用している場合は、「カスタムHTML」を追加して編集してください。
「ここに文字」部分に文章をいれると囲み枠内に文字が表示されます。
では、コピペする場合の注意点について説明します。
p class部分の注意点
それぞれ「フェードイン、○から○へフェードイン」と記載されている部分にお好きな文字を入れることができます。
実際に使用する際は変更してください。
div class部分の注意点
こちらは文字ではなく、画像やCSSで作成した要素を指定するものになります。
1.画像を入れる場合
画像の場合は使用タグを変更する必要があります。
<div class=”box1″>の部分を以下のように修正してください。
<img src="画像のURL">
その際は終了タグ</div>は1つで問題ありません。
2.囲み枠などのCSS要素を入れる場合
囲み枠などを使用する場合は、まずCSSにて作成する必要があります。
サルワカさんの囲み枠はおしゃれなものが多いので参考にするのもよいです。
使用したい囲い枠があればコピーして「追加CSS」へ貼り付けてください。
.box3 { padding: 0.5em 1em; margin: 2em 0; color: #2c2c2f; background: #cde4ff;/*背景色*/ } .box3 p { margin: 0; padding: 0; }
上記はサルワカさんの3つ目のボックスのCSSになります。
例えばこれを使用したい場合、<div class=”box1″>の「box1」は「box3」に変更する
CSSは「.○○ {」という書き出しでスタートするので、○○の部分を記載するということになります。
まとめ
フェードインは訪問したユーザに「おっ!」と思わせることができ、使い方次第では楽しくなるものでもあります。
テーマによっては標準で搭載されているものもあると思いますが、紹介したコードでCocoonでも実装可能です。

コード類は難しそうだけど
コピペだけなら何となくできるかも
ここで紹介したコードのみで、最初に紹介した5つのフェードインを取り入れることができます。
ぜひチャレンジしてみてくださいね。
使用し過ぎは見にくくなるので、使いすぎには注意しましょう