この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 l この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

TEL 03-XXXX-XXXX

〒141-0031 東京都品川区西五反田6丁目2−7
ウエストサイド五反田ビル4F

MENU

スライド

ここに掲載されているスライダーは一見既存のスライダーと似ているものも存在しますが、0から設計、書き直しているものなので「どのテーマにでも設置可能」となっています。
各スライダーの下部に書かれている解説を読み理解したうえでご利用ください。
※)配色以外の改造は工期が長く確保できない限りは基本的に不可。
※)ビジュアルの枚数に制限はありません。

スライド A

スライド1:吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

スライド2:何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

スライド3:吾輩はここで始めて人間というものを見た。

解説
キュートのMVによくあるパターン。キャッチはスライドに合わせて変更可能。画像のサイズは制限なしだが全て同じ比率で書き出す必要あり。1枚当たりの横幅は1280pxを限度としている。高さの制限は無し。上記サンプルはシネスコサイズで2.35:1。

スライド B

スライド1:吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

スライド2:何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

スライド3:吾輩はここで始めて人間というものを見た。

解説
クールのMVによくあるパターン。キャッチはスライドに合わせて変更可能。画像のサイズは制限なしだが全て同じ比率で書き出す必要あり。1枚当たりの横幅は1280pxを限度(変更できます)とし、それ以上は特定の背景色(もしくはパターンや背景画像)で塗り潰される。高さの制限は無し。上記サンプルは2:1。

スライド C

スライド1:吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

スライド2:何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

スライド3:吾輩はここで始めて人間というものを見た。

解説
クールのMVによくあるパターンその2。キャッチはスライドに合わせて変更可能。画像のサイズは制限なしだが全て同じ比率で書き出す必要あり。1枚当たりの横幅は960pxを限度(変更できます)とし、それ以上は前後のスライドが表示される。高さの制限は無し。上記サンプルは3:2。

スライド D

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

解説
シンプルにあるようなスライダーですがシンプルのスライダーとは別な作りをしており、シンプルのスライドではやっていないサブピクセルスクロール対応で超極遅のスクロールでも滑らかに。ただし現時点では1枚しか置けずシンプルの様に重ね置きはできませんが、イメージに透過を使用すれば背景に色を敷いたり別の固定画像背景に敷くことはできます。

この仕組みに必要なもの(コーダー向け)

必要なファイル
CSS
/wp-content/themes/wp-pop/assets/css/mod_slide.css

JS
/wp-content/themes/wp-pop/assets/js/mod_slide.js

使い方:上記CSSとJSを読み込ませてこのページのHTMLソース

<div id="MV_

で始まるDIVをコピペすれば使用可能。
読み込んだCSS側でベースカラーの調整をする必要あり。
画像サイズに制限は無し。ただしすべての画像を同じ大きさにすること。