alice_rのブックマーク - はてなブックマーク

[CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る

単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。完成サンプル下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。 See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen. HTML コード HTML コードはシンプルなリストになります。順番に表示する要素が li になるの

alice_r 2015/06/18

CSS3

リンク

[WordPress] コメントフォームの label・input・textarea 要素の表示をカスタマイズする

ずいぶん以前に「コメントフォームの表示のカスタマイズ」という記事を書きましたが、label や input 要素の部分のカスタマイズ方法は書いていなかったので、その部分をまとめてみました。コメントの送信フォームを表示するには comment_form() タグを使用します。このタグをテンプレートファイルへ記入するだけでデフォルトのコメントフォームが表示されます。デフォルトの表示デフォルトの表示は、多少スタイルをCSSで整えてはいますが以下の画像のようになっています。デフォルトのコードや、comment_form() タグに渡せるパラメータ等は以前の記事や codexをご参照頂ければと思います。名前/メールアドレス/ウェブサイトフィールドのカスタマイズ名前、メールアドレス、ウェブサイトのフィールドの表示は、comment_form() タグに引数 ‘fields’ に値を渡すこ

alice_r 2015/02/05

WordPress

リンク

WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法

アイキャッチではなく、投稿記事内の画像を使用してサムネイルとしてトップページやサイドバー等に表示する方法です。調べていたら色々方法がありましたので、書き出してみました。 get_postsタグを使用してサムネイルを表示する get_postsを使用して投稿記事の添付画像を取得し表示する方法です。下記のコード表示したい箇所に記入します。このコードでサムネイルサイズ（150px × 150px）のサイズの画像を表示します。 <?php $args = array( 'post_type' => 'attachment', 'posts_per_page' => 1, 'post_status' => null, 'post_parent' => $post->ID ); $attachments = get_posts($args); if ($attachments) { foreach