WP CSS3フルスクリーン背景スライドショーについて-Fullscreen Slideshow

CSS3で、スライドショーを背景にしたサンプルをみつけました。
ちょっとやってみたくなって、
http://st-neverland.com/
でやってみました。
写真は仮です。

wpの、front-page.php (固定ページ)に
demoサイト
から、コピペ(^_^;)して、やってみました。
表示は出来るのですが、背景に指定できません。
コンテンツもきちんと表示できません。
スマホもグチャグチャです。

Demo1のように表示して、新着ブログも背景の中に表示したいのですが。
どこにスタイルを指定すれば良いのか、、、困っています。(~_~)

ヘッダー含め、修正箇所が沢山あると思いますが、どうしたら良いですか???。。。

front-page.php

div id=”page” は元々body id=”page” でした。
bodyはおかしいと思って。divに変更しました。
これだと、bodyには指定できてない気がします。。。
すみません。長いですがこんな感じです。

WP CSS3フルスクリーン背景スライドショーについて-Fullscreen Slideshow」への10件のフィードバック

  1. タカハシ先生タカハシ先生

    アニメ用のdivは、#primaryの中ではなくて、その前に挿入した方が良い。
    そして、#pageはWP側で既に使用されているid名なので、別の名前にすること。
    あとは、アニメーションさせるdivのz-indexや、#primaryの背景をrgbaで指定して、
    ちょっとだけ透けさせるが良いかもね。

    返信
  2. kanedakaneda 投稿作成者

    ありがとうございます!
    アニメ用のdiv #pageですが、特にCSSが何も書いてなかったので、削除して
    #primaryの上にペーストしました。
    SHOP CONCEPTとBLOGは背景画像の上に表示されました。
    footerは、まだ見えないです。。。

    先生より>>>アニメーションさせるdivのz-indexや、#primaryの背景をrgbaで指定して、
    ちょっとだけ透けさせる。 

    調べてみました。
    ・個別に透明度を適用したい場合は「RGBa」
    background、color、borderなど個別に指定することがでる。

    CSSを↓

    #rgba01{
    background:rgba(0,0,0,0.8);
    padding:5px 50px 30px 50px;
    margin:0;
    }

    アニメーションの下に
    #rgba01 で指定してみました。

    背景が透明になりました!
    他の背景色がまだ見えてますが。
    指定の仕方は、あってますか???
    z-indexの事は、まだ勉強不足です。。

    返信
    1. タカハシ先生タカハシ先生

      背景色の指定はrgbaで出来てますよ!がんばりましたね。
      #site-generatorも2つになっているので1つに直しましょう。
      div.cb-slideshowの後にある、div.containerには、コピペ元の内容が入っているけど、
      そこまでコピペしなくても良いのでは?

      z-indexは、positionにrelative,absolute,fixedを指定した要素に指定できます。
      分かり易いのは以下の構造にすることかな。
      html
       body
        .cb-slideshow
        #page

      で、bodyと#pageがposition:relative、.cb-slideshow はfixedで、それぞれにz-indexを指定。

      返信
  3. kanedakaneda 投稿作成者

    おはようございます!
    rgbaの指定、出来てよかったです!
    誉められると、嬉しいです(^_^)
    ありがとうございます。

    div.cb-slideshowの後にある、div.containerには、コピペ元の内容がは、なんとなく
    デザインのイメージもこんな感じにしようかと思って、なんとなく消せずにいました。(^^;)
    でも、今は邪魔なので削除しました。

    z-indexの指定ですが、
    ●先生より→→bodyと#pageがposition:relative、.cb-slideshow はfixedで、それぞれにz-indexを指定

    ※CSS※※※

    body
    position:relative;
    z-index: 0;

    #page
    position:relative;
    z-index: 1;

    アニメーション
    .cb-slideshow,
    .cb-slideshow:after
    position: fixed;
    left: 0px;
    z-index: 0;

    こんな感じにしてみましたが、これで良いのでしょうか?
    表示は特に変わってない様にみえます(>..<) 元々の背景色が、薄くでちゃうのは、うまく出来てないってことですか? z-index 理解できてないです。難しい。。。 上に表示させたいので #page に z-index: 1; と入れてみました。 #site-generatorが2つ????はどこに2つなのか探し中です。 なかなか見つかりません。(@@)

    返信
    1. タカハシ先生タカハシ先生

      構造を以下の様に変られないですか?
      body
        .cb-slideshow(bodyタグの直下。#pageより前)
        #page

      #site-generatorについては、#mainの最後の要素と、footer#colophonの最初の要素にある。
      #mainの最後の要素の方が不要だと思う。

      返信
  4. kanedakaneda 投稿作成者

    ありがとうございます。

    body直下に.cb-slideshowを入れるとすると、
    header.php に.cb-slideshowを入れると言う事ですか??

    ●固定ページ front-page.php
    body
    header.php→→→ .cb-slideshow(bodyタグの直下。#pageより前)
      #page

    bodyの直下をいじれるのが、header.phpだったので、.cb-slideshowを
    header.phpに移動?してみました。
    背景に表示されたのですが、構造を変えられたのでしょうか??

    body
     .cb-slideshow
     #page
    になってます。(@@)
    背景色の白も、消したほうが良いですよね。

    先生より>>>#site-generatorについては、#mainの最後の要素と、footer#colophonの最初の要素にある。
    #mainの最後の要素の方が不要。

    footer.php の 一番最初のコメントアウトみたいな部分に
    div id=”site-generator” が入ってました。

    ここから削除→→→→div id=”site-generator”  /div ←←←ここまで削除< ?php /** * The template for displaying the footer. * * Contains the closing of the id=main div and all content after * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ ?>
    /div !– #main –>
    ここからfooter

    元々入っていたみたいですが、削除したら消えました。
    こんな書き方もあるんですね?(?_?)

    返信
  5. タカハシ先生タカハシ先生

    >背景色の白も、表示されない様にしないと
    そこで半透明ですよ。
    半透明の効果を発揮するには、手前にある必要がある訳です。
    後ろの色がうっすらと見えてこそ、スケスケの意味があるんです。
    オーガンジー素材が透けて、その後ろが見えるのと同じ。

    返信
  6. kanedakaneda 投稿作成者

    やってみました!
    背景が透けました!
    ヘッダーとかデザイン考えないと、せっかくの透けが台無しですね(^_^)

    スマホの背景はスライドさせない方が良いですよね?
    スマホだと画像が、うまく表示できてないです(3_3)

    返信

コメントを残す

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

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.