Wordpress TwentyTwelve

初カスタマイズで学んだこと



有松 佳子

2013年6月15日
第6回　クリエイターズ勉強会　by S-C-A

どうも、有松です。


有松佳子（ありまつけいこ）
株式会社マーベリックスWebデザイナーです。

GattoLibero

芸大で絵画（油絵）を専攻してました。
猫好きです。

愛猫カツヲ


その他大勢


Twenty Twelve

デフォルトの見え方（デスクトップ）

Twenty Twelve
デフォルトの見え方（600px以下のデバイス）



Twenty Twelveの特徴 その１


●TwentyElevenよりも脱ブログ感＆すっきり


・TwentyElevenには無い、トップページのテンプレートが用意されている。


・TwentyElevenに比べてCSSがすっきり。（TwentyElevenは2700行、TwentyTwelveは1700行）

Media Queriesの部分がだいぶコンパクトになっている。

Twenty Twelveの特徴 その２


●いろんなデバイスを想定

モバイルファーストの考え方で組まれていて、いろんなサイズのデバイスでの表示や、HiDPI/Retina ディスプレイの表示の対応もほどこされている。

※表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認に超便利↓
＜Viewport resizer＞

Twenty Twelveの特徴 その３


●IE6は無視



■フォントについて

●Open Sansが欧文フォントのデフォルト





function.phpでgoogle WebフォントのOpen Sansが読み込まれている。
$query_args = array(
	'family' => 'Open+Sans:400italic,700italic,400,700',
	'subset' => $subsets,
);
wp_enqueue_style( 'twentytwelve-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null )
;

Open Sans


Chrome ウェブストア などにも採用されていてとても美しいフォント。

●font-size、line-height、marginやpaddingの指定が「rem」という単位を使用


remはcss3から登場した単位で、emがサイズを継承し、1emのサイズが相対的に変更されるのに対し、remはルートで（htmlとか）で指定したサイズがずっと、1rem。「root＋em => rem」の意。
---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

※日本語フォントについて

日本語フォントは指定が無いので任意でスタイルシートに追加する。これまでずっとMac用にヒラギノ、Windows用にメイリオを指定してきたけど、

＜アンドロイド用の日本語フォント＞
●モリサワ新ゴRとDroid Sans

i-Phoneとi-Pad用のフォント
●HiraKakuProN-W3

らしいので、横幅600px以下のデバイスにはこのフォント上記のを適用するとか検討中。

■IEこのやろう

●IE9以下に対してはie.cssが用意されている

ばっちりばっちりと思ってコーディングして、あ、一応IEでも見ておこうかな...と思ってテスターを見た瞬間

「IEこのやろう」

という言葉が出てくる。（あるあるー）

TwentyTwelveではIE9以下で閲覧するとie.cssを適用するようにfunction.phpに書かれている。
	/*
	 * Loads our main stylesheet.
	 */
	wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

	/*
	 * Loads the Internet Explorer specific stylesheet.
	 */
	wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
	$wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

詳しいことはこちら方の↓のスライドショーを参照するととてもわかりやすい。

＜TwentyTwelveの子テーマつくったらハマった話＞

なんでこんなこと？


1.読み込み順序（依存関係）をコントロールできる
らしいです。
親テーマのstyle.cssとie.css、子テーマのstyle.cssとie.cssまたは任意で作成したcssの読み込み順序をコントロールできるみたい。


2.バージョン指定によりブラウザキャッシュのコントロールができる
らしいです。

■Media Queriesの部分

●TwentyElevenでは

800px、650px、450px、320pxと細かくブレークポイントが設けてあったのに対して


●TwentyTwelveでは

960pxと600pxの2つになっている。


※でも画面サイズだけでデバイス判断できるわけじゃないし、モバイルファーストを考えるとメディアクエリに対してはいろいろ考えさせられる。

レスポンシブ考察


レスポンシブは作る側としては面白い。けどそれが最適なサイトってけっこう少ないんじゃないか。
本当のレスポンシブとはなんぞや。
興味深い記事↓

＜レスポンシブWeb DesignからレスポンシブWeb Publishingへ＞

＜ここがヘンだよRWD（レスポンシブWebデザイン）＞

おわり


ありがとうございました。


Wordpress TwentyTwelve初カスタマイズで学んだこと

By Keiko Arimatsu

Made with Slides.com

Wordpress TwentyTwelve初カスタマイズで学んだこと

Wordpressを効率よく使うために公式テンプレートであるTwentyTwelveをカスタマイズしてみて学んだことを書いてみます。

  • 2,868