FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

無料のスライドプラグインGlideの使いかた

りえちゃんのHな自画撮り」をスライドショーにしてみたんだけども
かなり苦労したので、備忘録として残しときます。

fc2や他のブログに組み込む方の参考になればと思います。
Glideの使い方説明で来た人にはエロいサイトですんません。

まず、最初に文句を。
配布元Glideの使い方を検索するとすぐに出てくる日本語の説明サイト
が糞すぎて、ブログに組み込むのに大変苦労しました。

こいつらの説明みてると、ものすごく簡単にできそうですが
実際にはCSSをきっちり書かないと
まともに動きません。
そして、どういうCSSにしたらいいかが全く書かれていない。

ということで、この記事で詳しく説明します。
ってか、このスライダーの作者も、日本語の解説サイトの奴も
よくわかってないんじゃないか?
サンプルのCSSが明らかにおかしい。。。

難しい説明は抜きにすぐ使いたいって人は
この記事で配布するCSSサンプルをそのまま使ったほうが楽です。

まずGlide(グライド)の特徴を。
・Jqueryを使ったjsスライドショー
・スマホ、パッド等のタブレットデバイスのスワイプに対応

※スワイプってのは指でシュってページめくる操作のことね。
・PCの左右矢印キーボードでのページめくりにも対応。
・レスポンシブル

※ブラウザのウィンドウや、デバイスの画面サイズに合わせて
スライドショーのサイズが変わるってことです。

休み時間に突然エロ画で抜きたい場合に
左手でスマホ操作しながら、右手で自分のレバーを操作するって
ことができるわけです。

ってことで、この素晴らしいGlide
fc2ブログに組み込む方法を説明します。

ブログ記事中にもプラグインエリアにも組み込めますが
ここではブログ記事組み込む方法を説明します。

■必要ファイルのダウンロード
・jquery.glide.jsここからダウンロードしてください。
・glide.cssここからダウンロードしてください。

■必要ファイルをfc2へアップロード
ブログのファイルアップロード機能を使ってファイルをアップロードします。
・jquery.glide.js
※fc2ブログではファイル名にピリオドを含めることが出来ないので
ファイル名をglide.jsに変更しました。

・glide.css
・スライドしたい画像ファイル

アップロード後は以下の様な画面になると思います。

gl01.jpg



■テンプレートへスクリプトをコピペ
テンプレートのHTML編集領域へ
CSS読み込み部分と、glide.js読み込み部分をコピペします。

1)CSSファイル読み込み部分のコピペ
これはテンプレートのHTML編集領域の一番上のあたりに
貼りつけ先の領域があります。
以下をテンプレートの</HEAD>の直前にコピペします。
赤文字部分は自分のアップロードしたURLに変更してください。
各ファイルのアップロードURLは先ほどの画面の赤い枠で囲った部分に
記述されていますので、それをコピペすればOKです。

<link rel="stylesheet" type="text/css" href="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/glide.css">


コピペ後は以下の様になります。HTML編集領域の一番上のあたりです。
赤枠部分がコピペした領域です。
gl02.jpg



2)jquery.js、glide.jsの読み込みと、glideの起動部分のコピペ
これはテンプレートのHTML編集領域の一番下のあたりに
貼りつけ先の領域があります。
以下をテンプレートの</BODY>の直前へコピペします。
赤文字部分は自分のアップロードしたURLに変更してください。
各ファイルのアップロードURLは先ほどの画面の赤い枠で囲った部分に
記述されていますので、それをコピペすればOKです。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/glide.js"></script>
<script>
$('.slider').glide({
autoplay: 5000
});
</script>


コピペ後は以下の様になります。HTML編集領域の一番下のあたりです。
赤枠部分がコピペした領域です。
gl03.jpg



■テンプレートのCSS編集
これは使っているCSSに依存するので
不要な人もいると思います。
テンプレートのスタイルシート編集画面で"ul li"を検索してください。
以下の様な記述がある人は編集が必要です。


div.entry_body ul li {
list-style: disc;
margin-left: 15px;
}


上記部分を以下の様に変更してください。


div.entry_body ul li {
list-style: none;
margin-left: auto;
}



■スライド部の記述
ブログ記事にスライド部分を記述します。
このスライダを記述するブログ記事は
改行をHTMLタグのみと設定してください。
記事編集画面の一番下に設定項目があります。
改行したい場合はその部分に<BR>と記述すれば改行されます。

自動改行にすると以下の<li></li>間に<BR>タグが
自動的に挿入され、実際に用意した画像ファイルの倍の量のスライドが生成されます。

以下をコピペし<li></li>タグの間にスライドしたい<img>タグを追記します。


<div class="slider">
<ul class="slides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>


実際に<img>タグを追記した例は以下です。

<div class="slider">
<ul class="slides">
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0001.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0002.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0003.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0004.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0005.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0006.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0007.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0008.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0009.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0010.jpg" ></li>
<li class="slide"><img src="http://blog-imgs-68.fc2.com/d/o/m/domobxcamera/rieself0011.jpg" ></li>
</ul>
</div>


以上で、Glideの設置は完了です。
記事を保存したら、スライドショーが動いていると思います。

■動かない場合
・画像が全部縦に表示されている場合、スクリプトのコピペが正常にできていません。
貼りつけ部分と内容をチェックしてみてください。

・貼りつけた画像枚数の倍のページナビゲータ(スライダの下の小さい■です)が表示される。
たとえば画像を5枚用意して、■が10個表示される等。
記事を自動改行で保存しています。HTMLタグによる改行に設定して保存してください。

・画面がずれて表示される。
glide.cssのコピペが正常にできていません。
貼りつける部分と内容をチェックしてみてください。

ここから下は、ちょっとこみいった話なので
今までの説明でGlideがまともに動作してて
おなか一杯の人は読まなくてもいいです。

■cssの説明
1).slide imgセレクタの欠落

Glideを使うためにはcssをGlideが動くように記述する必要があります。
Glideはレスポンシブルなスライダなので
ウィンドウサイズや、Glideを配置した要素のボックス領域によって
動的にスライドサイズを変更します。

そのために必要なcssの記述が、配布元のサンプルにはありませんでした。
スライダのサイズは動的に変わるけど、中の画像サイズはそのままというT_T

そのためglide.cssに以下のコードを追記しました。
これは<li>要素のクラスセレクタslideの下位に
<img>タグが存在する場合
その<img>タグで表示する画像を
表示可能領域の80%の大さで、枠線付きで角を丸めて表示するというものです。
飾りの部分はどうでもいいですが、この記述が無いと
スライド領域のサイズは動的に変わっても、中の画像のサイズは固定されます。

/* added by domob*/
.slide img {
width:80%;
border-radius:10px;
border:2px solid #f88;
}

80%にしたのは、私が用意したスライド画像が縦長で
常に画面が上下切れてしまうためです。
これは使用する画像の縦横比によって調整が必要です。
横長画像なら100%でいいですが、枠線分だけ
若干縮小しする必要があります、98%等。

2)ナビゲーション表示
「next」次に進む、「prev」前に戻る、ページの直接選択用のナビゲーションチップ(下の■■■)
これらの表示位置のデザインがおかしいので修正しました。


.slider-arrow {
position: relative;
/* position: absolute; modified by domob*/
display: block;
/* margin-bottom: -20px;mod by domob*/
margin-bottom: 0px;
padding: 20px;
}

.slider-arrow--right {
bottom: 50%;
/* right: 30px; mod by domob */
float: right;
}



3)<li>要素のデザイン
スライドを<li>タグで囲むため
cssで設定されているli要素のデザインがスライドショーに適用されます。
自分の使っているテンプレートでは
<li>タグ要素に、箇条書き記号として小さい●を
使っているので、これを"none"無しにしました。
それからmargin-leftを15pxに設定しているため
スライドするごとに、画像が右へ15pxずつずれていました。

Glide<li>タグにはslideというクラスセレクタが
設定されています。
li.slideでデザイン指定すればよさそうなのですが
何故かcssの優先順位通りにはパースされないようなので
テンプレートのスタイルシートを直接変更しました。
テンプレートの上部で設定したul liのセレクタが
テンプレートの下部で設定したli.slideより優先されるという現象です。

位置的に下ですし、クラスセレクタなので
優先順位はul liより上のはずなんですけどね。
なんでかな、教えて分かる人。

「り○ちゃんのHな撮影会」シリーズ第一弾は以下から。
作品内容説明とサンプルもあるので興味ある方は
チェックしてみて下さい。
この記事が役に立ったって人は是非購入して頂けると嬉しいかも^^;





テーマ : スマホで素人動画
ジャンル : アダルト

エロネタ

    ご購入者様へ
    サポートページ
    最新記事
    り○ちゃんのHな撮影会サンプル
    ブログ限定画像アルバム
    スライドショーを見る
    りえちゃんのHな自画撮り
    スライドショーを見る
    今夜のおかず
    domobコンテンツ一覧
    エロリンク
    抜きネタさがしならここ、2次画像、動画、同人誌、3次画像、アニメ、ゲーム、エロ話にジャンル分けされてて好みのエロブログを簡単に見つけられます。
    登録エロブログ多数、最新のエロ記事を読みたい人はここからどうぞ。動画・静止画たくさんありマフ。
    XVIDEOSなどアダルトな日本人エロ動画まとめサイト。すぐに抜きたいなら、この下のタイトルクリック。他サイトに飛ばされないでパツイチで動画見れます。
      オヌヌメ
      以下はdomobも購入して愛用してる山本リンヂさんのコンテンツ。くぱぁ、クリ剥きファンにはお勧めです。山本リンヂさんのブログはここをクリック。お掃除オチンチン☆1●歳☆シコシコペロペロ オチンチン☆発情☆美少女☆1●歳☆ 上玉【清純美少女】☆薄毛マンコ☆くぱぁ ハーフ芸能●の妹【極秘】1●歳 かのん【パイパン】1●歳 【高校】退学直後

      以下はgcolleで販売してる、気になる素人系コンテンツ。

      ★個人撮影★私服jkみさき【LI○E掲示板で女子○生げっと☆】まるでお人形のような黒髪ロング少女なつみちゃんとハメ撮りSEX【JK個人撮影】黒髪お嬢さん女子高生が帰ってきた!まさかヤレルとは!ホテルで大興奮爆発ぐちょ突き映像(1)【フルHD】じぇいけい見学会 vol.27 【フルHD】じぇいけい見学会 vol.24 家出援交娘 - あみ - フルHD動画&写真集 【フルHD】じぇいけい見学会 vol.9 昔撮影したJC少女と援交 前編

      MGSで一番人気「なな 20歳 豆腐屋 」↓↓↓↓↓

      アダルト動画配信なら無料サンプルも豊富なMGS!

      続編も大人気「続・なな 20歳 豆腐屋 」↓↓↓↓↓

      アダルト動画配信なら無料サンプルも豊富なMGS!

      「桃谷エリカ」ちゃんのパイパン物、デビュー作らすぃ。「りりか」という名前で出演しています。↓↓↓↓↓

      身長165cm体重38kg 超スレンダーボディでフェラ動画を愛し日頃からオナニーをしているパイパン美少女 AVデビュー りりか(18歳)

      「桃谷エリカ」ちゃんのプレステージ1作目↓↓↓↓↓>

      しろうと脱がせ屋専科 1人目 桃谷エリカ

      「桃谷エリカ」ちゃんのプレステージ2作目↓↓↓↓↓>

      NEW TOKYO流儀 04 桃谷エリカ
      カレンダー
      05 | 2017/06 | 07
      - - - - 1 2 3
      4 5 6 7 8 9 10
      11 12 13 14 15 16 17
      18 19 20 21 22 23 24
      25 26 27 28 29 30 -
      月別アーカイブ
      カテゴリ
      検索フォーム
      アクセスランキング
      [ジャンルランキング]
      アダルト
      13290位
      アクセスランキングを見る>>

      [サブジャンルランキング]
      画像
      1285位
      アクセスランキングを見る>>
      QRコード
      QR
      RSSリンクの表示
      プロフィール

      ドゥーモブ

      Author:ドゥーモブ
      塾講師の副業で
      レイヤーさんの撮影、ROM写真集の製作をやってます。
      どっちが副業かわからなくなってますがWw

      顔出し・顔なし問わずモデルさん募集しています。
      興味の有る方はお気軽にモデル募集ページから
      応募してください、お問い合わせも可能となっています

      上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。