Web全般 wordpress

WordPressで画像をかっこよく見せるVEGAS

投稿日:

vegas2

 

WordPressで画像をかっこよく見せる

ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与えることができる、jQuery系のプラグインをいろいろ探していました。数多くある中で今回は「VEGAS2」というのを紹介したいと思います。

どんな感じにしたかったのかというと、

1.画像をスライドショーのように切り替わる

2.画像が切り替わるときにフェードでゆっくり変わる

3.画像がだんだん大きくなる(動画のように見える)

4.画像と動画を混合させることが出来る

5.簡単にできる(これが1番かも)

 

 

 VEGAS BACKGROUND SLIDESHOWのインストール

 

1.公式サイトからダウンロードします。https://vegas.jaysalvat.com/

 

vegasダウンロード

 

ダウンロードしたファイルを解凍すると以下のファイルが入っています。

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の使い方

 

 



 

-Web全般, wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

海外Wi-Fi

海外に行くならWiFi(ワイファイ)どうする?

海外に行く人はどんなにしているんだろう? 現地でWiFi(ワイファイ)をレンタルする人もいれば、国内から海外用のWiFi(ワイファイ)を持参する人もいるし、全く持っていかない人もいるでしょう。 ふとそ …

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …

ヨーロッパwifi

ヨーロッパで携帯を使いたい「Wi-Fi」どうする?

  ヨーロッパでWi-Fiを使おう!   ヨーロッパへ行ってもインターネットがしたい!SNSがしたい! 前もって準備をしてから出かけよう!   レンタルWi-Fiルーター …