front-page.phpを編集し「パソコン倶楽部りんご」TOPページのaside部分を最新の投稿5件に変更して、カテゴリー、タグ、投稿者を表示するようにし、コメントも最新の5件を表示させました。これに伴い、Front-page用のウィジェットエリアに入れていた、投稿とコメントのウィジェットは削除しました。
また、「おすすめ」というタグを作成しておいたので、りんごユーザーの人は、自分がお勧めしたい投稿に「おすすめ」タグをつけて下さい。数が揃ったら、上記のaside内などに表示してみます。
作成者別アーカイブ: タカハシ先生
2013-5-10勉強会
今日はランサーしょうじさんがお休みです。でもお菓子は確保。
勉強会の概要は
- cssアニメーションでパラパラアニメを作る方法
- 画像スライドアニメーション
- Facebookとwordpressを連携させたいのですが…
- レスポンシブWebデザインの覚え書き
です。 続きを読む
cssアニメーションでパラパラアニメを作る方法
animationプロパティのanimation-timing-functionの値にsteps()を使うと、簡単にパラパラアニメが作れます。こんな感じです。
作成の手順は以下の通り。
- cssスプライト画像を作る要領で、アニメの一連の動作を分解した絵を描いて一枚の画像に書き出す。横300px縦100pxでこんな絵を描いてみました。横50px縦100pxの5枚のスプライトをを繋げた状態です。
- クラスparapara要素を作り、この絵を背景にして、横50px縦100px、overflowをhiddenにします。animationを含めてcssの設定はこうなります。(ベンダープレフィックスは省略しています。)
1234567891011.parapara {width:50px;height:100px;margin:1em auto;overflow:hidden;background:url(http://clubringo.com/wp-content/uploads/2013/05/para.png);animation:para 0.5s steps(5,end) infinite;}@keyframes para {100% {background-position:-250px;}}
簡単ですね?animation-timing-functionの解説はこちらなど。
実装はここの例を参考にしましたよ>codepen.io
アイキャッチがある単独ページではヘッダー画像を表示しない
WordPressで複数ヘッダー画像をcssスライドショーで動かすで設定したヘッダー画像ですが、投稿にアイキャッチを入れることにした為、アイキャッチがある場合は邪魔になってきました。
そこでheader.phpを編集し、アイキャッチがある単独ページの場合はヘッダー画像を表示しないようにしてみました。
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<header id="masthead" class="site-header" role="banner"> <hgroup> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <nav id="site-navigation" class="main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </nav><!-- #site-navigation --> <?php /***************************************************************************************** front_pageだけ、ヘッダー画像を取得してcssで回す by タカハシ 2013-3-24 *****************************************************************************************/ ?> <?php if( is_front_page() ): /* front_pageならば */ $images = get_uploaded_header_images(); if($images): ?> <div class="top_slides"> <img src="http://clubringo.com/wp-content/uploads/2013/03/top-img-back.gif" alt=""> <?php foreach($images as $image):?> <img src="<?php echo $image['url']?>" alt=""> <?php endforeach;?> </div> <?php endif; /* front_pageここまで */ ?> <?php /***************************************************************************************** 単独のページでアイキャッチがあれば、ヘッダー画像は出さない by タカハシ 2013-4-30 *****************************************************************************************/ ?> <?php elseif( is_singular() && has_post_thumbnail( $post->ID ) ) :?> <?php /***************************************************************************************** ここまで *****************************************************************************************/ ?> <?php else : /* front_pageでなければ、Twenty Twelveの設定通り(固定かランダム) */ ?> <?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 else: ?> <!-- no header_image --> <?php endif; ?> <?php endif; ?> <?php /***************************************************************************************** ここまで by タカハシ 2013-3-24 *****************************************************************************************/ ?> </header><!-- #masthead --> |
ページを読み込んだ時に一度だけ動かすCSSのanimation
まずはDEMOを見て下さい。
DEMO
htmlとcssの中身は以下の通り。
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
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 |
/* 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 。汎用的に使い回すなら、こうしてクラス分けした方がスッキリと指定できるかもしれない。
css animation-delay の使いどころ
cssのanimationでクロスフェイドをさせる際には、各要素で同じ@keyframesを使いつつ、nth-of-type(n)セレクタで、animation-delayをずらしてあげると、効率がいいです。 続きを読む
WordPressで複数ヘッダー画像をcssスライドショーで動かす
2013-3-22勉強会で、収まらなかった内容をパソコン倶楽部りんご:TOPページに実装しました。
WordPressのヘッダー画像に複数の画像をアップしておいて、fornt_pageの時は、header.phpでそれらを取得してcssのanimationで動かします。front_pageでない時は、Twenty Twelveの設定のまま(任意の画像に固定か、ランダムかを選択)です。animationの動作はFirefox16+、Google Chrome21+、Safari6+で確認しました。 続きを読む
2013-3-15勉強会
今回もお菓子が充実してました。
勉強会の概要は、
- media queryの解説
- WordPressのユーザー一覧ページを作る、の補足
- 実装したい機能を自力で調べて作る方法
- TOPページのアイキャッチをスライドにしよう
でした。 続きを読む
Twenty Elevenの子テーマでグローバルメニューの調整
kanedaさんより以下の質問がありました。
ウィンドウが広いときには以下の様だったのが、
iPhoneなどの狭いウィンドウで、こうなる(ONLINE SHOPというメニューが改行してしまう)。
と、いうことで、調べてみました。
結論を言うと、右上にある検索フォームのcssが原因です。子テーマのstyle.cssに以下を追加しましょう。
@media queryにする必要はありません。
1 2 3 |
#branding .only-search + #access div { padding-right:0; } |
さらに、クリックできるエリアを広げる為に、各リンクを横幅いっぱいに広げたければ、以下を追加します。今度は@media queryで狭くなった時だけ、そうなるように条件を指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media(max-width:600px){ #access .menu-main_nav-container { margin:0 1%; } #access ul { margin:0; } #access li { float:none; } #branding .with-image #searchform { bottom: auto; } } |
キャラメルメープルポップコーンのパッケージをhtml5とcssで再現
2013-3-8勉強会で行った「マークアップとcssの筋トレ」は、キャラメルメープルポップコーンのパッケージを取り上げました。
マークアップとcssの筋トレ とは?
チラシ、パッケージ、書籍などの印刷物や、看板などをhtmlとcssで再構築することで、マークアップとcssのスキルをアップする為の練習です。
手順
まず、題材を用意します。
今回はこれ。
選ぶ題材は、文書量があまり多くないものが良いでしょう。
文字要素を抜き出します。
1 2 3 4 5 6 7 8 |
SEVEN&i PREMIUM キャラメルメープルポップコーン キャラメルの甘さとメープルの風味豊かなポップコーンです。 50g 1袋50g当たり272kcal 写真はイメージです メープル香料使用 VALUE PRICE 100YEN |
お好きなエディタでマークアップする
この段階では以下に留意して下さい。
- 印刷物をWeb上に再現するつもりで、SEOを考慮すること。
- マークアップに不要な要素(div,span,br)や、属性(id,class)は使わない。これらはcssで装飾する段階で使う
- doctypeを指定する。html5推奨。
- title要素も忘れずに
ここで、メンバー同士で、各自のメークアップを発表します。比較・検討すると面白いです。
マークアップには、厳密な意味での正解はありません(明らかな間違いはあるでしょうが)。
例えばこの題材では次の様なパターンがありました。
1 2 3 4 5 |
<section> <p>SEVEN&i PREMIUM</p> <p>キャラメルメープル</p> <h1>ポップコーン</h1> </section> |
1 2 3 4 5 6 7 |
<section> <hgroup> <h3>SEVEN&i PREMIUM</h3> <h2>キャラメルメープル</h2> <h1>ポップコーン</h1> </hgoup> </section> |
1 2 3 4 |
<hgroup> <h3>SEVEN&i PREMIUM</h3> <h1>キャラメルメープルポップコーン</h1> </hgoup> |
この場合は、パターン3の方が妥当性が高いです。hgroup内の見出し要素は、最も数字の小さいものがアウトラインとして採用され、その他は省略されてしまいます。
「キャラメルメープルポップコーン」は、一つながりの商品名で、要素としても「キャラメルメープル」と「ポップコーン」で分けるべきではありません。「ポップコーン」の方が大きい文字になっているのは、cssで調整しましょう。
cssで装飾する
まずは題材を出来るだけ再現してみます。
その上で、Webならではの工夫を加えると、より良いです。
ここで、必要ならば、divやspanを追加したり、idやclassなどの属性を追加しましょう。
こんな感じにしてみました
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <hgroup> <h3 class="logo"><span class="si">SEVEN&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> |
cssはこんな感じ。
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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だけで描いています。
WordPressのユーザー一覧ページを作る
2013-3-8の勉強会で、ランサーしょうじさんへお伝えしようとした内容を、改めて整理して実装してみました。
まず、ユーザー一覧ページを作る条件は以下の通りでした。
- 登録されたユーザーのアバターやプロフィール情報を自動取得して表示したい
- テーマはTwenty Twelveのクローン。テンプレートファイルの編集はアリとする。
- ページ自体は固定ページで作成
- 他の固定ページには影響を与えないこと
css3のanimationで作る永久ループのスライドショー
「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。 続きを読む
kozackmanの名刺デザイン
名刺を作ります!
冬期はゲレンデに生息するフリースキーヤーのkozackmanさん。久しぶりのパソコン倶楽部りんごの勉強会への参加で、名刺デザインの考察を発表してくれました。これに対して、りんごメンバーで意見を出し合いました。
SNS時代に名刺?
今時、個人で名刺を作りたい、と思ったのには訳がある、ということで、どんなコンセプトで名刺作成をしようとしている、という発表をしてもらいました。
- 名刺の目的
- ゲレンデで知り合った人に渡して、自分のサイトにアクセスしてもらう
- 利用シーン
- スキー場に於いて使用する事を前提にしたデザイン。ゲレンデでは携帯を持ち歩かないので、せっかく意気投合しても、その場限りになってしまうのがもったいない。そこで物理的に情報を伝える「名刺」をツールとして使おうと考えた。
- デザインポイント
-
- facebookをはじめ、youtube,flickr,pintarestなど、各種のSNSを最大限に活用したいので、それらのアイコンと、IDが必須。
- 各種SNSのIDが統一されていれば、省スペースにもなる。
- この名刺は自己ブランディングのツールと考えている。
今までの名刺との違い
一般的な名刺の内容をおさらいしておくとこんな感じ。
- 会社名
- 役職
- 名前
- メールアドレス
- 電話番号
作ろうとしている名刺ではこうしようと考えている。
会社名サイトロゴ(かっこいいヤツ)- サイトurl
役職(いらないので削除)- 名前(ローマ字でカッコよく!) a.k.a(SNSのIDをニックネームとして書く手もアリ)
メールアドレスSNSアイコンとID電話番号(教えたくないので削除)
メンバーからの意見
材質はプラスチックなど、濡れても大丈夫な素材にしないと使えないのでは?
サーファーも海に携帯は持って行かないから、その手の情報は暗記してました!
名刺がなくても、興味がある人には後日連絡するし、口頭で伝えて覚えてもらえない人からの連絡はあまりないかも・・・
僕の場合は「nobu69」で検索してね!でだいたい問題ありません。せっかく自分のサイトがあるならそれを活用しない手はない!
本当に興味のある人は、検索して連絡をくれます。なので確実に、そのキーワードなら検索上位になるというキーワードを把握しておく必要があります。
簡単なキーワードが有利です。
名刺はインパクトを残せるかどうかが大切。総額で数千円しか違わないのなら、カード素材やプリント業者による印刷も多いに使うべきだと思います。そもそもインクジェットは水に弱いので、想定される使用環境では使えないし。
ステッカーやシールにしたら良いかも
今後の予定
kozackmanさんは、フリースキーとシーケンスに関するサイトを作るそうです。楽しみですね。サイトや名刺が出来上がったら報告をしてください。
2013-2-22勉強会
18:00スタート。参加6名。議題は「clubringoの新メンバーの迎え方について」、「Webデザインの考え方について」 続きを読む
2013-2-15勉強会
18:10開始。参加者7名。clubringo.comの編集方法と、Progressive Enhancementなどの制作コンセプトの解説。 続きを読む