ワードプレステーマTwentyTwelveの’rembase’ってなんじゃろ?って方、多いんじゃなかろうか?実は、私自信もその一人である。

初めてTwentyTwelveに着手した時に戸惑ったのは、

• ’font-size’が２つ並んでるww
• 小数点以下の数字が長ゲェww

なんじゃこりゃっ!?それが始まりだった。スタイルシートの冒頭部などすっ飛ばして、目的の部分を探しに行ってしまったのだから仕方がない。後からだった。’rembase’なるモノが存在していた事を知ったのは。

しかし、不思議なモノで、あまりCSSなどを知らなくても’rembase’が分からなくても、ある程度ならカスタマイズ出来てしまうモノなのだ。

分からないのなら、分からないなりにカスタマイズしていけばいぃ。そうじゃなけりゃ、チャンと学習すればいぃだけの話だし。

意味が分からなくても、この部分だけ押さえておけば、カスタマイズに差し支えはあまりないだろう。いや、勝手な個人的な妄想に過ぎないのか…。

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

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

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

～ テーマTwenteTwelveスタイルシート冒頭部分抜粋 ～

ぅゲェ～!?　ただでさえややこしいスタイルシートなのに、なんじゃっ!?この数式は!?って、思った方も多いことだろう。

…ん～ん、数字や横文字が苦手な人には、かなり堪える部分だなww　TwentyTwelveをカスタマイズするには、ココを理解するってよりも、数字を当てはめていけばなんとかなる、そのくらいで良いだろう。

私も、計算機(携帯)片手に計算しながら数字を当てはめていっただけww　まぁ、なんとかなったので良しとしよう。

算数というよりは、パズル感覚で楽しんだ方が進みやすいだろう。例えばこんな感じに。

テーマTwentyTwelveでサイトコンテンツの文字の大きさを14pxに決めたとしよう。すると、次の様な表記になる。

	font-size: 14px;
	font-size: 1rem; ( 14 / $rembase = 14 / 14 )
	line-height: 1.714285714; ( $line-height / 14 = 24 / 14 )

※$rembase=14,$line-height=24

いかがだろうか?この様にパズル感覚で数字をはてはめるだけで、なんとか解を求める事が出来た。もちろん、意味を理解出来るに越したことはない。

初心者の方でTwentyTwelveカスタマイズをする方は、参考にしてみて欲しい。数字に弱くてもなんとなく出来そうですよね?