WordPressで画像をかっこよく見せるVEGAS
投稿日:
WordPressで画像をかっこよく見せる
ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与えることができる、jQuery系のプラグインをいろいろ探していました。数多くある中で今回は「VEGAS2」というのを紹介したいと思います。
どんな感じにしたかったのかというと、
1.画像をスライドショーのように切り替わる
2.画像が切り替わるときにフェードでゆっくり変わる
3.画像がだんだん大きくなる(動画のように見える)
4.画像と動画を混合させることが出来る
5.簡単にできる(これが1番かも)
VEGAS BACKGROUND SLIDESHOWのインストール
1.公式サイトからダウンロードします。https://vegas.jaysalvat.com/
ダウンロードしたファイルを解凍すると以下のファイルが入っています。
vegas—-?overlays(←)
—–vegas.css(←)
—–vegas.js
—–vegas.min.css
——vegas.min.css.map.map
——vegas.min.js(←)
——vegas.min.map.map
使うのは、(←)が付いているファイルとフォルダの合計3つです。
もちろん、jQueryが必要です(以下のような感じで<head></head>内に入っていると思います。なければ追加してください。)
<script src="http://code.jquery.com/jquery.min.js"</script>
2.WordPressに読み込む
<head></head>内に先ほどのファイルを読み込みます。(overlaysフォルダは、テーマのimagesフォルダがあればそこに入れます。imagesフォルダがなければ作成してもいいです。)
ちなみに、子テーマを利用しているなら、子テーマの【functions.php】に記述すればいいです。
例:
<?php if ( !defined( 'ABSPATH' ) ) { exit; } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'vegas', get_stylesheet_directory_uri() . '/css/vegas.css' ); wp_enqueue_script( 'jquery'); wp_enqueue_script( 'vegas-min', get_stylesheet_directory_uri() . '/js/vegas.min.js'); }
これでひとまず準備完了!
VEGAS BACKGROUND SLIDESHOWの使い方
長くなるとわかりにくくなるので、次の記事に移ります。
VEGAS BACKGROUND SLIDESHOWの使い方
関連記事
-
-
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③
9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …