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

②先週のcssアニメを自分なりにアレンジしてやってみました。それについての質問です。
　こちらを見て下さい。
　http://nobu-69.com/study/css_packman/css-packman.html
パックマンがパクパクやっているのは上手く出来ました。
「パックマンをパクパクさせながら画面の右から左に移動させる」
という所で、つまずいています。

勉強会用にzipファイルも用意しました。
http://nobu-69.com/study/css_packman/css-packman.html

以上

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

②について勉強会でやりました。ありがとうございました！

.pack {
width:300px;/*幅の指定は大事です*/
animation:pack infinite linear 10s;/*10sは10秒で下記のキーフレームアニメーションを行うという意味*/
}
@keyframes pack {
0% {transform:translate(130em,0);}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {transform:translate(-30em,0);}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}

.pack {

width:300px;/*幅の指定は大事です*/

animation:pack infinite linear 10s;/*10sは10秒で下記のキーフレームアニメーションを行うという意味*/

}

@keyframes pack {

0% {transform:translate(130em,0);}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/

100% {transform:translate(-30em,0);}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/

}

こんな感じで実装できました。

2013-5-10勉強会

コメントをどうぞ

今日はランサーしょうじさんがお休みです。でもお菓子は確保。
勉強会の概要は

cssアニメーションでパラパラアニメを作る方法
画像スライドアニメーション
Facebookとwordpressを連携させたいのですが…
レスポンシブWebデザインの覚え書き

です。続きを読む →

画像スライド　アニメーション

1件のフィードバック

下記のサイトのトップページ中央の画像スライド？アニメーション？
http://www.chanterelle.jp/index.html

これは、どのように実装しているのか教えて下さい。
jQueryかな。css3でも出来そうな気もします。（分らないけど）

出来たら本日の勉強会のお題としてお願いします。

—————————————————————-
2013-05-10 fri 勉強会でやってみました。jQueryではなく、css3で実装しました。
いい感じにできましたよ。タカハシ先生ありがとうございます！

僕のサーバーに作ったものをアップしたので見て下さい。
http://nobu-69.com/study/20130510_anime/green.html

html,cssは以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。

<!doctype html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>css3でアニメ</title>
	<style>
		.anime {
			background: url("home.png") repeat-x scroll 0 0 #FFFFFF;
			width:100%;
			height:86px;
			
			animation:scr1 infinite 30s linear;
			position:absolute;
			z-index:10;
			opacity:0.9;
		}
		.anime2 {
			background: url("cloud.png") repeat-x scroll 0 0;
			width:100%;
			height:25px;
			
			animation:scr2 infinite 40s linear;
			position:absolute;
			z-index:20;
			opacity:0.9;
		}
		
		@keyframes scr1 {
			0% {background-position:0 0;}
			100% {background-position:1000px 0;}
		}
		@keyframes scr2 {
			0% {background-position:0 0;}
			100% {background-position:-703px 0;}
		}
		h1{font-size:15px;color:#666;}
	</style>
	</head>
    <body>
    <h1>css3でアニメーション</h1>
    <div class="anime"></div>
    <div class="anime2"></div>
   </body>
</html>

<!doctype html>

<html>

<head>

<style>

.anime {

background: url("home.png") repeat-x scroll 0 0 #FFFFFF;

width:100%;

height:86px;

animation:scr1 infinite 30s linear;

position:absolute;

z-index:10;

opacity:0.9;

}

.anime2 {

background: url("cloud.png") repeat-x scroll 0 0;

width:100%;

height:25px;

animation:scr2 infinite 40s linear;

position:absolute;

z-index:20;

opacity:0.9;

}

@keyframes scr1 {

0% {background-position:0 0;}

100% {background-position:1000px 0;}

}

@keyframes scr2 {

0% {background-position:0 0;}

100% {background-position:-703px 0;}

}

h1{font-size:15px;color:#666;}

</style>

</head>

<body>

<h1>css3でアニメーション</h1>

</body>

</html>

①家pngファイル　1000×86

②雲pngファイル　703×25

キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。

@keyframes scr1 {
			0% {background-position:0 0;}
			100% {background-position:1000px 0;}
		}
		@keyframes scr2 {
			0% {background-position:0 0;}
			100% {background-position:-703px 0;}
		}

@keyframes scr1 {

0% {background-position:0 0;}

100% {background-position:1000px 0;}

}

@keyframes scr2 {

0% {background-position:0 0;}

100% {background-position:-703px 0;}

}

画像が重なっているのは、
position:absolute;
z-index
が効いているからです。

もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。

レッツ　チャレンジ！

※ie9.ie8.ie6では動きません。

WP画像プラグイン nextGen gallery サムネイルがIEだと、ちゃんと表示されない事についての対処法

コメントをどうぞ

この記事のアイキャッチ画像を見て下さい。多分この文章の上に表示されてるかな。
上段のサムネイルがieによるものです。横幅が狭く、写真がつぶれちゃってますね。FireFoxで見ると下段の様にきれいに表示してくれます。

どうしてieはこんなにも意地悪なんでしょうか？

などと、愚痴を言っていてもサムネイルはつぶれたままなので、以下の記述をテーマのスタイルシート（style.css）に書くと直ります。

.entry-content .ngg-gallery-thumbnail img { height:auto; margin: 0 0 18px 0; max-width:none; }

1	.entry-content .ngg-gallery-thumbnail img { height:auto; margin: 0 0 18px 0; max-width:none; }

参考サイト
http://wordpress.org/support/topic/plugin-nextgen-gallery-ie-8-issue-with-image-lists

ワードプレスにソーシャルボタンプラグインSharebar（シェアバー）を設定する

2件の返信

本日は最近良く見かける、ページをスクロールしてもソーシャルボタンがそれに合わせてついて来てくれる、share barというプラグインを実装してみようと思います。
固定型と比べますと、ソーシャルメディアからのアクセス流入数が１０％改善された、という報告もあるそうですよ。

1.Sharebarをインストールする

2.Sharebarに「はてなブックマーク」ボタンを追加する

3.Sharebarのカスタマイズ

4.Sharebarとワードプレス関数 get_the_excerpt の干渉？によるバグの消し方　補足

1.Sharebarをインストールする

ダッシュボードからプラグイン＞新規追加で検索フォームにSharebarと入れて検索します。
最初の方に出てきますので、インストールし有効化します。
続きを読む →

記事の閲覧数を表示させるワードプレスプラグインPostViews

1件のフィードバック

このサイトのサイドバーに設置している人気記事ランキングは、WP-PostViewsというプラグインで表示しています。
このプラグインを設置する事でサイト内でどんな記事が人気があるのか、傾向を把握することが出来ます。

それでは早速、WP-PostViewsを設置してみましょう。

1.WP-PostViewsをインストールする

ダッシュボードからプラグイン＞新規追加で検索フォームにWP-PostViewsと入れて検索します。
一番上に出てくると思いますので、インストールし有効化します。
以上！
ダッシュボードの投稿＞投稿一覧へ行ってみると、右端に○○viewsと表示されていますよ♪

2.サイドバーに人気記事ランキングを表示させる

それではサイドバーに人気記事ランキングを表示させてみましょう。

ダッシュボードへ戻り、外観＞ウィジェットからViewsを選択し、サイドバーの表示させたい場所にドラッグします。
続きを読む →

Twenty Twelve のデザインをIE8に適応させる

4件の返信

clubringo.comをie8で見た所、いろんな所が正しく表示されていませんでした。

これをなるべく正しく表示させるには、どうするのが最適でしょうか？
ちょっとした角丸くらいは、別にいいけど、大きなレイアウトの崩れは直したいと思います。
（完全にじゃなくてある程度は）
だからポリフィルじなくて、プログレッシブ・エンハンスメントかな？

普段html5でサイトを作成する場合、以下の記述をhtmlのheadの中に入れています。

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

clubringo.comもその方法で良いかな？だとしたら、この記述をどこにいれたらいいでしょうか？

また、以前サイトを制作した下際に下記の記述をheadにしてie8専用のcssファイルを作り
そこに色々書きました。こういうファイルも作った方がよいかな？

<!--[if IE 8]>
<link href="css/ie8.css" rel="stylesheet" type="text/css">
<![endif]-->

<!--[if IE 8]>

<![endif]-->

よろしくお願いします。

ページを読み込んだ時に一度だけ動かすCSSのanimation

コメントをどうぞ

まずはDEMOを見て下さい。
DEMO
htmlとcssの中身は以下の通り。

<body>
	<div id="top" class="appear">
		<header>
			<h1>CSS animation <span class="appear d1">only once</span> <span class="appear d2">at</span> <span class="appear d3">page beginning.</span></h1>
		</header>
		<div class="appear d4">
			<p>Animation for attention the content. <span class="appear d6">Elegantly,</span> <span class="appear d8">Modestly,</span> <span class="appear d10">Delay a timing on purpose.</span></p>
			<pre class="appear d12"><!--省略--></pre>
		</div>
	</div>
	<footer><!--省略--></footer>
</body>

<body>

<h1>CSS animation <span class="appear d1">only once</span> <span class="appear d2">at</span> <span class="appear d3">page beginning.</span></h1>

</header>

<p>Animation for attention the content. <span class="appear d6">Elegantly,</span> <span class="appear d8">Modestly,</span> <span class="appear d10">Delay a timing on purpose.</span></p>

</div>

</body>

/* css animation (prefixes are cut) */
.appear {
	transform-origin:center top;
	animation:show 1s both;
}
span.appear {display:inline-block;}
.d1 {animation-delay:1s;}
.d2 {animation-delay:2s;}
.d3 {animation-delay:3s;}
.d4 {animation-delay:4s;}
.d6 {animation-delay:6s;}
.d8 {animation-delay:8s;}
.d10 {animation-delay:10s;}
.d12 {animation-delay:12s;}
@keyframes show {
	0% {
		transform:translate(0,2em);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	50% {
		text-shadow:0 0 0.5em #0f0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}

/* css animation (prefixes are cut) */

.appear {

transform-origin:center top;

animation:show 1s both;

}

span.appear {display:inline-block;}

.d1 {animation-delay:1s;}

.d2 {animation-delay:2s;}

.d3 {animation-delay:3s;}

.d4 {animation-delay:4s;}

.d6 {animation-delay:6s;}

.d8 {animation-delay:8s;}

.d10 {animation-delay:10s;}

.d12 {animation-delay:12s;}

@keyframes show {

0% {

transform:translate(0,2em);

opacity:0;

text-shadow:0 0 0 #0f0;

}

50% {

text-shadow:0 0 0.5em #0f0;

}

100% {

transform:translate(0,0);

opacity:1;

text-shadow:none;

}

ページを読み込んだ時に要素をanimationさせる

これは単純に、目的の要素にanimationを指定するだけで良い。
.appear {animation:show 1s both;} の部分がそれ。ショートハンドで書いているのをサブプロパティに書き下すと、以下のようになる。

animation-name（@keyframesの名前）: show
animation-duration（アニメにかける時間）: 1s
animation-fill-mode（アニメの実行前後に、keyframesの0%と100%に指定したスタイルを適用するか。）: both

animation-fill-modeでアニメの開始前と終了後をコントロール

まずは animation-fill-mode がミソ。以下の4つの値を指定できる。defaultはnone。

none: keyframes内の指定は、アニメ中にだけ効果が及ぶ。
forwards: アニメが終了した後も、100%に指定した状態をキープする。
backwards: animation-delayの間（アニメする前）に、0%に指定した状態で待機させる。
both: forwardsとbackwardsの両方の効果

詳しくはanimation-fill-mode – CSS | MDNを参照して下さい。

animation-animation-iteration-countは初期値が1

次のミソがanimation-iteration-count。アニメの繰り返し回数の指定で、無限ループなら infinite で指定できる。初期値が1なので、ショートハンドで数字を書かずに省略すると、1回だけのアニメーションになる。

詳しくはanimation-iteration-count – CSS | MDNを参照の事。

animation-delayは、別のクラスを重ねがけすると便利

パラパラと、時間差で要素を表示しているのは、.d1 とか .d12 などのクラスに指定した animation-delay 。汎用的に使い回すなら、こうしてクラス分けした方がスッキリと指定できるかもしれない。

2013-4-26勉強会

2件の返信

今日もお菓子、あります。感謝。
勉強会の概要は

gunosyに登録しよう。
CSS3 border transition effects
Sharebarとget_excerptの干渉を回避する
frontページで投稿アイキャッチ画像を使う

続きを読む →

Facebookとwordpressを連携させたいのですが…

5件の返信

パソコン倶楽部りんごのFacebookページで、アプリを追加したことのあるメンバーの方に質問です。

Facebookとwordpressを連携させるため、wordpress側にFacebookの公式プラグイン「Facebook for WordPress」を入れてみました。
ダッシュボードへ行くと、左サイドにFacebookのタブが出来ております。

ところで、ここでの設定をするにはまずFacebook側で「新しいアプリケーションを作成」しなければならない様なのですが、りんごのページにそれらしきボタンが見つかりません(-“-;

Facebook Developer（開発者）のページの右上にある「Apps」から追加出来るとの情報もありましたが、この「Apps」をクリックすると、りんごのページに戻ってしまいます。

ちなみに、Facebookのヘルプには、

Q. Facebookページにアプリを追加するにはどうすればよいですか？

A. Facebookページにアプリを追加するには、まず追加するアプリの情報ページに移動します。アプリをページに追加できる場合は、左下に「マイページへ追加」リンクが表示されます。

とありますが、このプラグインのページへ行ってみても「マイページへ追加」リンクなどはどこにも見当たりません。
（追加出来ない筈は無いと思うのですが。）

ご存知の方、ご回答宜しくお願いします。

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');

}

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