27 | 3月 | 2013 | パソコン倶楽部りんご

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

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

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

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

front-page.php

get_header(); ?>
		<div id="primary">
			<div id="content" role="main">

				<?php while ( have_posts() ) : the_post(); ?>

					<?php get_template_part( 'content', 'page' ); ?>
                                         
				<?php endwhile; // end of the loop. ?>

<!-- アニメーション1  ここにペースト-->
<div id="page">
        <ul class="cb-slideshow">
            <li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
            <li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
            <li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
            <li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
            <li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
            <li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
        </ul>
        <div class="container">
            <!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://tympanus.net/Development/RockingLetters/">
                    <strong>&laquo; Previous Demo: </strong>Rocking Letters with CSS3 &amp; jQuery
                </a>
                <span class="right">
                    <a href="http://www.flickr.com/photos/markjsebastian/" target="_blank">Photography by Mark Sebastian</a>
                    <a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en" target="_blank">CC BY-SA 2.0</a>
                    <a href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
            <header>
                <h1>CSS3 <span>Fullscreen Slideshow</span></h1>
                <h2>A CSS-only slideshow for background images</h2>
				<p class="codrops-demos">
					<a href="#" class="current-demo">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
				</p>
            </header>
        </div>
    </div>
<!-- アニメーション ペーストここまで-->

<h2>最新BLOG</h2>　　　　　　　　　　　　
<?php /*--ここから、最新の投稿記事取得一覧--*/?>
<?php
echo '<ul id="test">';
$posts = get_posts();
foreach($posts as $post):
   setup_postdata($post);?>
<li><a href="<?php the_permalink(); ?>"><span><?php the_modified_date('Y年Fj日'); ?></span><?php the_title(); ?></a></li>
<?php
endforeach;
echo '</ul>';
?>
			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'page' ); ?>

<?php endwhile; // end of the loop. ?>

<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>

<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>

<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>

<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>

<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>

<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>

</ul>

<strong>« Previous Demo: </strong>Rocking Letters with CSS3 & jQuery

</a>

<a href="http://www.flickr.com/photos/markjsebastian/" target="_blank">Photography by Mark Sebastian</a>

<strong>Back to the Codrops Article</strong>

</a>

</span>

</div>

<h1>CSS3 <span>Fullscreen Slideshow</span></h1>

<h2>A CSS-only slideshow for background images</h2>

</p>

</header>

</div>

<h2>最新BLOG</h2>　　　　　　　　　　　　

<?php /*--ここから、最新の投稿記事取得一覧--*/?>

<?php

echo '<ul id="test">';

$posts = get_posts();

foreach($posts as $post):

setup_postdata($post);?>

<?php

endforeach;

echo '</ul>';

</div>

</div>

<?php get_footer(); ?>

/*アニメーション1*/

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;

    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(http://st-neverland.com/blog/wp-content/uploads/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(http://st-neverland.com/blog/wp-content/uploads/1.jpg);/*-画像- */
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(http://st-neverland.com/blog/wp-content/uploads/2.jpg);/*-画像- */
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(http://st-neverland.com/blog/wp-content/uploads/3.jpg);/*-画像- */
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(http://st-neverland.com/blog/wp-content/uploads/4.jpg);/*-画像- */
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(http://st-neverland.com/blog/wp-content/uploads/5.jpg);/*-画像- */
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(http://st-neverland.com/blog/wp-content/uploads/6.jpg);/*-画像- */
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

ul, ol {
    margin: 0;/* 表示したら、リストが左上に出てたので、これをいれました。 */
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

/*アニメーション1*/

.cb-slideshow,

.cb-slideshow:after {

position: fixed;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

z-index: 0;

}

.cb-slideshow:after {

content: '';

background: transparent url(http://st-neverland.com/blog/wp-content/uploads/pattern.png) repeat top left;

}

.cb-slideshow li span {

width: 100%;

height: 100%;

position: absolute;

top: 0px;

left: 0px;

color: transparent;

background-size: cover;

background-position: 50% 50%;

background-repeat: none;

opacity: 0;

z-index: 0;

-webkit-backface-visibility: hidden;

-webkit-animation: imageAnimation 36s linear infinite 0s;

-moz-animation: imageAnimation 36s linear infinite 0s;

-o-animation: imageAnimation 36s linear infinite 0s;

-ms-animation: imageAnimation 36s linear infinite 0s;

animation: imageAnimation 36s linear infinite 0s;

}

.cb-slideshow li div {

z-index: 1000;

position: absolute;

bottom: 30px;

left: 0px;

width: 100%;

text-align: center;

opacity: 0;

color: #fff;

-webkit-animation: titleAnimation 36s linear infinite 0s;

-moz-animation: titleAnimation 36s linear infinite 0s;

-o-animation: titleAnimation 36s linear infinite 0s;

-ms-animation: titleAnimation 36s linear infinite 0s;

animation: titleAnimation 36s linear infinite 0s;

}

.cb-slideshow li div h3 {

font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

font-size: 240px;

padding: 0;

line-height: 200px;

}

.cb-slideshow li:nth-child(1) span {

background-image: url(http://st-neverland.com/blog/wp-content/uploads/1.jpg);/*-画像- */

}

.cb-slideshow li:nth-child(2) span {

background-image: url(http://st-neverland.com/blog/wp-content/uploads/2.jpg);/*-画像- */

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-o-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s;

}

.cb-slideshow li:nth-child(3) span {

background-image: url(http://st-neverland.com/blog/wp-content/uploads/3.jpg);/*-画像- */

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

-o-animation-delay: 12s;

-ms-animation-delay: 12s;

animation-delay: 12s;

}

.cb-slideshow li:nth-child(4) span {

background-image: url(http://st-neverland.com/blog/wp-content/uploads/4.jpg);/*-画像- */

-webkit-animation-delay: 18s;

-moz-animation-delay: 18s;

-o-animation-delay: 18s;

-ms-animation-delay: 18s;

animation-delay: 18s;

}

.cb-slideshow li:nth-child(5) span {

background-image: url(http://st-neverland.com/blog/wp-content/uploads/5.jpg);/*-画像- */

-webkit-animation-delay: 24s;

-moz-animation-delay: 24s;

-o-animation-delay: 24s;

-ms-animation-delay: 24s;

animation-delay: 24s;

}

.cb-slideshow li:nth-child(6) span {

background-image: url(http://st-neverland.com/blog/wp-content/uploads/6.jpg);/*-画像- */

-webkit-animation-delay: 30s;

-moz-animation-delay: 30s;

-o-animation-delay: 30s;

-ms-animation-delay: 30s;

animation-delay: 30s;

}

.cb-slideshow li:nth-child(2) div {

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-o-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s;

}

.cb-slideshow li:nth-child(3) div {

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

-o-animation-delay: 12s;

-ms-animation-delay: 12s;

animation-delay: 12s;

}

.cb-slideshow li:nth-child(4) div {

-webkit-animation-delay: 18s;

-moz-animation-delay: 18s;

-o-animation-delay: 18s;

-ms-animation-delay: 18s;

animation-delay: 18s;

}

.cb-slideshow li:nth-child(5) div {

-webkit-animation-delay: 24s;

-moz-animation-delay: 24s;

-o-animation-delay: 24s;

-ms-animation-delay: 24s;

animation-delay: 24s;

}

.cb-slideshow li:nth-child(6) div {

-webkit-animation-delay: 30s;

-moz-animation-delay: 30s;

-o-animation-delay: 30s;

-ms-animation-delay: 30s;

animation-delay: 30s;

}

/* Animation for the slideshow images */

@-webkit-keyframes imageAnimation {

0% { opacity: 0;

-webkit-animation-timing-function: ease-in; }

8% { opacity: 1;

-webkit-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@-moz-keyframes imageAnimation {

0% { opacity: 0;

-moz-animation-timing-function: ease-in; }

8% { opacity: 1;

-moz-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@-o-keyframes imageAnimation {

0% { opacity: 0;

-o-animation-timing-function: ease-in; }

8% { opacity: 1;

-o-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@-ms-keyframes imageAnimation {

0% { opacity: 0;

-ms-animation-timing-function: ease-in; }

8% { opacity: 1;

-ms-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@keyframes imageAnimation {

0% { opacity: 0;

animation-timing-function: ease-in; }

8% { opacity: 1;

animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

/* Animation for the title */

@-webkit-keyframes titleAnimation {

0% { opacity: 0 }

8% { opacity: 1 }

17% { opacity: 1 }

19% { opacity: 0 }

100% { opacity: 0 }

}

@-moz-keyframes titleAnimation {

0% { opacity: 0 }

8% { opacity: 1 }

17% { opacity: 1 }

19% { opacity: 0 }

100% { opacity: 0 }

}

@-o-keyframes titleAnimation {

0% { opacity: 0 }

8% { opacity: 1 }

17% { opacity: 1 }

19% { opacity: 0 }

100% { opacity: 0 }

}

@-ms-keyframes titleAnimation {

0% { opacity: 0 }

8% { opacity: 1 }

17% { opacity: 1 }

19% { opacity: 0 }

100% { opacity: 0 }

}

@keyframes titleAnimation {

0% { opacity: 0 }

8% { opacity: 1 }

17% { opacity: 1 }

19% { opacity: 0 }

100% { opacity: 0 }

}

/* Show at least something when animations not supported */

.no-cssanimations .cb-slideshow li span{

opacity: 1;

}

@media screen and (max-width: 1140px) {

.cb-slideshow li div h3 { font-size: 140px }

}

@media screen and (max-width: 600px) {

.cb-slideshow li div h3 { font-size: 80px }

}

ul, ol {

margin: 0;/* 表示したら、リストが左上に出てたので、これをいれました。 */

}

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

パソコン倶楽部りんご

Webデザイン脱初心者の勉強会

日別アーカイブ: 2013年3月27日

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

スマホ対応のデザイン

cssで画像をクロスフェードに挑戦

月	火	水	木	金	土	日
« 2月				4月 »
				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	31