font-sizeの基準値がどーのとか、変更した値から更に変更する時とか、
いちいち調べるのが面倒だったから作ってみたモノ、
javascriptとかphpはわかんねーから動的ではなく静的にしかも計算はアナログでｗｗｗ
左ラインを基準値に、求める値を上ラインから探して当たる所の％を指定する。
あぁ、メガテンの合体表みたいだｗ見た目とか20pxまでしかないとかだからベータで。
アナログ計算なので間違ってたらご一報下さい。
コンテンツのfont-sizeは個々に:**%;か:**em;で指定するとして、
基準になるfont-sizeは何pxにするかつー問題。
個人的に見易いと思うサイズは、font-size:12px; line-height:1.6em;なので、
これを適用する為の基準を考えてみる。
ブラウザデフォルト(16px or 14px)の場合
主要ブラウザは16pxで統一されているので、16pxに対する値を指定していく、一番簡単な方法。
デフォルト16px(100%)を12px(75%)にする為body{font-size:75%;}で指定。
■デメリット
Firefox 2.0、1.0とNetscapeの場合基準となるサイズが14pxな為、差異が出てしまう。
Firefox使いの人が全員最新Verなのを祈るとか、どーよ。でもコレ考えると以下のも全部ダメになる。
10pxの場合
10px = 1em となるので計算し易い。
①body {font-size: 10px;}でie6の文字サイズ変更出来ない事を切り捨て、
端数の無い120%、140%、160%とかで簡潔に指定する。とにかく楽。
■デメリット
ie6で文字サイズ変更できない。
②10px = 62.5% ie用にbody {font-size: 62.5%;}、
その他はcssハックでhtml>/**/body {font-size: 10px;}からwrapperやcontainerに120%を指定、
基準が12pxになりそこからコンテンツ事に指定する。ie6文字サイズ可変に対応。
■デメリット
結局12pxからの計算になるじゃないか…だったら最初から12px = 80%(?)でやっとけよ。
Yahoo YUIのfonts.css(13px)の場合
UI LibraryのYUI ライブラリfonts-min.cssを使って、基準13pxから、コンテンツ事に指定していく。
■デメリット
便利だけど基準13pxだと細かい%指定とか何か色々面倒だ。
自分の場合だが、IEのブラウザ文字サイズを「小」にしてるから、可変にしたとしても、
文字サイズ「小」=12pxにするとなると、FirefoxやWebKitに差異が出てしまうので、
あんま意味ない…ので、ブラウザ文字サイズ「中」にしてアクセシビリティ考慮するぞ！
…ってのは無い。めんどいから。ie6捨て、10px固定、端数の無い%指定が楽で良いです。
結論としては、最近のブラウザはズーム機能とかあるから適当にやっとけよと。
とりあえずサイトの方に文字サイズ表でも作ってみるか。
XML宣言(DOCTYPEDOCTYPEの前が全ての問題)によりie6が後方互換モードになる。
レイアウトを崩したくない場合cssハックを使うか、レイアウトに余裕を持たせる必要がある。
margin: 0 auto;でセンタリングしたレイアウトが適用されない。
cssハック(* html)でbody要素にtext-align: center;
後続のdiv#wrapperやdiv#containerにtext-align: left;を適用する。
ボックスのサイズ
通常のサイズ = width(height)
互換モードのサイズ = width(height)+padding+border+margin
cssハック(* html)で本来のwidth(height)とは別にサイズ指定をする。
むしろie6を切り捨てるのが1番良い…
昨日の続き
syntaxhighlighterについて色々ggrks…の状態から色々検索してはみたが…
いかんせんver.2.2.0の情報が少ない、AS3に対応させるやら2.0やらなんや(ry
あー、どうせコピペする事とか印刷とかしないからツールバーの表示は無し、line-heightも弄って改行画像が切れる事も無くなり、FireFoxとかChromeでたまに画像やら文字が切れてるのはスカラー波のせいだから気にしないと。
後は～、使わないColor ThemeとBrushの解除で軽量化…これはまた今度で、やっとこWordPressの自作テーマうｐ出来たから今日は何もやる気せん。
元々以前のBlogツール「BlognPlus」でソースコードを表示する為に使っていたJavaScriptライブラリだったが、
WordPressだとプラグインで存在しているらしい。プラグインなら簡単だし、じゃあ早速って事で、とりあえずデフォルト使ってみる。
<a href="http://five-five-zero.toypark.in/blog/">リンク</a>
とまぁ使ってみるも何も今までの記事がBlognPlusからのコピーだからもう使ってるんですけど…
そこは置いといて、大分既出だが気づいた事を幾つか…（全てデフォルトの状態での結果）。
１．<、>や&、"等の文字実体参照（メタ文字）はソースコードとして認識され、そのまま表示されてしまう。
２．ブラウザの「（ページの）ソース」では［***］で括った部分は文字実体参照に変換される。
３．このBlogのデフォルトfont-sizeは10pxなので、syntaxhighlighter/syntaxhighlighter/style/shCore.cssのline-heightの値とかみ合わず、改行の画像が途切れてしまう。
４．WordPressでSyntaxHighlighterを適用した記事を「クイック編集」すると文字実態参照に変換されてしまう。
んー…validなBlogにするってのは相当難しい。
とりあえずSyntaxHighlighterの改造については後日…