2010年07月24日

アスキーアート用のCSSを加えてみた

ウェブログ内にアスキーアート(AA)を書くことを念頭において、デザインテンプレートのCSSファイルを改変したところ、ウェブログのデザインがぐちゃぐちゃになってしまった。
まず、YUI 2: CSS ResetYUI 2: Fonts CSSとでCSSをリセットした後、基準のフォントのサイズを13pxに、行の高さを1.4(×13px≒18pxのため、少々ずれ有)にし、span要素でaaというクラス属性を設定してやると、フォントのサイズを13pxから16pxに変えるようにしただけのつもりなのだが。
CSSファイルの具体的な変更内容は、次のとおり。

@import url(http://yui.yahooapis.com/YUI 2のバージョン番号/build/reset/reset-min.css);
@import url(http://yui.yahooapis.com/YUI 2のバージョン番号/build/fonts/fonts-min.css);
div#container {
font-size: 13px;
line-height: 1.4;
}
span.aa {
font-family: 'MeiryoKe_PGothic', 'MS PGothic Ex+', 'Osaka-AA', 'IPAMonaPGothic', 'Monapo', 'Mona', 'MS Pゴシック Ex+', 'IPA モナー Pゴシック', 'MS PGothic', 'MS Pゴシック', sans-serif;
font-size: 16px;
}

まあ、ぐちゃぐちゃになってしまった部分は、そのうちゆっくり修正するとしよう。
なお、AAがずれないようにする方法を調べたところ、皆様あまりにも様々な環境の様々なウェブブラウザ又は2ちゃんねるブラウザ(CSSリセットしたのはそのため)で様々なAA用のフォントを使われているようなので、フォントの種類(フォントファミリ)を洗うのが大変だった。
また、line-height: 1.4;とピクセルではなく単位なしで指定したのは、古いGeckoエンジンを搭載しているウェブブラウザでずれないようにするため、だったと思った。
この辺りはうる覚えなので、そのうち素直に18pxにするかも知れない。
とにかく、CSSを変更した結果がこれ↓
     __
    i<´   }\   , - 、
   ヽ.._\./  .ンく r-兮、 __
    ∠`ヽ.! /   ヾニEヲぐ ,ゝ->
   /_`シ'K-───‐-、l∠ イ   さすがゴッグAAだ、
   l´__,/l\、_ ̄0¨0)゙@Yヘ, -┤     少々ずれたって
.    l'___|⌒ヾ''ー==、ーr='イ i二|      なんともないぜ!
   / .」   i   /./7r‐く  lー!
.   f.  ヽ‐i人.∠'<   _i. l,.-ゝ.
    トiヘヘ「ト〈      `X  トレi7__|
   〉ト:トハj`! i.    /  トー┤lルj,リ
  /‐+----+‐l    iー--i---ヾ'〃
.  l_i____i__|   |___i,__i_|

2
m_hiro at 13:18 :Comments(0),TrackBack(0)
Categories : 日記/一般コンピュータ
このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

コメントする

このブログにコメントするにはログインが必要です。

トラックバックURL