work.log

元エンジニアの備忘録的ブログ

表示確認ページ

投稿:2013-04-26 12:43  更新:

見出しチェッカーの使い方

このページに実装している見出しチェッカーの簡易マニュアルです。

TwentyTwelveの見出しをカスタマイズする」でバランスを見るために作成したものです。

borderのプロパティを表示する

twentytwelve-customize-005-01

border type と表示されているボタンを押すと border のプロパティが開きます。

プロパティが邪魔な場合は border type のボタンをもう一度押すと閉じます。

borderのプロパティを設定する

twentytwelve-customize-005-02

最初に border-leftborder-bottom のサイズを記入します。

初期値が設定されているので変更がない場合はそのままでもOKです。この欄は書いただけでは即反映はされず 線のタイプ を選ぶ事によって初めて有効になります。

次に一覧の中から線のタイプを選んでチェックします。初期値は border: none; です。

途中からでも変更は可能ですが、カラーコードを変更した後に操作すると #000000 で上書きされますのでご注意ください。

カラーピッカーを使ってborder-colorを調整する

twentytwelve-customize-005-03

オレンジ枠で囲んでいるカラーピッカーを操作して色を調整します。

色は <h1> から徐々に薄くなるように自動で設定しています。

リアルタイムで下の見出し一覧の色が変化しカラーコード (HEX) が表示されます。

カラーピッカーを使ってbackgroundを調整する

twentytwelve-customize-005-04

カラーピッカーの下にある background にチェックを入れ見出しの背景色を決めます。不要な場合は飛ばしてOKです。

先ほどと同様にリアルタイムで背景が変化しカラーコード (HEX) が () 内に表示されます。

色が確定したら カラーコード をメモしてスタイルシートに書き込みます。border を弄った場合はその内容も合わせてスタイルシートに書きます。

表示チェッカーのリセット方法

twentytwelve-customize-005-05

reset と表示されているボタンを押すと初期状態にリセットされます。

使い方は以上です。

使い方ボタンをもう一度押すか下記の非表示ボタンを押すとこの文章を非表示にできます。



left: px, bottom: px


(none) (solid)
(dashed) (dotted)
(double)

border background

H1 見出し

H2 見出し

H3 見出し

H4 見出し

H5 見出し
H6 見出し

blockquote の表示確認。