ジャンル

ジャンル一覧

ランキング

もっと活用

注目タグ

App Store
Google play

質問・疑問

コミュニティランキング

トピック詳細

skipprを実装したい…

Fc2公式のテンプレート「Diary_2column」のヘッダーを変更したくて、jQueryのskipprをダウンロード しました。

dist>skippr.cssのheight:300pxに変更後
dist>skippr.cssとskippr.jsをファイルアップロードしました

そしてこちら↓のブログを参考に変更してみましたが
http://blog.raizzenet.com/how-to-use-skippr/
全く動作しません

<header></header>内に設置しました

以前のレスポンシブじゃないテンプレートのときは
jQueryも動作してくれたんですが…

どうすればいいんでしょうか…
ご教授くださいませ





2016年01月28日 12:20  by 

コメント一覧 21件中、11～20件表示

  • 直したんですが
    やっぱり表示されず…

    本当にすみません

    2016年01月28日 17:37 by

  • それから、テンプレCSSソースの

    #header

    に指定してある
    height: 220px;
    は
    height: auto;
    に変更してくださいね。
    これやらないとオーバーフロー(溢れ)状態になってメインコンテンツとスライダーとが被ってしまいます。

    2016年01月28日 16:43 by vanillaice (Akira)

  • まるっとコピペすればできるはずです　(´・ω・｀)

    2016年01月28日 16:39 by vanillaice (Akira)

  • 私の指定内容書いておきますね。

    ・最新CSSファイルを<head>内
    <!--nextentry--><link rel="prev" href= "<%nextentry_url>"><!--/nextentry--> ;
    の直下に記述(修正は一切行わない)

    ・<header>〜</header>を以下の通り記載

    <header id="header">
    <div class="inner">
    <h1><a href="<%url>"><%blog_ name></a></h1>
    <p><%introduction></p>
    </div>
    <div id="skipcontainer">
    <div id="theTarget">
    <div style="background-image: url(アドレス)">&l t;/div>
    <div style="background-image: url(アドレス)">&l t;/div>
    <div style="background-image: url(アドレス)">&l t;/div>
    </div>
    </div>
    </header>

    ・最新JSファイル(minファイル)を</body>の直前に

    ・フックアップをJSファイル直下に。内容は以下の通り。

    <script>
    $(function(){
    $("#theTarget").skippr({
    transition: 'slide',
    autoPlay: true,
    });
    });
    </script>

    ・CSSソース(テンプレのことです)末尾に以下を記載

    #skipcontainer {
    width: 100%;
    height: 希望の高さpx;
    }

    2016年01月28日 16:38 by vanillaice (Akira)

  • なんかCSSファイルおかしくないですか　(´・ω・｀)
    こちら行って最新ファイルのDLをしてください　↓

    https://github.com/austenpayan/skippr

    大元のCSSファイルを修正してはいけません。
    内容をしっかり把握しているのなら別ですが。
    本来はheight: 100%でなければいけないところが何故かheight: 300pxになっています。
    このファイルは一旦破棄して最新CSSファイルを入手してください。

    2016年01月28日 16:26 by vanillaice (Akira)

  • よろしくお願いします(涙)

    2016年01月28日 16:23 by

  • できましたよ　(´・ω・｀)
    ちょっとそちらまた伺います(笑)

    *まだJqueryライブラリの重複が修正されていません
    これが原因になっていることもありますので正しく修正してください。

    2016年01月28日 16:18 by vanillaice (Akira)

  • 直しましたが
    変化はありませんでした…

    すみません

    2016年01月28日 15:42 by

  • まずJqueryライブラリが3つ入っています。
    これは一つにしてください。
    <head>内にあるもの以外は削除。
    ただしバージョンによって動かなくなるプラグインもありますので、その辺は各々確認が必要です。
    (例えばtoggleのfunctionやIE8以下向けは古いJqueryでなければ動作しません)
    skipprの必要要件も照らしてライブラリを1件に。

    そして現在skippr要素の高さ(縦幅)が0になってます。
    CSS定義が為されていません。
    #sliderへの定義がされていません。
    CSSソース内に

    #slider {
    width: 100%;
    height: 数値px;
    }

    の指定が必要です。

    2016年01月28日 15:00 by vanillaice (Akira)

  • すみません（汗）

    只今そのテンプレートを適用しました
    ご確認いただければと思います

    2016年01月28日 14:37 by

<< < 1 2 3 > >>

Copyright(c)1999 FC2, Inc. All Rights Reserved.

ジャンル一覧