上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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
スポンサーサイト


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

★ 基本情報

テンプレート名 : 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以降)。ご了承ください。


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

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

このスタイルは質問文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 ペンギン!

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カラムになるのかな?
たまにはこういうのも良いかと。

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

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

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

その結果。

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

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

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

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

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

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

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

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

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

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

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


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


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

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


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

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

★ 使用条件・ライセンスについて
Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

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

アイコン
"Fugue Icons" / pinvoke
Creative Commons License

HTML・CSS
"penguin" / rimse
Creative Commons License

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

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

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

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


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



Recent Entries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。