fadein_icatch

【The Thor(トール)】吹き出しやボックスをスクロールでふわっと表示させる方法

【The Thor(トール)】吹き出しやボックスをスクロールでふわっと表示させる方法

fadein_icatch

この記事ではWordPressの「The Thor」のテーマの吹き出しやボックスをふわっと表示させるための方法方法についてまとめます。

他の方のブログを見ているとたまにふわっと吹き出しが出てくるのを見てオシャレだなと感じ、自分のブログでも追加してみたいと思いました。

どうやら「The Thor」には、標準でそのような機能はなく、新たにプラグインを入れて動作が重たくさせることをしたくなかったので、自分でjQueryやCSSのコードを追加し、実装してみました。

この記事が同じように「The Thor」のテーマの利用者で吹き出しやボックスをふわっと表示させたいと思っている方に役立てばと思います。

おったん
吹き出しはこの部分になります
ふわっと表示されているのが確認できなければ画面を更新して再度確認してみてください。
woman_face2おったんの妻
まぁ、吹き出しをふわっと表示させるのはいいけどアイコンも動かすのね笑

吹き出しのアイコンにアニメーションを追加する方法に付いては下記の記事にまとめていますのでよかったら参考にしてみてください。

合わせて読みたい関連記事

【簡単】The Thor(トール)の吹き出しのアイコンにアニメーションを追加する方法 この記事では、WordPressの「The Thor」のテーマの吹き出しアイコンにアニメーションを追加する方法についてまとめます。 The[…]

balloon_icatch

また、ボックスをふわっと表示させるというのは下記のようなボックスになります。

おったん
もしボックスがフワッと表示されたのが確認できなければ再度画面を更新してみてください。

吹き出しやボックスをふわっと表示させる方法

  1. footer.phpにjQueryのコードを追加する
  2. 「ダッシュボード」-> 「外観」->「カスタマイズ」でテーマのカスタマイズ画面を開く
  3. テーマのカスタマイズ画面のメニューの「追加CSS」の画面を開く
  4. 吹き出しやボックスをふわっと表示させるためのCSSを追加する
  5. 吹き出しやボックスの表示の動作確認をする
  6. 「追加CSS」で追加したCSSのコードを保存する

①footer.phpにjQueryのコードを追加する

吹き出しやボックスをふわっと表示させるために、jQueryのコードをWordPressのfooter.phpに追加します。

「The Thor」のテーマの場合、footer.phpのファイルは、「DocumentRoot -> wp-content -> themes -> the-thor 」の場所にあります。

コードはfooter.phpでなくても良いので、他にお好みの場所があれば、そちらに書いてみてください。

追加するjQueryのコードは下記のコードになります。

②「ダッシュボード」-> 「外観」->「カスタマイズ」でテーマのカスタマイズ画面を開く

テーマのカスタマイズ画面を開くには、WordPressの管理者画面の「ダッシュボード」開きます。(もしくは、画面上部にある管理者メニュー「Customize」リンクから直接テーマのカスタマイズ画面を開くことも可能です。)

balloon01

ダッシュボードのメニュー画面で「外観」を選択して、その中にあるテーマをカスタマイズするためのページのリンクである「カスタマイズ」をクリックします。

balloon03

③テーマのカスタマイズ画面のメニューの「追加CSS」の画面を開く

テーマの「カスタマイズ」の画面が開けたら、画面の左のメニューの一番下にある「追加CSS」のメニューをクリックします。

balloon04

下記のように「カスタマイズ中 追加CSS」という画面が開ければCSSのコードを追加する準備は完了です。

balloon05

④吹き出しやボックスをふわっと表示させるためのCSSを追加する

追加CSS」の画面が開けたら、下記のCSS(カスケーディングスタイルシート)のコードを追加します。

*下記のコードを追加した後、「公開」のボタンを押すとCSSの変更内容を保存し公開することができますが、CSSはリアルタイムにテストすることができるので、必ず動作確認をしてから「公開」のボタンを押すようにしましょう。

  • 追加するCSS(カスケーディングスタイルシート)

⑤吹き出しやボックスの表示の動作確認をする

CSSのコードを追加後は、吹き出しやボックスがあるページに移動し、吹き出しやボックスの表示が正しく動作しているかを確認しましょう。

もし、吹き出しやボックスがふわっと表示されない場合は、コードが正しくコピーできているか再度確認してみてください。

man_smile4おったん
吹き出しがこのように動作していれば成功です!
またボックスは下記のように動作していればOKです!
  • これはボックスがふわっと表示される例です。

⑥「追加CSS」で追加したCSSのコードを保存する

吹き出しやボックスの表示の動作確認をして問題ないようであれば、「カスタマイズ中 追加CSS」の画面にある「公開」のボタンを押して追加したCSSのコードの内容を保存しましょう。

公開」のボタンが、「公開済み」と変わったら追加したCSSのコードの保存と公開は完了です。

まとめ

この記事では、WordPressの「The Thor」のテーマの吹き出しやボックスをふわっと表示させる方法についてまとめました。

吹き出しやボックスをふわっと表示させなくても問題ないですが、ふわっと表示させことによりデザインが少しリッチになったように感じます。

コードを参考にカスタマイズを行えば、吹き出しやボックス以外にも様々なパーツをふわっと表示させることができるので、記事にあるスクリプトやCSSを参考にカスタマイズしてみてください。

こちらの記事が、The Thorのテーマで吹き出しやボックスをふわっと表示させてみたいと思う方に参考になれば幸いです。

fadein_icatch
最新情報をチェックしよう!