ClearTypeのON/OFFによる表示の差

ClearTypeはWindows XP以降のOSに採用されているフォントのアンチエイリアシングです。XP以降のOSを使用している方のほとんどがClearTypeをONにしているんじゃないでしょうか。

ClearTypeは英文フォントに対して特に効果を発揮してくれるので、ClearTypeを利用しているとついつい英文フォントを使いたくなったりするのですが、ClearTypeが使える環境での表示に慣れてしまい、その環境でフォントやフォントサイズを選んでしまうと、ClearTypeが利用していない環境では「あれ…なんかフォントかっこわるい…」ということがあったりします。

一応、ClearTypeのON/OFFは設定で変更できるのですが、毎回そんなことをして表示を確かめるのもめんどくさい！

というわけで、この際ClearTypeがON/OFFでの表示の違いをまとめ、参照しやすいようにしてみよう思います。ただ、何だかんだいって面倒なので、調べるフォントは私がよく使う以下のフォントに限定しておきます。
・Arial
・Verdana
・Trebuchet MS
・Lucida Sans Unicode
・Century Gothic

比較画像は、
左：ClearType…OFF
右：ClearType…ON
となっています。
画像をクリックすると、原寸大で表示されます。

■ Arial

太字で使用するならば、ClearTypeがOFFの状態でも良好にアンチエイリアスが機能してくれます。
問題点を挙げるとすれば、日本語の文章中だとArialフォントの英文はちょっと浮いちゃう、といったとこでしょうか。

■ Verdana

私のお気に入りフォント・Verdana。ディスプレイ上での可読性を重視して作られたフォントってことで、アンチエイリアスは弱め。14px～16pxあたりの表示はちょっと間延びした感じになっちゃうかもしれません。アンチエイリアスを効かせたければ17px以上。

■ Trebuchet MS

12px、13pxあたりでClearTypeを有効にすると、太字にしていても通常のテキストと差があまりでないようです。Cleartypeが無効の時は、12px以上の太字にはアンチエイリアスが効いていますが、12pxの時にはアンチエイリアスのせいで少し可読性が落ちているように感じます。太字で使用するなら、12pxより11pxのほうが良いかも？

■ Lucida Sans Unicode

ClearTypeが無効の状態では、15px以上の太字でフォントの特徴がよく現れるようです。アンチエイリアスが効いていなくても味のある表示になるのが良いですね。使うのであればタイトル部分など、太字でフォントサイズが大きめのところがおすすめ。

■ Century Gothic

ClearTypeが無効だと、フォントサイズが小さい場合かなり可読性が低くなってしまいます。
太字でない場合、アンチエイリアスがきき始めるサイズも22pxあたりなので、通常のテキストに対して使うのはちょっと難しそう。

―――

個人的におすすめの組み合わせ
通常のテキスト ： Verdana
アクセントフォント ： Lucida Sans Unicode

タイトルなど、フォントサイズを大きくして目立たせる時は、できるだけ18px以上になるようにしておきましょう。
ClearTypeが無効でもアンチエイリアスが効き始めるので、きれいに表示されるはずです。

[ Close ]

ad-astra

クリックでテンプレートのプレビューができます。

★ 基本情報

テンプレート名 : ad-astra
最新バージョン : 2.0

更新履歴 - Update history

09/10/08 : バージョン表記無し→2.0

[Modify] 追記開閉スクリプト実装

[Modify] 全記事一覧表示に対応

[Modify] 「前後の記事へのリンク部分」のスタイル変更

[Modify] プラグイン3の出力方法を変更

[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応

[Modify] 簡易カスタマイズ改良

[Modify] IE8用の微調整

[Modify] MacIEへのスタイル適用を除外

[Modify] pre、hrなどのデフォルトスタイル変更

[Modify] その他色々大幅更新

星々の軌跡。ManicStarがベースになっています。
タイトル画像の変更、左右カラムの切り替え、幅可変／固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています（ad-astra 2.0以降）。ご了承ください。

★ テンプレート更新通知機能つき

ver.2.0より、テンプレートの更新通知機能がつきました。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

• タイトル画像をランダムで変更させる

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。 詳しくはスタイルシート上部を参照してください。
（バージョンによって項目に多少差があります）

• フォントの設定
  • 基本となるフォント
  • ブログタイトルのフォント
• フォントサイズの変更
  • 全体の文字サイズ
  • タイトルの文字サイズ
  • ブログ紹介文の文字サイズ
  • メインカラムの文字サイズ
  • 記事の本文の文字サイズ
  • サブカラムの文字サイズ
• 文字色の変更
  • 記事の文字色
  • サブカラムの文字色
  • ブログタイトルの文字色
  • ブログ紹介文の文字色
  • 一部のアクセントカラー
• 背景色の変更
  • 全体の背景色
  • 記事・コメント・トラックバック・プラグイン3の背景
• 記事部分の枠の設定
• カラム幅の変更
• 記事中の画像に枠をつける
• タイトル部分の設定
  • 画像の差し替え
  • 画像の縦幅の調整
  • 画像の配置の調整
  • ブログタイトル・ブログ紹介文エリアの横幅調整
• 簡易カラーコーディネート
• 幅可変／固定の切り替え
• カラム配置設定

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。
（バージョンによって項目に多少差があります）

1.要素の回り込み

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。

指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。

<img src="画像のurl" class="f-left" />

太字の部分を追加すればOKです。

なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、

<img src="画像のurl" class="f-left photo" />

というように、半角スペースとともにクラス名を追加してください。

2.写真風の枠

画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="photo"」を追加してください。

<img src="画像のurl" class="photo" />

太字の部分を追加すればOKです。

3.シンプルな枠

画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="imgbox"」を追加してください。

<img src="画像のurl" class="imgbox" />

太字の部分を追加すればOKです。

4.枠をつけない

記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ（スタイルシート上部、簡易カスタマイズ内に項目があります）と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。

指定方法 imgタグに 「class="noimgbox"」を追加してください。

<img src="画像のurl" class="noimgbox" />

太字の部分を追加すればOKです。

★ 使用条件・ライセンスについて

このテンプレートは、 クリエイティブ・コモンズ・ライセンス の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

タイトル画像

"Kilimanjaro"/Stig Nygaard (Flickr)

HTML・CSS

"Ad-astra" / rimse

[ Close ]

バトン用のスタイルつくってみたよ

バトン用のスタイルを作ってみました。
使ってみたい方はご自由にどうぞー。テンプレートによっては表示がびみょーになるかも。テンプレートとの相性もあったりするので、確実な表示というのは保証はできません。

一応白地だとこういうような表示になります。


このスタイルは質問文or回答文が二行以上になった場合でもある程度見た目を整えてくれる、というのを一番に考えて作ってます。
どういうことかというと、普通は、

A1　こういうように二行になると、番号の部分が普通の
文章に紛れてなんか見にくい（気がする）

こんな感じになっちゃうのを、無理矢理防いでます。
多分やり方としてはスマートじゃ無いと思いますが、まぁ、気にせず。

以下、スタイル。スタイルシートに追加して試してみてください。
11/27更新。

/* バトン用スタイル：ver.0.2 */
p.baton_title {
  margin : 1em 0;
  border-bottom : 1px dotted #777;
  font-weight : bold;
}
p.baton_title a {
  text-decoration : none;
}


dl.blog_baton ,
dl.blog_baton dt ,
dl.blog_baton dd {
/*すでにバトン用スタイルが記述されているテンプレートに対して
スタイルを使用する場合、干渉を起こさないようにしてます。
（あんまり意味ないかも）*/
  margin : 0;
  padding : 0;
  border : none;
}
dl.blog_baton {
  margin : 0 1em;
  line-height : 1.4;
}
dl.blog_baton dt {
  margin : 0;
  padding : 0.2em 0 0.2em 0.5em;
  /* ※1 */
  border-left : 4em solid #666;
  /* ↑ここで指定した色が質問番号(Q1など)の背景色になります。*/
  border-bottom : none;
  font-weight : bold;
  position : relative;
}
dl.blog_baton dd {
  margin : 1px 0 1em 0;
  padding : 0.2em 0 0.2em 0.5em;
  /* ※2 */
  border-left : 4em solid #444;
  /* ↑ここで指定した色が回答番号(A1など)の背景色になります*/
  border-bottom : none;
  position : relative;
}
dl.blog_baton span.q_number ,
dl.blog_baton span.a_number {
  position : absolute;

  display : block;
  text-align : center;
  color : #f5f5f5;
  font-weight : bold;
  line-height : 1.2;
  vertical-align : middle;
  /* ※3 */
  width : 4em;
  
  /* ↑の値を変えたときは、負の数値を下に入れる。*/
  left : -4em;
  
  /* IE6用記述。上の値よりさらに-0.5したものを入れる。*/
  _left : -4.5em;
}

バトンって好きじゃないんだけど

mixiとかでバトンが流行っていても、自分はほっとんどやりませんでした。理由はめんどうだから。
それなんで、FC2がバトン機能なんかをつけたときは、正直「んなあほな」という感じだったのですが、意外と広く受け入れられているようなので、自分もどんなものか体験してみることに。

自分に関係ありそうなものということで、テンプレート関係のをやってみます。

FC2ブログテンプレートバトン

Q1 あなたが一番使いやすいと思うレイアウトは1カラム？2カラム？3カラム？

A1 2カラムが好き。3カラムだと情報過多な気がするので。

Q2 どんな色合いが一番好き？

A2 モノクロ（しか作れない）

Q3 ブログデザインはよく変える？ほとんど変えない？

A3 切り替えスクリプトで好き勝手変えられるようにしてます。

Q4 好きな共有テンプレート作者さんっていますか？

A4 皆さん尊敬してます。特に尊敬している人は「Opus-i.plus」のEnifさん、「BeigeHeart_べーじゅのこころ」のChakoさん、「icene」のKEIさん。

Q5 あなたは自分でテンプレートのカスタマイズができる？

A5 言わずもがな。

Q6 自分でテンプレートを作ってみたいと思う？

A6 それが趣味みたいな感じになっちゃいました。

Q7 FC2ブログのテンプレートシステムでほしい機能・改善要望はある？

A7 価格.comみたいな、項目ごとに得点をつける評価機能。客観的にズバズバ意見してくれる人が欲しいです。

Q8 FC2ブログの公式テンプレートでこれから出してほしいデザインはどんなもの？

A8 「欲しいシステム」と少し被っちゃうけど、「CSStemplate project」のように、変数などを網羅したベースHTMLを公式で提供し、CSSはユーザー側が提供するというのがあれば面白そう。

Q9 公式・共有問わず、もしテンプレートの表示がおかしかったらどうする？

A9 1.ソースを見る 2.サーバーの不具合がないか調べる 3.諦めて寝る

Q10 あなたが今一番ほしいテンプレートは？

A10 ペンギン！

このバトンに回答する / 回答した人を見る

あー…。
バトン用のスタイル、作った方が良いのかな…。

[ Close ]

Penguinitis

Penguinitis(ペンギン病)：ペンギンへの愛で夜も眠れなくなる病気。


ペンギンが好きすぎて仕方ないので、画像差し替えの際はとりあえずペンギン画像から試すのが自分の中での定説になっています。

と、いうことで

ペ ン ギ ン 祭 り 開 催 ！


幸せー。


Stereotypeを共有に申請するに当たって画像差し替えをできるだけやりやすいようにしてみたので、実際に差し替えてみて使い勝手を試してみました。アンカーのマウスオーバー時の色はそのまま。

「テンプレートの利用規約」に対して物思う

Nefertのテンプレートは利用規約とか利用条件とかというような縛りがほとんどありません。
唯一といっていい制限が、テンプレート中で使用している素材による利用条件などですが、最近はできるだけ条件の緩い素材を使うようにしています。

利用条件を出来るだけ緩くしているのには、いろいろなテンプレート作者さんのページを見ていて一つの傾向があることに気がついたからです。
それは、「利用条件を厳しく課している人ほど、利用条件を守っていない人に対して憤りを強く感じている」ということ。
たとえば、「カスタマイズ不可なのにカスタマイズしている人がいた。ショック…。」とか、「カスタマイズのサポートはしてないので個別に連絡とられても答えられません＞＜」とか。

あくまで個人的な考えなのですが、利用条件に利用者全員が従うなんてことは絶対無いと思うのです。普通に生活していて、ルールに従わない人なんていうのはそこら中にいます。たとえ罰則があったとしても従わない人がいるのですから、罰則がないテンプレートの利用条件なんていうのは、利用条件をどんなにわかりやすく書き、どんなに見やすい場所に掲げ、何度も何度もお願いをしたとしても、従わない人は残念ながら出てくるわけです。
そもそも、テンプレート作者の利用規約を守らなくても、共有からダウンロードしてしまえば好き勝手利用できちゃうわけですからね。システム上は制限なんてものは無いんです。あるのは倫理や道徳による制限。

そうして、もともとは自分が嫌な思いをしたくないために作ったはずのルール：利用条件によって、結局は嫌な思いをしてしまうという悪循環に陥るわけです。最終的にテンプレートを作るのが嫌になり、放置or閉鎖…。

そんなめんどくさいことになるんであれば、変に縛りをつけず、好き勝手出来るようにするのがこちらとしても一番気が楽なんじゃないかなと思ったので、Nefertではあまり制限をつけないようにしています。のんびり、気長に、ぬるーく続けていきたいんです。

あとは、性格的なものもありますね。
自分は「約束を破られること」に対して憤りを強く感じるタイプなので、わざわざ自分からへんなルールを作らない方が楽、という感じです。
うん、よく考えればこの一言で済んだな（あれー。


あ、そして最後にお願いが。
何だかんだ言いましたが、素材の利用条件だけは遵守してくださいね！
素材を提供してくださっている方に迷惑はかけたくありません。
どうかよろしくお願いします。

優柔不断

Ad-astraのデザインがうるさく感じたのでManicstarの色違いに戻してみた。


↑今の　　昔の↓

どっちがいいんだ…。

あともう1個Manicstarの着せ替え。

タイトル：Amanecer
Manicstarに囚われずに画像選んだらスッキリしました。

フルチェンテンプレート

fragmentを少し改良して画像差し替えをより簡単にしてみたのですが、本当に簡単に差し替えできるうえ、画像を差し替えただけで何となく良い雰囲気に仕上がってしまう素敵テンプレートになりました。
黒背景って写真がきれいに見えて良いですね。

fragmentはかなりこってりタイプのテンプレートで、そんなに受けはよくないんじゃないかなという心配があったので、画像を差し替えた（だけ）あっさりめのバージョンを一つ作っておきました。

「Snowdance」

Design-Selectに入ってますので、どうぞお試しくださいませ－。



関係ないですが、ブログランキングのサムネイルがいつまで経ってもペンギンテンプレート時代のモノなのはどうにかならないのかな。早く更新されて欲しい。

コメントタイトルの初期入力値の変更

Nefertのテンプレートでは、コメントのタイトル部分（Subject）に「Re : （記事のタイトル）」というのが入力された状態になっています。ここでは、この部分を空欄に、もしくは別の文章にする方法を紹介します。

HTMLの編集を行います。
HTMLの編集画面から、以下の部分を検索してください。

<h3>コメントの投稿</h3>
<div class="write-comment">
  <form method="post" action="./" name="comment_form">
  <input type="hidden" name="mode" value="regist" />
  <input type="hidden" name="comment[no]" value="<%pno>"" />
  <dl>
    <dt><label for="name">Name : </label></dt>
    <dd><input id="name" type="text" name="comment[name]" class="form-name" value="<%cookie_name>"" /></dd>
    <dt><label for="subject">Subject : </label></dt>
    <dd><input id="subject" type="text" name="comment[title]" class="form-subject" value="Re:<%sub_title>"" /></dd>

この中の、

    <dt><label for="subject">Subject : </label></dt>
    <dd><input id="subject" type="text" name="comment[title]" class="form-subject" value="Re:<%sub_title>"" /></dd>

この記述がコメントタイトルの入力部分に関する記述になります。

最初に入力されている文字列は、value="Re:<%sub_title>"という部分によって決まっています。
このvalue="～"の～部分を削除することで、コメントタイトル部分を空欄にすることが出来るほか、～の部分を書き換えることで最初に入っている文章を自由に変えることが出来ます。

今までと違った趣向で

ウチのデザインはシンプルめなのが多いのですが、ちょっと趣向を変えて「こってり」したテンプレートを作ってみました。


Design Selectにも入ってるのでお試しあれー。
テンプレート名「Fragment」

画像をかなり強烈に見せてます。パッと見のインパクト重視。
形式としては変則3カラムになるのかな？
たまにはこういうのも良いかと。

リンクの色とかをベースカラーと違うモノにしてみたんですが、ここはもうちょっと調整が必要そう。
こう見えて画像差し替えを前提に設計してあるので、趣味にあわせて画像を差し替えれば意外と使えるかも、です。

作り置きも増えてきたので、そろそろテンプレ申請していこーかな。

Stereotype

Blancで調子づいたので、Blancをベースにちまちまテンプレをいじっていたのですが、途中から「ベタなテンプレート」というテーマで遊んでました。

その結果。

「Design Select」にも追加しておきました。

個人的に「ベタ」な部分
・背景は白
・やけに直線的
・ヘッダ部分は空の画像
・もちろん画像の色調とかコントラストとかいじっちゃってる
・さらに、画像には薄い横縞

まぁ、最初の二つはいつものことなんですけど。

画像に薄い横縞入れるっていうのは、昔流行りましたね。画質悪いのをごまかすテクニックの一つだった気がします。

あと、ヘッダーの画像なんですが今回は自分で撮った写真をつかってみました。初テンプレデビューです。自分の画像だとライセンス気にしなくていいから超楽ちん。

テンプレート名は「Stereotype」に。すごくマイナスイメージな名前だな。

一時間半

思いつくままにシンプルさを追求した結果、そこそこ見やすいテンプレができました。テンプレート名「Blanc」。フランス語で「白」だそうです。フランス語とかおっしゃれー。

ちなみにテンプレ制作開始→一通りの完成まで約一時間半。早い。ということで、本当に思いつくまま、何も考えずに作りました。かなり単純化してあるので似たようなテンプレとかありそう。あといつも通り自分の好きな配色でやったので白・黒・赤の三色になってます。色彩センスがなさ過ぎる。

「Design Select」にも追加したので、試しにスタイルを適用させてみてくださいませ－。

「ペンギン」配布開始

満足出来る仕上がりにならなかったので、ペンギンテンプレートはブログ内の限定配布ということにしました。端的に言うと「ボツ」。
いつかちゃんとペンギンさんのテンプレを共有に登録したいな。

ブログ内のスタイル切り替えからもペンギンテンプレートは消しておきました。代わりに、「Ad-astra」のテストも開始です。これはまだ粗が目立ちますね。


それと、そろそろテンプレートの話題ばっかりじゃなくてHTMLやCSSについての記事も増やしていこうかな、と思います。
これまでのテンプレートで使った無駄なギミックとか、書こうと思えば結構あるかも。

Penguin

クリックでテンプレートのプレビューができます。

FC2ブログ用テンプレート : penguin
「ペンギンが好きすぎてやった。後悔はしていない。」


★このテンプレートは共有には登録していません。
テンプレートは手作業で追加することになります。

★テンプレートの追加方法
テンプレートの管理画面を開き、適当なテンプレートを [複製] し、複製後のテンプレートのHTML・スタイルシートをすべて選択→削除でまっさらな状態にしてください。
その後、次のHTML・スタイルシートを開いてすべて選択→コピーをし、テンプレートのHTML・スタイルシートにペーストしてください。
「 HTML 」／「 スタイルシート 」
※意外とファイルサイズが大きいです。読み込みが完了したのを確かめてから、コピー・ペーストをするようにしてください。

★ 使用条件・ライセンスについて

この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

テンプレート各部分の原著作者・ライセンスは以下の通りです。
ペンギン関連写真
ClifB (Flickr)


アイコン
"Fugue Icons" / pinvoke


HTML・CSS
"penguin" / rimse

旭川に行ってきた

部活の引退試合ということで、旭川に行ってきました。
今回は車の台数の関係で、自分も運転することに。初心者マーク付きで。
（今年の五月に取得したばっかり）

ここ数日の天気予報を注意深くみていた方はわかるかもしれませんが、週末の北海道は雪は降るわ寒いわで、かなり荒れてました。

そんな天気のせいもあり、出発して30分もしないときに、ウチの車を颯爽と追い抜いていった車が、目の前でスピン→路肩へダイブ。
同乗者一同戦慄。北の大地おそるべし。
冬期間中に教習受けといてよかったー。

でも一番怖かったのは駐車でした。バックこええええ。


それとは関係ない話ですが、パソコンの調子が不安定なのを解消すべく、キーボードとSATAケーブルを交換してみました。
キーボードは以前書いたように急に使えなくなったりするのがキーボード側の不良という線が濃くなったので。SATAケーブルまで変えたのはたまに起動時にHDDを認識しなくなって起動しなくなることがあったりしたのでその対策として(ノ∀｀)
今のところ、問題は発生してません。といっても一日も経ってませんが。
このまま直ってくれればいいなー。