今日もお菓子をありがとう!

勉強会の概要は、

です。

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

イベントの管理

All-in-One Event Calendar の様なプラグインを使うのが簡単。これはWP 3.0以降に備わっている、カスタム投稿タイプの機能を利用したプラグイン。
投稿タイプを、デフォルトの「投稿」にしたいのならば、カスタムフィールドにイベント情報を入力する必要がある。カスタムフィールドの使い方。

任意の投稿をトップページに表示

WP のタグを利用するのが妥当。

モバイルファースト実践

• webブラウザはリフロー（Reflow）が基本
• マークアップしたhtmlをcssなしで、まず表示してみる。マークアップが妥当なら、各要素の強調のされかたには大きな問題はないはず。
• ウィンドウサイズよりも大きな画像は、表示領域からはみ出す。これは
  CSS

  img{ width:100% }

  1 2 3

  img{    width:100% }

  で直す。

• さらに、大きな表示領域の際に、width:100%で画像が大きくなりすぎるのを防ぐには、メタ要素に
  <meta name="veiwport" content="width=device-width">

  1	<meta name="veiwport" content="width=device-width">

  を入れてmedia queryを利用可能にした上で、

  CSS

  /* 表示領域の幅が600px未満なら、画像は幅いっぱいに表示 */ img{ width:100%; } /* 表示領域の幅が600px以上なら、画像の本来の幅で表示し、左右中央合わせ。 ただし、表示領域を超えない幅とする */ @media screen and (min-width:600px){ img{ width:auto; max-width:100%; display:block; margin:0 auto; } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  /* 表示領域の幅が600px未満なら、画像は幅いっぱいに表示 */ img{ width:100%; } /*    表示領域の幅が600px以上なら、画像の本来の幅で表示し、左右中央合わせ。    ただし、表示領域を超えない幅とする */ @media screen and (min-width:600px){ img{ width:auto; max-width:100%; display:block; margin:0 auto; } }

  とする。

ここまでは地ならし的な感じ。次回以降に続きます。