タグ別アーカイブ: WordPress

2013-4-19勉強会

1件のフィードバック

今回もお菓子をありがとうございます。（ランサーしょうじさん、かおりんごさん提供）
勉強会の概要は

“勉強会の議事録をトップページに表示させるには”について
カスタム投稿タイプの補足
投稿にアイキャッチを入れよう

でした。続きを読む →

勉強会の議事録をトップページに表示させるには

5件の返信

一番新しい議事録投稿記事のタイトル＆本文の最初の３０文字位をトップページに、表示させたい。
とりあえず、固定ページのトップページには、その表示させたい場所を作りました。

議事録を投稿したら自動でそこに表示させるにはどうしたらよいでしょうか？

phpを書く。プラグイン。ウィジェット。

2013-04-19の勉強会での勉強の題材として取り上げて下さい。

よろしくお願い致します。

上記の内容を2013-04-19の勉強会でやりました。以下議事録です。

①外観ーテーマ編集ーFront Page Template 固定ページテンプレート(page-templates/front-page.php)を開きます。そこに投稿カテゴリーの最新記事を呼び出して出力するphpを書きます。

コードは以下の通りです。

<aside id="topBanner">
			<section id="lastReport">
				<h1>最新の勉強会議事録</h1>
				<?php
				/* 最新の議事録を取得する */
				$args = array (
					"numberposts" => 1,
					"category" => 4,
				);
				$gPost = get_posts($args);
				foreach ($gPost as $post):
					setup_postdata($post);?>
					<a href="<?php the_permalink() ?>">
					<h1><?php the_title(); ?></h1>
					<?php //the_excerpt(); ?>
					<?php echo mb_substr(get_the_excerpt(), 0, 50); ?>
					</a>
				<?php endforeach;?>
			</section>
			<section id="lastQ">
				<h1>最新の質問と回答</h1>
				<?php
				/* 最新の最新の質問と回答を取得する */
				$args = array (
					"numberposts" => 1,
					"category" => 10,
				);
				$gPost = get_posts($args);
				foreach ($gPost as $post):
					setup_postdata($post);?>
					<a href="<?php the_permalink() ?>">
					<h1><?php the_title(); ?></h1>
					<?php the_excerpt(); ?>
					</a>
				<?php endforeach;?>
			</section>
			<section id="lastComment">
				<h1>最新のコメント</h1>
				<?php
				/* 最新のコメントを取得する */
				$args = array (
					"number" => 1,
					'status' => 'approve',
					"type" => 'comment',
				);
				$gComments = get_comments($args);
				foreach ($gComments as $com):
					//setup_postdata($post);
$userD = get_userdata($com->user_id);
?>
					<a href="<?php the_permalink($com->ID) ?>">
					<h1><?php echo get_the_title($com->ID); ?></h1>に
					<?php echo $userD->display_name; ?>さんがコメントしました。
					</a>
				<?php endforeach;?>
			</section>
		</aside>

<h1>最新の勉強会議事録</h1>

<?php

/* 最新の議事録を取得する */

$args = array (

"numberposts" => 1,

"category" => 4,

);

$gPost = get_posts($args);

foreach ($gPost as $post):

setup_postdata($post);?>

<?php //the_excerpt(); ?>

<?php echo mb_substr(get_the_excerpt(), 0, 50); ?>

</a>

<?php endforeach;?>

</section>

<h1>最新の質問と回答</h1>

<?php

/* 最新の最新の質問と回答を取得する */

$args = array (

"numberposts" => 1,

"category" => 10,

);

$gPost = get_posts($args);

foreach ($gPost as $post):

setup_postdata($post);?>

<?php the_excerpt(); ?>

</a>

<?php endforeach;?>

</section>

<h1>最新のコメント</h1>

<?php

/* 最新のコメントを取得する */

$args = array (

"number" => 1,

'status' => 'approve',

"type" => 'comment',

);

$gComments = get_comments($args);

foreach ($gComments as $com):

//setup_postdata($post);

$userD = get_userdata($com->user_id);

<h1><?php echo get_the_title($com->ID); ?></h1>に

<?php echo $userD->display_name; ?>さんがコメントしました。

</a>

<?php endforeach;?>

</section>

</aside>

今回は、「最新の勉強会議事録」「最新の質問と回答」「最新のコメント」の３つの最新情報をトップページに表示することにしたので、asideの中にsectionを３つ作りました。

メモ

"numberposts" => 1,
"category" => 4,

1 2	"numberposts" => 1, "category" => 4,

numberposts 1は最新の投稿を１つという意味です。
category 4はカテゴリーのID番号です。

カテゴリーIDの調べ方は、投稿ーカテゴリーのページでカテゴリー名にカーソルを持っていくと、画面下に表示されますので記憶して下さい。記憶力に自信がない人はメモをとって下さい。鉛筆でも万年筆でもクレヨンでも結構です。

上記のphpを書く場所ですが、今回はトップページの画像スライドショウのすぐ下に表示させる事になったので、page-templates/front-page.php内の

<div id="primary" class="site-content">

1	<div id="primary" class="site-content">

の下に書きました。

書く場所は、表示させたい場所によって異なります。ご注意ください。

②出力が出来ましたので、今度は適当に見た目を整えていきます。asideやsectionにidで名前を付けたので、そのidをcssでカスタマイズします。今回は、style.cssの一番下に書きました。

以上です。（真中のぶ）

先ほど、iphoneで見たら変な風になってたので、media queryで直しておかなきゃ！誰かやりたい人がいれば、やってくれてもいいですよ。

質問
firebugで見ると、sectionの中にh1が２つある事になっていますが、これは大丈夫なのでしょうか？？
（こちらは、解決済です。先生のコメント参照）

—————————————————–
追加情報　2013-04-27 真中のぶ

投稿のアイキャッチ画像のサムネイル表示を以下のスクリプトで実装出来るようです。

<?php
if ( has_post_thumbnail() ) {// check if the post has a Post Thumbnail assigned to it.
 the_post_thumbnail('thumbnail');
}
?>

<?php

if ( has_post_thumbnail() ) {// check if the post has a Post Thumbnail assigned to it.

the_post_thumbnail('thumbnail');

}

wp 2012 google web fontsを指定したらテキストが二重に表示されるは何故か？

3件の返信

制作中のサイト
http://kuulei90.com/
ページタイトル

<hgroup>
<h1 class="site-title">
<a rel="home" title="kuulei" href="http://kuulei90.com/">kuulei</a>
</h1>
<h2 class="site-description">official web site</h2>
</hgroup>

<a rel="home" title="kuulei" href="http://kuulei90.com/">kuulei</a>

</h1>

<h2 class="site-description">official web site</h2>

</hgroup>

h1 とh2にgoogle web fontsを使用しています。
デスクトップ（firefox）で見ると問題ないのですが、
iphoneで見ると文字が二重に表示されてます。
試しにデスクトップ（safari）で見たら
文字は二重にはなってないけど、太くなってしまっています。

フォントは、クローンのstyle.cssで指定してます。

何故でしょうか？

2013-4-12勉強会

コメントをどうぞ

今日もお菓子をありがとう! 2013-04-12お菓子

勉強会の概要は、

『WP 2012 トップページに投稿ページの一部を表示させたい』について

WP カスタム投稿タイプとカスタムフィールドについて

モバイルファースト実践

です。続きを読む →

WP プラグイン all-in-one-event-calendar （イベント管理）を設置してみようぜ！の巻

1件のフィードバック

Q.WP プラグイン all-in-one-event-calendar （イベント管理）ってどんなもの？
A.カスタム投稿タイプを利用したwordpressのpluginです。(plug me inではありません)
「パソコン倶楽部りんご」サイトのトップページにある「勉強会の予定」とメニューの「calender」というページの表（カレンダー）がそうです。（２つは同期してるので便利）イベントやスケジュールを管理するのに便利そうです。

ではやってみます。ちなみに僕も初挑戦。

①まずは、all-in-one-event-calendarというプラグインをインストールして有効化する。有効化すると自動的にダッシュボードのメニュー（画面左に縦に並んでいる）にEventsという項目が追加されます。

②メニューのeventsのsettingsで色々と設定します。最初に大事なのは、どのページにカレンダーを表示させたいか
です。カレンダー専用のページが必要なら、その表示させたいページをあらかじめ固定ページで作っておく必要があります。settingsで「どのページにカレンダーを表示するの～？」という項目があるので、あらかじめ作って置いた固定ページを選択。

これで、ページにカレンダーが表示されました。そしたら適当にAdd Newで予定をいくつかアップしてみましょう。英語だけど良く読めば難しくないです。

③次は、トップページに予定の一部分を表示させます。これは、外観ーウィジェットで設定します。upcoming eventsというのが画面左にありますよね。それを画面右にドラッグする。トップページならフロントページウィジェットエリアだと思います。（人によって設定が違うと思うので「思います」としました。）ドラッグしたのをクリックすると、ちょっとした設定が可能です。何件表示させるとか。

大まかには、こんな感じです。色などはCSSとかで変えられると思います。（まだやってないけど）。
設定も色々あるので、これからやってみます。

こんな感じhttp://kuulei90.com/

これは、2013-04-12の勉強会で学びました。
——————————————–
先生。
これで大丈夫ですよね？

WP 画像ギャラリープラグインとして優秀なNextGen Gallery

コメントをどうぞ

制作中のサイトhttp://kuulei90.com/
クライアントさんが、ライブの写真をを自分たちで更新したいと希望が出たので、
投稿ページのカテゴリーに「Photo」を追加しました。

投稿記事にたくさんの写真を直接掲載すると、カッコ悪いし、記事が長くなって
見づらいので、サムネイル表示にして、lightbox的な感じにしたいと思いました。

NextGen Galleryというプラグインでやる事にしました。
みなさん使っているようで評価も良いです。
これなら、htmlやcss,jQuery等の専門知識が無いクライアントさんにも都合がいいですね！

説明が英語なので、日本語にしてくれるファイルもあるので、ダウンロードして
FTPでアップロードしました。

参考になったサイト
http://kinome.biz/2013/01/nextgen-gallery.html

記事に載せるには、以下のサイトで説明してあります。
http://kinome.biz/2013/01/nextgen-gallery.html

親切に説明してくれる方々が世の中にはたくさんいて、便利になりましたね。ホントに助かります。
みなさん、ありがとうございます。

WP 2012 トップページに投稿ページの一部を表示させたい

3件の返信

現在制作中のサイトhttp://kuulei90.com/

クライアントさんの希望で、トップページに「次のライブ情報（日にちが近い１回分）」と「pick up（お勧めの１コ）」を載せたいという事です。

「次のライブ情報」は、投稿ページsheduleからと、「pick up」は、投稿ページnewsの一部を抜粋して表示といった感じです。クライアントさんがTopページ（固定ページ）を
いじらなくてもいいようにカスタムしようと思います。りんごのメンバー紹介とか近いのかなあ？

ザ未経験です。

雰囲気的にはPHPを書くんだろうなあーと感じています。
もしかしてプラグインであったらラッキーとも思っています。
視界が、ぼや～っとしています。

アドバイスやヒントを下さいませ。

よろしくお願いいたします！

WP TwentyTwelve ヘッダー画像をトップページにだけ表示させたい。

4件の返信

twenty twelveをカスタマイズ中です。
http://kuulei90.com/

ページによってヘッダー画像を変えたいと思っています。（ランダムではなく）

手順としては、
まず、外観ーヘッダーで設定するヘッダー画像をヘッダーだけに表示させようと思います。
ググッたらこちらのサイトがドンピシャだったのですが、記事の説明にある

<div id="header-img">ヘッダー画像</div>

1	<div id="header-img">ヘッダー画像</div>

が僕のheader.phpに見当たりません。どういうことでしょうか？
参考にしたサイト
http://presentnote.com/header_image-displayed-only-top_page/

教えて下さい。よろしくお願いします。

それができたら、固定ページの各編集画面に直接画像を設置しようと思います。
まだ、外観ーヘッダーで設定するヘッダー画像が残っている状態ですが、こんな感じ。
http://kuulei90.com/?page_id=20

/////////////////////////////////////////////////////////////////////////////////////////////
先生。早速の回答ありがとうございます。
理解しました。header.phpを以下の様に追加しました。

<?php if(is_front_page() ): ?><!--2013-04-09追加、これで囲むとヘッダー画像がTOPにだけ表示されます。-->
		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
<?php endif; ?><!--2013-04-09追加のとじタグです。-->

<?php if(is_front_page() ): ?>

<?php $header_image = get_header_image();

if ( ! empty( $header_image ) ) : ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

<?php endif; ?>

<?php endif; ?>

これで、解決しました。
次は各固定ページに、それぞれのページの内容に合った画像を挿入していきます。

この、先生のコメントに対するコメントは、普通に返信でやると、「crayon」が使えないので、ここに追加で書きましたが、
コメントを返信でやった方が、第三者が分りやすいと思うのですが、良い方法はありますか？

WP Twenty Twelve 簡単にファビコンを設置出来るプラグイン”All in one Favicon”

1件のフィードバック

All in one Faviconというプラグインを入れました。
有効化した後は、簡単に設置出来ました。
↓

参考にしました。
http://affiliate-musuko.com/wp/wordpress/wordpressplugin/all-in-one-favicon.html

WP TwentyTwelve フッターの”Proudly powered by WordPress”を「Copyrightほにゃらら」に変更する

コメントをどうぞ

内容は記事のタイトルそのまんまです。
footer.phpを編集します。

<footer id="colophon" role="contentinfo">
		<div class="site-info">
			<?php do_action( 'twentytwelve_credits' ); ?>
			<!--コメントアウト<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>">
<?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>-->
<!--下の一文は、新たに足した2013-04-08-->
 <?php printf( __( 'Copyright &copy; %s All Rights Reserved. ', 'twentytwelve' ), 'Kuulei90.com' ); ?>
		</div><!-- .site-info -->
	</footer>

<?php do_action( 'twentytwelve_credits' ); ?>

<!--コメントアウト<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>">

<?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>-->

</div>

</footer>

4,5行目をコメントアウト。
7行目を追加。追加したら表示させたいテキストを入れる。テキストを入れる場所は、kuulei90.comと書いてある所。

That’s All….so easy

WP twenty twelve 固定ページのコメントを残すを削除

コメントをどうぞ

バンドのサイト等で、
ブログ等の投稿記事に「コメントをする」というのがあっていいと思うけど、ディスコグラフィーやメンバー紹介のページを固定ページで作った場合、「コメントする」というのは、いらない。いかにもブログサイトです！みたいでカッコ悪いし。でもそれってデフォルトで表示されちゃうんですよね。

非表示にする方法
管理画面の「固定ページ」から「固定ページ一覧」で非表示にしたいページの編集画面に入って、右の上の方にある「表示オプション」をクリック！
「画面に表示」にある「ディスカッション」をチェックする。
すると、ページの下に「ディスカッション」の設定欄が現れるので、「コメントの投稿を許可する。」のチェックを外します。

たったこれだけで固定ページのコメントを非表示にすることが出来ます。

今回、僕はこれでやりました。
その他にもPHPの一行をコメントアウトするだけで、全部の「コメントする」を非表示に出来るみたいです。
参考にさせて頂いたサイト
http://webshufu.com/remove-comment-form/
http://researchnote.net/2012/05/wordpress9.html

WordPress投稿設定、投稿記事を各固定ページに振り分けたい

2件の返信

バンドのサイト制作中。WPのtwenty twelveをカスタマイズ中。
http://kuulei90.com/
固定ページをいくつか作り、グローバルナビの設定もしました。試しにライブ記事を投稿するのですが、LIVEというカテゴリにチェックを入れてもそこには行かず、デフォルトの場所（BLOG）に行ってしまいます。

任意の名前で、カテゴリーって作れますよね。LIVEというカテゴリーを作った事と、メニューのLIVEは別物なんですかね？カテゴリーで作ったLIVEは、メニューのLIVEですよ！と関連づける何か設定が必要なんでしょうか？

教えて下さい。

wp テーマインストール　子テーマについて

6件の返信

大変な事をしてしまいました。
今まで、twenty eleven でサイトをカスタマイズしてましたが、
試しに、Twenty Twelveでやったらどうなるかftpで見てました。
Twenty Twelveの小テーマを作って・・・。
そしたら、元々のttchild（小テーマ）を削除してしまいました。（ー..ー;）
サイトも表示できなくなりました。
テーマを見ると何も入ってませんでした。
新しいテーマを追加しても

パッケージを展開しています…
→→→→テーマをインストールしています…
ディレクトリを作成できませんでした。
/home/users/2/pupu.jp-micco/web/st-neverland/blog/wp-content/themes/twentyeleven/

テーマのインストールに失敗しました。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
と表示されてしまいます。
テーマのインストールも出来なくなりました。
どうしましょう（>_<）こうなってしまったら、Twenty Twelveでやりたいと思っています。。。。テーマ編集を見ても、選択したテーマはありません。としか表示されません。ダッシュボードの現在の状況の部分に、エラー: テーマディレクトリが空か、存在しません。インストールを確認してください。と表示されています。 wpを新しくインストールしなおすんですか？？？

wordpressインストールの場所とテーマのクローンcssについて

3件の返信

新しいお仕事が入りまして、
低予算で、スマホ対応で、自分たちでニュースやブログを更新したいとの事ですので、
ワードプレスで制作する事にしました。
デザインはシンプルでよいとの事なので、twenty twelveをカスタマイズしようと
思います。テーマを使わず100%オリジナル（フルスクラッチというんでしたっけ？）だと予算オーバーだし。

質問①
サーバーと独自ドメインを取得しました。今まで、自分のサーバーにWPをインストールする時は、
nobu-69.comというサイトとは別のサイト制作だったので、nobu-69.comのルートに別サイトのフォルダを作り
そこにWPをインストールしてましたが、今回の様な場合は、これからインストールするWPがメインサイトに
なるので、サーバーのルート（一番上の階層）にインストールすればいいんですよね？フォルダとか作らずに。

質問②
twenty twelveをカスタマイズする際に、clubringoの場合はttcloneというクローンcssをいじってますよね。
クローンってどうやって作るのですか？

wpで初仕事。ちょっとドキドキ。

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

10件の返信

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

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