カテゴリー別アーカイブ: study

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

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には指定できてない気がします。。。
すみません。長いですがこんな感じです。

スマホ対応のデザイン

1件のフィードバック

先生に質問

media queryでスマホ対応にしようと思い、作業中です。

参考にと思いhttp://www.malebranche.co.jp/
を見ました。画面横幅をせばめるとメニューが縦並びになります。その際にスマートフォン対応サイトへと出てきます。
それをクリックして見る（PCで）のと、実際スマホで見るのとでは、レイアウトが違います。PCで見ると、左側にサイドメニュー的なものがあります。

これは、どういうことでしょうか？

スマホ用に、別にサイトを作り、modanizerとかで
分岐して表示させてるのですか？

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

2件の返信

先生のを参考にやってますが、うまくいきません。手書きしてましたけど上手くいかないので、
とりあえず、一回コピペで試してみましたが、うまくいきません。
http://nobu-69.com/manakaa/sample2/
３枚目の画像の後に謎の空白時間があります。

現在の理解度

/*cssでスライドショー*/

クロスフェードするものの大外枠です。widthを切れば画面いっぱいに表示されます。
#bg_header{
margin:0 auto;
width:900px;
}

高さ指定は必須。指定しないと、場所が確保されないので。
画像は縦に３つ並びます。overflow:hidden;であふれた分を隠します。
.slider{
height:400px;
position:relative;
overflow:hidden;
}

各画像をabsolute the butcherで同じ位置に重ねる。
.slider img {
position:absolute;
width:100%;
}

opacity:0;で完全に透明にする。キーフレーム名（必須）をつける、overwrapとする。（任意の名前でいい）
２４ｓは２４秒という意味。何が２４ｓなのでしょう？easeはイージング。infiniteは永遠に。
.slider img {
opacity:0;
animation:overwrap 24s ease infinite;
}

nth-of-type(1)は一枚目という意味かな？一枚目のディレイが0なのは、
すぐに表示させたいから。２枚目は４秒後に出現。３枚目は８秒後に出現。
.slider img:nth-of-type(1) {
animation-delay:0;
}
.slider img:nth-of-type(2) {
animation-delay:4s;
}
.slider img:nth-of-type(3) {
animation-delay:8s;
}

overwrapと名前をつけたキーフレームに色々と指定を書く。
ここが良く分からないです。
スライドショーの柿のやつの黒板の説明みたけど、？です。
難しいです。
@keyframes overwrap {
0% {opacity:0;z-index:10;}
5%,30% {opacity:1;}
44% {opacity:0;z-index:-1;}
45%,100% {opacity:0;z-index:-1;}
}

よろしくお願いします。

2013-03-22 勉強会

コメントをどうぞ

日時：2013年３月22日（金）18:00〜22:00
会場：柴崎学習館第二和室
出席者：高橋先生、真中のぶ、ランサーしょうじ、かおりんご、KANEDA
項目は、

Manaka Designのマークアップについて
レスポンシブwebデザインのスライダーはどうするか？
バナーサイズについて
新しいプラグイン(勉強会のカレンダーをwidgetに表示)
固定トップページに画像をアップし、スライドさせる方法の検討

続きを読む →

WordPressで複数ヘッダー画像をcssスライドショーで動かす

3件の返信

2013-3-22勉強会で、収まらなかった内容をパソコン倶楽部りんご：TOPページに実装しました。
WordPressのヘッダー画像に複数の画像をアップしておいて、fornt_pageの時は、header.phpでそれらを取得してcssのanimationで動かします。front_pageでない時は、Twenty Twelveの設定のまま（任意の画像に固定か、ランダムかを選択）です。animationの動作はFirefox16+、Google Chrome21+、Safari6+で確認しました。続きを読む →

2013-3-15勉強会

3件の返信

今回もお菓子が充実してました。
2013-3-15 お菓子勉強会の概要は、

media queryの解説
WordPressのユーザー一覧ページを作る、の補足
実装したい機能を自力で調べて作る方法
TOPページのアイキャッチをスライドにしよう

でした。続きを読む →

キャラメルメープルポップコーンのパッケージをhtml5とcssで再現

コメントをどうぞ

2013-3-8勉強会で行った「マークアップとcssの筋トレ」は、キャラメルメープルポップコーンのパッケージを取り上げました。

マークアップとcssの筋トレとは？

チラシ、パッケージ、書籍などの印刷物や、看板などをhtmlとcssで再構築することで、マークアップとcssのスキルをアップする為の練習です。

手順

まず、題材を用意します。

今回はこれ。

セブンイレブンで買いました

選ぶ題材は、文書量があまり多くないものが良いでしょう。

文字要素を抜き出します。

SEVEN&amp;i PREMIUM
キャラメルメープルポップコーン
キャラメルの甘さとメープルの風味豊かなポップコーンです。
50g
1袋50g当たり272kcal
写真はイメージです
メープル香料使用
VALUE PRICE 100YEN

SEVEN&i PREMIUM

キャラメルメープルポップコーン

キャラメルの甘さとメープルの風味豊かなポップコーンです。

50g

1袋50g当たり272kcal

写真はイメージです

メープル香料使用

VALUE PRICE 100YEN

お好きなエディタでマークアップする

この段階では以下に留意して下さい。

印刷物をWeb上に再現するつもりで、SEOを考慮すること。
マークアップに不要な要素（div,span,br）や、属性(id,class)は使わない。これらはcssで装飾する段階で使う
doctypeを指定する。html5推奨。
title要素も忘れずに

ここで、メンバー同士で、各自のメークアップを発表します。比較・検討すると面白いです。
マークアップには、厳密な意味での正解はありません（明らかな間違いはあるでしょうが）。
例えばこの題材では次の様なパターンがありました。

<section>
<p>SEVEN&i PREMIUM</p>
<p>キャラメルメープル</p>
<h1>ポップコーン</h1>
</section>

<p>SEVEN&i PREMIUM</p>

<p>キャラメルメープル</p>

<h1>ポップコーン</h1>

</section>

<section>
<hgroup>
<h3>SEVEN&i PREMIUM</h3>
<h2>キャラメルメープル</h2>
<h1>ポップコーン</h1>
</hgoup>
</section>

<h3>SEVEN&i PREMIUM</h3>

<h2>キャラメルメープル</h2>

<h1>ポップコーン</h1>

</hgoup>

</section>

<hgroup>
<h3>SEVEN&i PREMIUM</h3>
<h1>キャラメルメープルポップコーン</h1>
</hgoup>

<h3>SEVEN&i PREMIUM</h3>

<h1>キャラメルメープルポップコーン</h1>

</hgoup>

この場合は、パターン3の方が妥当性が高いです。hgroup内の見出し要素は、最も数字の小さいものがアウトラインとして採用され、その他は省略されてしまいます。
「キャラメルメープルポップコーン」は、一つながりの商品名で、要素としても「キャラメルメープル」と「ポップコーン」で分けるべきではありません。「ポップコーン」の方が大きい文字になっているのは、cssで調整しましょう。

cssで装飾する

まずは題材を出来るだけ再現してみます。
その上で、Webならではの工夫を加えると、より良いです。
ここで、必要ならば、divやspanを追加したり、idやclassなどの属性を追加しましょう。

こんな感じにしてみました

screenshot-html5-popcorn-package

<body>
<hgroup>
<h3 class="logo"><span class="si">SEVEN&amp;i</span><span class="pr">PREMIUM</span></h3>
<h1>キャラメルメープル<span>ポップコーン</span></h1>
<h2>キャラメルの甘さとメープルの風味豊かなポップコーンです。</h2>
</hgroup>
<ul>
<li>50g</li>
<li>1袋50g当たり<strong>272kcal</strong></li>
<li>写真はイメージです</li>
<li>メープル香料使用</li>
</ul>
<p>
<span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span>
<span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span>
<span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span>
<span class="hyaku">100<small>YEN</small></span></p>
</body>

<body>

<h3 class="logo"><span class="si">SEVEN&i</span><span class="pr">PREMIUM</span></h3>

<h1>キャラメルメープル<span>ポップコーン</span></h1>

<h2>キャラメルの甘さとメープルの風味豊かなポップコーンです。</h2>

</hgroup>

<ul>

<li>写真はイメージです</li>

<li>メープル香料使用</li>

</ul>

<p>

</body>

cssはこんな感じ。

html,body,hgroup,h1,h2,h3,p,ul,li{
margin:0;padding:0;
}
body {
text-align: center;
background:url(popcorn.jpg) 0 0 no-repeat;
background-size:cover;
}
hgroup{
width:20em;
margin:5em auto;
padding:1em;
background:rgba(255,255,255,0.8);
font-family:'Hiragino Mincho ProN',serif;
font-size:1.5em;
}
h1{line-height:1.2;font-size:2.6em;letter-spacing:-0.15em;
}
h1 span{display:block;font-size:1.55em;letter-spacing:-0.2em;}
h2{line-height:1.2;font-size:1.4em;}
/*ロゴマーク*/
.logo{
font-size:0.6em;
margin:1em auto;
width:4em;
height:5em;
position:relative;
overflow: hidden;
border-radius:0 0.5em 0 0;
}
.logo span {
position:absolute;
display:block;
text-align:center;
font-size:0.9em;
z-index:8;
background:#fff;
line-height: 1;
}
.logo .si {
color: green;
font-family: Arial;
font-size: 0.88em;
left: 0.1em;
top: 2.4em;
z-index: 9;
}
.logo .pr {
bottom: 0;
color: #32d;
font-family: Georgia;
font-size: 0.7em;
left: 0.1em;
z-index: 8;
}
.logo:before,
.logo:after,
.pr:before,
.pr:after {
content:"";
display:block;
position:absolute;
font-size:1em;
}
.logo:before{
font-size:0.8em;
display:block;
background:orange;
top:0;
left:0.2em;
width:4em;
height:1.2em;
z-index:2;
}
.logo:after {
font-size:0.8em;
display:block;
border:1.1em solid transparent;
border-color:red #fff #fff red;
border-radius: 90% 0 0;
box-shadow:0 0 0 0.3em #fff;
height: 4.2em;
width: 2.8em;
left: 1.2em;
top:-0.3em;
z-index:3;
}
.pr:before{
background:green;
height:4.2em;
right: 0.2em;
top: -4.2em;
width: 1.1em;
z-index: 3;
}
.pr:after {
background:green;
border-radius: 50%;
box-shadow: 0 0 0 0.3em #fff;
height: 1.3em;
right: 0;
top: -6em;
width: 1.3em;
z-index: 6;
}
ul{padding:1em;display:inline-block;font-size: 1.2em;}
li{display:inline-block;line-height:1.2;}
li:first-of-type {font-size:2em;padding:0.2em;}
li:nth-of-type(2) {font-size:0.7em;width:8em;position:relative;}
li:nth-of-type(2):before {
border-left: 2px solid #000;
content: "";
font-size: 2.3em;
width: 1em;
height: 1em;
left: -0.3em;
top: 0.2em;
position: absolute;
}
li:nth-of-type(2) strong {display: block;font-size:1.5em;}
p{display:inline-block;
width:4em;
height:4em;padding:1em;text-align:center;background:#fff;border-radius:50%;border:2px solid #000;position:relative;}
.hyaku {display:block;font-size:2em;line-height:1;font-weight: bold;position:relative;top:0.3em;left:-0.1em;}
.hyaku small {display:block;font-size:0.5em;}
.vp {
display: block;
font-size: 0.6em;
height: 50%;
left: 4.5em;
position: absolute;
top: 0;
width: 1em;
-webkit-transform-origin:center bottom;
-moz-transform-origin:center bottom;
transform-origin:center bottom;
}
.vp:nth-of-type(2){
-webkit-transform:rotateZ(120deg);
-moz-transform:rotateZ(120deg);
transform:rotateZ(120deg);
}
.vp:nth-of-type(3){
-webkit-transform:rotateZ(240deg);
-moz-transform:rotateZ(240deg);
transform:rotateZ(240deg);
}
.vp span{
position: absolute;
display:block;
width: 1em;
height: 100%;
left: 0;
top: 0;
-webkit-transform-origin:center bottom;
-moz-transform-origin:center bottom;
transform-origin:center bottom;
}
.vp span:nth-of-type(1){-webkit-transform:rotateZ(-50deg);-moz-transform:rotateZ(-50deg);transform:rotateZ(-50deg);}
.vp span:nth-of-type(2){-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);transform:rotateZ(-40deg);}
.vp span:nth-of-type(3){-webkit-transform:rotateZ(-30deg);-moz-transform:rotateZ(-30deg);transform:rotateZ(-30deg);}
.vp span:nth-of-type(4){-webkit-transform:rotateZ(-20deg);-moz-transform:rotateZ(-20deg);transform:rotateZ(-20deg);}
.vp span:nth-of-type(5){-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);transform:rotateZ(-10deg);}
.vp span:nth-of-type(6){-webkit-transform:rotateZ(0deg);-moz-transform:rotateZ(0deg);transform:rotateZ(0deg);}
.vp span:nth-of-type(7){-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);transform:rotateZ(10deg);}
.vp span:nth-of-type(8){-webkit-transform:rotateZ(20deg);-moz-transform:rotateZ(20deg);transform:rotateZ(20deg);}
.vp span:nth-of-type(9){-webkit-transform:rotateZ(30deg);-moz-transform:rotateZ(30deg);transform:rotateZ(30deg);}
.vp span:nth-of-type(10){-webkit-transform:rotateZ(40deg);-moz-transform:rotateZ(40deg);transform:rotateZ(40deg);}
.vp span:nth-of-type(11){-webkit-transform:rotateZ(50deg);-moz-transform:rotateZ(50deg);transform:rotateZ(50deg);}

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

html,body,hgroup,h1,h2,h3,p,ul,li{

margin:0;padding:0;

}

body {

text-align: center;

background:url(popcorn.jpg) 0 0 no-repeat;

background-size:cover;

}

hgroup{

width:20em;

margin:5em auto;

padding:1em;

background:rgba(255,255,255,0.8);

font-family:'Hiragino Mincho ProN',serif;

font-size:1.5em;

}

h1{line-height:1.2;font-size:2.6em;letter-spacing:-0.15em;

}

h1 span{display:block;font-size:1.55em;letter-spacing:-0.2em;}

h2{line-height:1.2;font-size:1.4em;}

/*ロゴマーク*/

.logo{

font-size:0.6em;

margin:1em auto;

width:4em;

height:5em;

position:relative;

overflow: hidden;

border-radius:0 0.5em 0 0;

}

.logo span {

position:absolute;

display:block;

text-align:center;

font-size:0.9em;

z-index:8;

background:#fff;

line-height: 1;

}

.logo .si {

color: green;

font-family: Arial;

font-size: 0.88em;

left: 0.1em;

top: 2.4em;

z-index: 9;

}

.logo .pr {

bottom: 0;

color: #32d;

font-family: Georgia;

font-size: 0.7em;

left: 0.1em;

z-index: 8;

}

.logo:before,

.logo:after,

.pr:before,

.pr:after {

content:"";

display:block;

position:absolute;

font-size:1em;

}

.logo:before{

font-size:0.8em;

display:block;

background:orange;

top:0;

left:0.2em;

width:4em;

height:1.2em;

z-index:2;

}

.logo:after {

font-size:0.8em;

display:block;

border:1.1em solid transparent;

border-color:red #fff #fff red;

border-radius: 90% 0 0;

box-shadow:0 0 0 0.3em #fff;

height: 4.2em;

width: 2.8em;

left: 1.2em;

top:-0.3em;

z-index:3;

}

.pr:before{

background:green;

height:4.2em;

right: 0.2em;

top: -4.2em;

width: 1.1em;

z-index: 3;

}

.pr:after {

background:green;

border-radius: 50%;

box-shadow: 0 0 0 0.3em #fff;

height: 1.3em;

right: 0;

top: -6em;

width: 1.3em;

z-index: 6;

}

ul{padding:1em;display:inline-block;font-size: 1.2em;}

li{display:inline-block;line-height:1.2;}

li:first-of-type {font-size:2em;padding:0.2em;}

li:nth-of-type(2) {font-size:0.7em;width:8em;position:relative;}

li:nth-of-type(2):before {

border-left: 2px solid #000;

content: "";

font-size: 2.3em;

width: 1em;

height: 1em;

left: -0.3em;

top: 0.2em;

position: absolute;

}

li:nth-of-type(2) strong {display: block;font-size:1.5em;}

p{display:inline-block;

width:4em;

height:4em;padding:1em;text-align:center;background:#fff;border-radius:50%;border:2px solid #000;position:relative;}

.hyaku {display:block;font-size:2em;line-height:1;font-weight: bold;position:relative;top:0.3em;left:-0.1em;}

.hyaku small {display:block;font-size:0.5em;}

.vp {

display: block;

font-size: 0.6em;

height: 50%;

left: 4.5em;

position: absolute;

top: 0;

width: 1em;

-webkit-transform-origin:center bottom;

-moz-transform-origin:center bottom;

transform-origin:center bottom;

}

.vp:nth-of-type(2){

-webkit-transform:rotateZ(120deg);

-moz-transform:rotateZ(120deg);

transform:rotateZ(120deg);

}

.vp:nth-of-type(3){

-webkit-transform:rotateZ(240deg);

-moz-transform:rotateZ(240deg);

transform:rotateZ(240deg);

}

.vp span{

position: absolute;

display:block;

width: 1em;

height: 100%;

left: 0;

top: 0;

-webkit-transform-origin:center bottom;

-moz-transform-origin:center bottom;

transform-origin:center bottom;

}

.vp span:nth-of-type(1){-webkit-transform:rotateZ(-50deg);-moz-transform:rotateZ(-50deg);transform:rotateZ(-50deg);}

.vp span:nth-of-type(2){-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);transform:rotateZ(-40deg);}

.vp span:nth-of-type(3){-webkit-transform:rotateZ(-30deg);-moz-transform:rotateZ(-30deg);transform:rotateZ(-30deg);}

.vp span:nth-of-type(4){-webkit-transform:rotateZ(-20deg);-moz-transform:rotateZ(-20deg);transform:rotateZ(-20deg);}

.vp span:nth-of-type(5){-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);transform:rotateZ(-10deg);}

.vp span:nth-of-type(6){-webkit-transform:rotateZ(0deg);-moz-transform:rotateZ(0deg);transform:rotateZ(0deg);}

.vp span:nth-of-type(7){-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);transform:rotateZ(10deg);}

.vp span:nth-of-type(8){-webkit-transform:rotateZ(20deg);-moz-transform:rotateZ(20deg);transform:rotateZ(20deg);}

.vp span:nth-of-type(9){-webkit-transform:rotateZ(30deg);-moz-transform:rotateZ(30deg);transform:rotateZ(30deg);}

.vp span:nth-of-type(10){-webkit-transform:rotateZ(40deg);-moz-transform:rotateZ(40deg);transform:rotateZ(40deg);}

.vp span:nth-of-type(11){-webkit-transform:rotateZ(50deg);-moz-transform:rotateZ(50deg);transform:rotateZ(50deg);}

実装は以下のリンクから開けます。
html5-popcorn-package
SEVEN&iのロゴマークや、VALUE PRICE 100 YENのマークは、本来なら画像にすべき所ですが、練習でcssだけで描いています。

WP固定ページに最新投稿一覧を表示する

コメントをどうぞ

front-page.php（固定ページの表示したい場所に記述）

<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(); ?>"><?php the_title(); ?></a></li>
<?php
endforeach;
echo '</ul>';
?>

<h2>最新BLOG</h2>　　　　　　　　　　　　

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

<?php

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

$posts = get_posts();

foreach($posts as $post):

setup_postdata($post);?>

<?php

endforeach;

echo '</ul>';

2013-3-8勉強会

1件のフィードバック

今日は、新メンバーのKIKOさんが参加されました。
お菓子が今回も更に充実!!　KIKOさんからもたくさんいただきました!
KIKOさんは元漫画家さんという事で、イラスト作品も拝見させていただきました。さすがプロ!!

議題は以下の通り

KIKOさんのマッサージ治療院のチラシデザインについて
キャラメルメープルポップコーンのパッケージでマークアップとCSSの筋トレ
サイトのTOPページをWwordPressにしたい
WwordPressのユーザー一覧ページを作る

です。続きを読む →

WordPressのユーザー一覧ページを作る

7件の返信

2013-3-8の勉強会で、ランサーしょうじさんへお伝えしようとした内容を、改めて整理して実装してみました。
まず、ユーザー一覧ページを作る条件は以下の通りでした。

登録されたユーザーのアバターやプロフィール情報を自動取得して表示したい
テーマはTwenty Twelveのクローン。テンプレートファイルの編集はアリとする。
ページ自体は固定ページで作成
他の固定ページには影響を与えないこと

続きを読む →

3/8勉強会　治療院チラシ

4件の返信

新メンバーのKIKOです。

今日の勉強会では、私が友人に頼まれたチラシについてアドバイスをいただきましたので、まとめを書きます。

・まずターゲット　誰に読んでほしいのか？を明確にすること。

・どんなシーンで使うのか？－ポスティングなのか、店の中に貼るのかなども考える。

・アイキャッチで注目をひく。まずは目にとまらせる。

ー基本面積の2/3使い、キャッチコピーがかぶってもいい。

－魅力的な顔のアップが強い。または文字だけで魅せる。

・ジャンプ率ー見出しは強力なメッセージになる。大きい方がアイキャッチ効果がある。読みやすい。本文は小さい文字でいい。

・箱組ー左右、上下のラインを揃える。これは意識しないと揃えられない。

・フォントの種類は多くても３種類。少ない方がいい。

・色の種類もあまり使わない。カラーポリシーがないのはだめ。

・ホワイトスペースを考える。はじまで文字を入れない。何かに注目させるために余白を作る。

・ドロップシャドウは使わない。

自分のチラシの悪かった点

・アイキャッチが弱い。

・ジャンプ率が低い。

・本文の文字はもっと小さくていい。→本文の文字も大きくしなくてはと思い（小さくするのが怖くて）　結果、すべてが同じ大きさになりアイキャッチがなくなってしまった。

・箱組ができていない。縦横のラインが揃ってなくてジグザグだった。

・ターゲットが曖昧だった。

・治療院の前の看板にさしておくチラシなので、治療院の名前は小さくてもいいとのこと。（院名を大きくすることばかり考えてました）

→チラシの目的、役割を整理すること！！

以上です。今日のアドバイスをふまえて、作り直してみます！！

タカハシ先生、今日のメンバーの皆さん、本当にありがとうございました！初参加の私に、皆さんフレンドリーに接してくれて、とても楽しかったです。正直、学校よりもためになる、内容の濃いすばらしい勉強会でした。また参加させてください！！

css3のanimationで作る永久ループのスライドショー

6件の返信

「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。続きを読む →

2013-3-1勉強会

コメントをどうぞ

18:00開始。今日はお菓子が充実していました。議題は以下の通り。

今時の名刺デザインについて
サイトのタグラインの考え方
サイトのTOPページをWwordPressにしたい

です。続きを読む →

kozackmanの名刺デザイン

1件のフィードバック

名刺を作ります！

冬期はゲレンデに生息するフリースキーヤーのkozackmanさん。久しぶりのパソコン倶楽部りんごの勉強会への参加で、名刺デザインの考察を発表してくれました。これに対して、りんごメンバーで意見を出し合いました。

#14kozackman

SNS時代に名刺？

今時、個人で名刺を作りたい、と思ったのには訳がある、ということで、どんなコンセプトで名刺作成をしようとしている、という発表をしてもらいました。

名刺の目的

ゲレンデで知り合った人に渡して、自分のサイトにアクセスしてもらう

利用シーン

スキー場に於いて使用する事を前提にしたデザイン。ゲレンデでは携帯を持ち歩かないので、せっかく意気投合しても、その場限りになってしまうのがもったいない。そこで物理的に情報を伝える「名刺」をツールとして使おうと考えた。

デザインポイント

facebookをはじめ、youtube,flickr,pintarestなど、各種のSNSを最大限に活用したいので、それらのアイコンと、IDが必須。
各種SNSのIDが統一されていれば、省スペースにもなる。
この名刺は自己ブランディングのツールと考えている。

今までの名刺との違い

一般的な名刺の内容をおさらいしておくとこんな感じ。

会社名
役職
名前
メールアドレス
電話番号

作ろうとしている名刺ではこうしようと考えている。

~~会社名~~ サイトロゴ（かっこいいヤツ）
サイトurl
役職（いらないので削除）
名前（ローマ字でカッコよく！） a.k.a（SNSのIDをニックネームとして書く手もアリ）
~~メールアドレス~~ SNSアイコンとID
~~電話番号~~（教えたくないので削除）

メンバーからの意見

#12ランサーしょうじ

材質はプラスチックなど、濡れても大丈夫な素材にしないと使えないのでは？

#3真中のぶ

サーファーも海に携帯は持って行かないから、その手の情報は暗記してました！
名刺がなくても、興味がある人には後日連絡するし、口頭で伝えて覚えてもらえない人からの連絡はあまりないかも・・・
僕の場合は「nobu69」で検索してね！でだいたい問題ありません。せっかく自分のサイトがあるならそれを活用しない手はない！
本当に興味のある人は、検索して連絡をくれます。なので確実に、そのキーワードなら検索上位になるというキーワードを把握しておく必要があります。
簡単なキーワードが有利です。

#2タカハシ先生

名刺はインパクトを残せるかどうかが大切。総額で数千円しか違わないのなら、カード素材やプリント業者による印刷も多いに使うべきだと思います。そもそもインクジェットは水に弱いので、想定される使用環境では使えないし。

#9かおりんご

ステッカーやシールにしたら良いかも

今後の予定

kozackmanさんは、フリースキーとシーケンスに関するサイトを作るそうです。楽しみですね。サイトや名刺が出来上がったら報告をしてください。

WordPress 固定ページ追加について

9件の返信

本日、タカハシ先生に教えて頂いて、
フロントページ（front-page.php）を作成し、TOPの固定ページにしました。

ナビゲーション部分には、今の所

topページ
SHOPページへ戻る
BLOG（front-page.phpを作成後、追加しました）

のボタンがあります。

BLOGのページですが、リンクは
http://サイト名.com/blog/なのですが、
色々試してみましたが過去の記事を、ページのメインに表示する事ができませんでした。

とりあえず、Twenty Eleven: 固定ページテンプレート (page.php)を
front-page.phpにペーストした状態です。

※フロントページは、現在
http://st-neverland.com/

この場合、BLOGページも固定ページ？を作成するのでしょうか？
club ringoの様に、topと違う表示にしたいのです。

質問が、分かりにくいですよね。。。すみません。

http://clubringo.com
は、ナビゲーションが　cat=1とか、page_id=※※※　とか？になってますね。。。

頭が混乱してます。。。後日、この投稿内容は、修正します。(=..=)zzz

★追記★
WordPress を専用ディレクトリに配置する – WordPress Codex 日本語版

既存のサブディレクトリをルートディレクトリとして表示する場合

手順９.次の修正を行ない、ファイルを保存する。
修正前：require(‘./wp-blog-header.php’);
修正後： WordPress コアファイルの新ディレクトリ名を使います。
require(‘./wp/wp-blog-header.php’);

この手順のindex.phpファイルを修正前のファイルで上書きしてしまいました。(;_;)
修正箇所を変更しましたが、表示ができなくなりました。

require(‘./wp/index.php’);
と変更しました。
これが間違いでしょうか？？(><) 表示が出来なくなり、index.htmlの表示に戻しましたが(><)

月	火	水	木	金	土	日
« 8月
			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

マークアップとcssの筋トレ とは？

手順

まず、題材を用意します。

文字要素を抜き出します。

お好きなエディタでマークアップする

cssで装飾する

こんな感じにしてみました

名刺を作ります！

SNS時代に名刺？

今までの名刺との違い

メンバーからの意見

今後の予定

既存のサブディレクトリをルートディレクトリとして表示する場合

マークアップとcssの筋トレとは？