VEGAS BACKGROUND SLIDESHOWの使い方
投稿日:2017年11月8日 更新日:
VEGAS BACKGROUND SLIDESHOWの使い方
画像だけを利用した基本的な使い方
独自で作成したjsファイルがあるならそちらに以下のコードを記述してからサーバーにアップしてください。
なければ、テーマヘッダー(header.php)に以下のコードを記述してください。
その場合は、<script>以下のコード</script>のようにしてください。
jQuery(document).ready(function(){ jQuery('.top-img').vegas({ //.top-imgのクラス名は自分の好きな覚えやすいのでOKです delay: 7000, timer: false, shuffle: true, firstTransition: 'fade', firstTransitionDuration: 5000, transition: 'slideDown2', transitionDuration: 2000, slides: [ { src: <span class="syntax-string">'/img/slide1.jpg'</span> }, { src: <span class="syntax-string">'/img/slide2.jpg'</span> }, { src: <span class="syntax-string">'/img/slide3.jpg'</span> }, { src: <span class="syntax-string">'/img/slide4.jpg'</span> } ] }); });
htmlでの書き方は、
表示したいところに、
<div class="top-img"></div> <!-- .top-imgのクラス名は自分の好きな覚えやすいのでOKです。ただし上記と同じにしてください。 -->
を記述してください。
自分なりに若干変更したのは以下の通りです。
jQuery(document).ready(function(){ jQuery('.top-img').vegas({ overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png', transition: 'fade', transitionDuration: 4000, delay: 10000, animation: 'random', animationDuration: 20000, timer: false, slides: [ { src: 'https://○○○.com/wp-content/themes/△△△/images/□□1.jpg' }, { src: 'https://○○○.com/wp-content/themes/△△△/images/□□2.jpg' }, { src: 'https://○○○.com/wp-content/themes/△△△/images/□□3.jpg' } ] }); });
公式サイトには設定方法がいろいろあるので試してみてください。
動画も一緒に表示させる方法
前回の記事はこちら→WordPressで画像をかっこよく見せるVEGAS
関連記事
-
-
WordPressで画面が真っ白になってしまった時の対処方法
突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法 今回は、テーマの中にあるfunction.phpを編集 …
-
-
世界のCMSシェア ”W3Techsの資料から” 2019年9月14日時点 1位:WordPress 59.5%(28.6%) 2位:Joomla 6.8%(3.3%) 3位:Drupal 4.7%( …
-
-
簡単にファイルをダウンロードできるWordPressプラグイン
WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …
- PREV
- WordPressで画像をかっこよく見せるVEGAS
- NEXT
- 画像と動画を混合させて表示VEGAS