フォントって、探すの難しいな。
今回は、「Existeｎce Light」というフォントを採用してみました。
後ろの変な波形はPhotoshopのブラシを透過させた白で適当に。
ブラシファイルはこれも外国サイトから取ってきたんですけど、元ファイルの場所示すと、「こんなものしか作れないのか。」とか言われそうな気がして・・・ｗ
これはまだ途中の段階で、これからフォントをすこし加工していくんですけどね。
09.07.21:29追記
修正版。ちょっとぼかしすぎな気もする。
サイズを縮小した。120pxって以外と圧迫感がすごいから、80pxぐらいにしてみた。
プロジェクト名は「Omnisight」。
とりあえず今回は、載せる内容の決定。
載せる内容については追記に載せておきます。
Javascriptを使用すると、使えない環境に対処しないといけないのが大変だ。
透過対策とかjQueryとか使うと派手になっちゃうからな・・・。
角丸ボックスも検討できるけど、div病になるからな・・・。
（div病→中身の空のタグばっかり使ってしまい、CSSオフの時に考慮しない人）
横方向のセンタリング
bodyに対してtext-alignをcenterで指定。（古いブラウザへの対処）
divボックスを作り、それにmarginをleft,rightともにautoを指定。
これで完成である。
だが、縦方向に関して、センタリングがうまくいかない。
前述の方法でdivの余白の上下にautoを割り当てるのもダメ。
絶対位置で上下に50%しても無駄。
ネガティブマージンも無効。
どうしたらいいんだろうか・・・。
08.17 19:43追記
もう一度確認してみたら、やはり、なんか表示がおかしかった。
やっぱりテーブルを使ってみる他ないのだろうか？
一応、夜中に書いたコードはそのままにしておくことにする。
08.17 0:25追記
何かわかんないけどできたんで、ソースを書いておきますね。
こちらで表示確認したところIE6,7,Opera9,Firefox3は見ることが出来た。IE5.5はネガティブマージンのみ働いて、上にずれたようになってる。
↓のHTMLファイルはこちら。テキストが一行しか書けないのはline-heightのせい。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title>テスト</title>
</head>
<body>
<div id="yokocenter">
<div id="tatecenter">テキスト一行</div></div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}body {
font-family: 'ＭＳ Ｐゴシック' , Arial, sans-serif;
font-size: 83%;
color: #000000;
text-align: center;
}#yokocenter {
margin: 0 auto;
width: 250px;
padding-top: 25%;
}#tatecenter {
width: 250px;
height: 200px;
background-color: #000000;
color: #FFFFFF;
line-height: 200px;
margin-top: -125px;
}
なんでだろうなー。垂直方向でのセンタリングって面倒だよね・・・。
あと、このソース何故か知らないけど、paddingとmarginが2倍になる…。
くるっとした、スワールな飾り罫を描くチュートリアルとブラシ集 | コリス
CSSの記述に条件文が使えるようになる「Conditional-CSS」:phpspot開発日誌
JavaScript製の画像スライダー・ギャラリーいろいろ:phpspot開発日誌
窓の杜 - 【特集】「Firefox 3」対応拡張機能カタログ 第2回
[JS]スムーズにスライドするパネルを実装するスクリプト | コリス
| ＾＾ |秒刊SUNDAY | ずばり客が喜ぶWEBサイトを作れるフリーのAjaxサンプル集３０個
[CSS]基本的なレイアウトやリセットなどが設定されたスタイルシートのフレームワーク集 | コリス
汚した感じを表現するグランジ風のPhotoshopのブラシ -beautiful-sin.net | コリス
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 6 | コリス
カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」:phpspot開発日誌
ユーザーの視線を惹きつける、訴求効果の高い画像の使い方 | コリス
ナビゲーションやボタンなどのパーツを作成するPhotoshopのチュートリアル集 | コリス
ブラウザ上でGIFアニメの作成、編集ができる『gifmake』 | 100SHIKI.COM
ナビゲーション・メニューまとめ - DesignWalker
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
| ＾＾ |秒刊SUNDAY | 自動的にデザイナ−が使う色を作れるカラースキーマー集１６サイト
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 5 | コリス
1000個のベーシックな色を使用したPhotoshopのグラデーションファイル | コリス
マストハブな37のフリーフォント:phpspot開発日誌
拡大画像をスタイリッシュに見せるためのJavaScript&FLASHライブラリ『Magic Toolbox』 | 100SHIKI.COM
ウェブデザインに役立つ、15のオンラインツール | コリス
124個のローディングを表現したアニメーションGIF画像 | コリス
ボタンのスタイルシートを確認しながら、オンラインで簡単作成 -CSS Button Designer | コリス
光を効果的に使用したPhotoshopのチュートリアル集：Part 4 | コリス
CSSでアニメーションする馬をパカパカ走らせるイリュージョン:phpspot開発日誌
[JS]パネルをスライド・フェードで表示・非表示させるスクリプト | コリス
【ハウツー】ゼロからはじめるSliding JavaScript Side Bar - Ajaxで動的サイドバー (1) Sliding JavaScript Side Barの概要 | パソコン | マイコミジャーナル
ウェブの画面設計に使えるまとめ - DesignWalker
テクスチャとグラデーションで質感のある背景を作ろう - DesignWalker
ウェブデザイナーのための16のFirefoxのアドオン | コリス
[JS]jQuery 1.2.6がリリース | コリス
[CSS]スタイルシートでパララックス(視差)効果を狙ったサイト集 | コリス
ブログのサイドバー・アイデア - DesignWalker
透過をきれいに使ったウェブデザインいろいろ - DesignWalker
jQueryでクールにアニメーションするメニューを実装するチュートリアル:phpspot開発日誌
フリーのベストアイコンいろいろ:phpspot開発日誌
光を効果的に使用したPhotoshopのチュートリアル集：Part 3 | コリス
紙のテクスチャブラシ等、ハイクオリティなPhotoshopブラシ集:phpspot開発日誌
いろいろなサイトのFooterのデザインを集めた -Footers Design Showcase | コリス
光を効果的に使用したPhotoshopのチュートリアル集：Part 2 | コリス
[CSS]印刷用のCSSのフレームワーク -Hartija | コリス
[JS]Mootoolsのプラグイン 41選 | コリス
[CSS]チェックしておきたい50のCSSのテクニック | コリス
デザインやファッションに取り入れたい、2008年 夏のトレンドカラー | コリス
Vista風ナビゲーションを実装するスタイルシートとPhotoshopのチュートリアル | コリス
[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス
サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE
小粋空間: スタイルシート切り替え
Ks-product2 :: 記事詳細 :: javascript + cssでフォントサイズ切り替え
Sleipnirを改造しようと思う人への記事 - 愚者のニュース
小粋空間: 追記文章の折りたたみ 2.0 for FC2 ブログ
Google Page Creator
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
順番は巡回順だと思う。
・1024×800で表示するとテーブルがはみ出していた。
・IE6に至ってはテーブルが全体に表示されていた。
たぶんテーブルタグを使っているのがいけないのだろう。
ということで、テンプレートを改造します。
今テーブル（表）で作成しているのを、spanで表示させます。
ナンバー 日付 - 記事名 | カテゴリー名
で表示をする予定。
21:45 追記
表示を修正しました。 なんかシンプルｗ
ブログやっている人や、ホームページを作る人にとってはおなじみのものですね。
「<」で書き始めて、「>」で終わるものを基本的に、タグと呼びます。また、「</ >」の形でタグを閉じて、その部分を完成させます。
（例）
<a href="http://ktss545381.blog26.fc2.com/">Omnimedia Seacher</a>
↓ このタグで次のように表示されます。
Omnimedia Seacher
href属性でリンク先（アドレス）を指定して、「Omnimedia Seacher」という文字列を囲うことでリンクを指定しているわけです。
ちなみに「http://」で始まるもの以外で、「mailto」を使って、メールアドレスを指定する方法もあります。
それは、いろいろ面倒なので、勝手にこの人の文章をお借りします。→mailto の使い方
次に、name属性とid属性を利用した方法。
<a href="#end">終わりへ</a>
（スペースとかいろいろな内容）
<a name="end" id="end">終わり</a>
↓
終わりへ
と、まぁこんな感じになる。
ちなみに、href="#"にするとページの一番上に戻ります。
この方法はあまり好ましくないらしいから、<body>の真下に<a name="top" id="top"></a>と書いておくほうがいい。
title属性を使うと、一般的にマウスを上に載せたときに、ポップアップでメッセージが表示できます。
（例）
<a href="http://ktss545381.blog26.fc2.com/" title="このブログを開き直す">Omnimedia Seacher</a>
↓
Omnimedia Seacher
このtitle属性は、他のタグでも使える。
例えば、この太字の上にマウスを載せると…。
この行の上にマウスを載せると…。
これで属性の使い方がわかったと思うので、ここからは例を省略。
accesskey属性を使うと、Windowsだと[Alt]キーと、Macだと[control]キーと同時押しで押すキーを指定することでそのリンクに飛ぶことが出来ます。
（accesskey="P"→トップ）
ただし、ブラウザのメニューの(F)などのキーとダブらないように注意。
target属性を使うとウインドウの表示方法を指定できる。
基本的には「_blank」を指定して、新しいウインドウで表示させるくらいしか使わない。
（target="_blank"）
終わり
nama属性とid属性の話に戻る
他の属性や、Javascriptを利用しての方法もあるけど、それはそれでまた話が長くなるので、また今度。
追記の折りたたみはjavascriptで苦戦。
Javascriptを一から書くのははじめてだし。
ましてや、jQueryで書いてるから・・・
もうjQuery使わないでやろうかな…。
$(function more(entryID){
$('#more' + (entryID)).slideToggle("fast");
return false;
})
このコードを実行してみるとFirefox、Operaで全く動作しない。
IEは動作するけど、タイトルが絶対位置で記述してあるから、タイトルと追記が重なってしまう。
で、とりあえずFirefoxとOperaで表示させたいから、
.click()を使って、記述してみた。でも、うまくいかなかった。
やっぱりscript.aculo.usを使った方が絶対良い。（ちょっと重いけど）
1.コメント部補修
定義リストで並び替え。今の状態だと表示崩れが激しい。
2.全記事リスト補修
テーブルを作り直す。リンクのアンカー入れる。
3.追記部分増強
なんと追記の変数を入れ忘れていて、追記が表示できないという罠ｗ
jQueryで折りたたみ出来るらしいからどうにかしてみる
4.プラグインにもっといろいろ追加
重くならない程度に追加。面白そうなの見つけてくる。
不具合
・アイコンが透過PNGだった→背景がグレーに…
・コメント投稿画面のフォーム→並べられるはずなのに1024×768で崩れる
・全記事表示のボックスがプラグイン無視
原因は何なのだろうか…。直してみます。
できてないものリスト
・タイトルのリンク（divとaの入れ子がおかしい）
・ナビゲーション（内容物がすべて未定）
・画像のズーム
変更点1 opacity（透明度）を使わないようにした。
理由） 使うところなかったから。
変更点2 全記事表示エリアでのページをスクロールするスクリプトを使わないようにした。
理由） tablesorter（並び替えスクリプト）と併用すると競合が起こる
不具合） 訂正済み。
追加点1 日付表示（特に月の部分）を英語省略形表記にした。
理由） デザイン上の理由。
不具合） Operaで文字表記が太字になってくれない。
追加予定
・a（アンカー）、hr（水平線）、blockquote（ブロック引用）、q（インライン引用）、img（画像）のCSS
・著作権表示の部分のテキストの余白を調整。
あとはコメント・トラバのデザインなんです。（実際するところなどないと思うのだが…）
ブログのコメント部分やコメントフォームのデザインを色々集めたサイト:phpspot開発日誌
このサイトを参考にしてみる。
コメントのプレビューなんかも入れたいけど…重くならないか心配。
記事繰り返し部分の日付を調整完了。(float、絶対位置、clearfixを使用)
全記事表示にjQueryを用いるスクリプト採用。
あとはFC2のjavascript読み込みがどれだけ速いかにかかっている。
（2008.02.12 15:55）
800×600ドットの時、サイドバー（履歴とか）を出さない限り横スクロールバーが出ないようにした。
左マージンが2倍になっていたので修正した。
ロゴ、フッター、ナビゲーションの画像を作成した。
アイコンを選定した。（Famfamiconsのアイコンを使用）
プラグイン枠に色を付けた。
（2008.02.11 20:15）
ナビゲーションタブ実装。
IE6未満でのmax-width、min-widthに対応（IE独自のexpressionを使用）
（2008.02.11 0:50）
レイアウトのCSS作成完了。
CSSオフ時にプラグインよりも先に記事の内容を表示するようにした。
{
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
}
filter: alpha(opacity=25);
IE独自の設定。opacity=透明度で、0が完全に透明の状態。設定値は0以上100以下の範囲
-moz-opacity:0.25;
Mozilla系（Firefox）独自の設定。0が完全に透明。設定値は0以上1以下の範囲
opacity:0.25;
CSS3で準拠されている設定。OperaとSafariで設定可能。設定値は0以上1以下の範囲
これを使ってみる。（予定はプラグインの枠で使うつもり）
背景が暗めなので、明るめのロゴ。（現行のものとフォント変えてないけどｗ）
Photoshop Elementsで
１．グラデーションで二色作る
２．横書き文字マスクツールで文字を書く
３．文字のレイヤーをラスタライズする
４．３．のレイヤーをコピーして垂直方向に反転させる
５．新しくレイヤーを作る
６．５．のレイヤーに”描画色から透明へ”のグラデーションを描く
７．６．のレイヤーのサムネイルをCtrlと同時に押す
８．７．のレイヤーを右クリックで削除
９．選択領域が残っているはずなのでDeleteキーで削除
という方法で反転文字のできあがり。CSはもっと簡単にできるんだけどねぇ。
（クリックで拡大）
ロゴの右側の模様はフリーのブラシをもらってきて作った。
ナビゲーションはこれから作る。
Thickboxもいいなぁとか考えてしまった。rel属性を使えるところが自分にとっての一番の利点。
Shadowboxも結構使い勝手良さそう。
一番の問題はFC2側からの応答速度。遅いと今回のテンプレ変更の意味がない。
追加点１
記事繰り返し部分の日付表示方法。
今流行ってる日めくりカレンダーっぽいやつ。
追加点２
記事繰り返し部分のカテゴリー等の表示方法。
日付 記事タイトル
カテゴリー | TB | CM |
↑こんな感じ。
変更点なし。
1．レイアウト変更
やっぱり右側に二つもプラグイン枠持ってくるとどうも変な感じがするから、挟む形にする。
| ブログタイトル | ||
| プラグイン1 | 記事繰り返し | プラグイン2 |
| 著作権表示 |
俗に言う「Holy grail」というスタイル。普通のブログって感じ。
2.画像表示方法
http://www.cabel.name/draft1/2008/02/fancyzoom-10.html
ここのスクリプトを使うことにした。
・IE6・7、Firefox、Safari、Operaに対応。
Operaは確認されたと書いてないが、9.5でデモ動かして普通に動いたので。
・いちいち画像のアンカーリンクにIDを記述しないで済む。
3.Favicon変更
透過GIFからicoファイルに変換するつもり。（もしくは8ビット透過PNGから。）
4.ブログパーツとか…
ブログパーツを追加しようかと。何もないのは逆に寂しい。
カウンターは復活させようかな…。ちなみにこの記事執筆時点で58000アクセス
* {
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
}
これで十分らしいのだけど、最近はこんなのもある。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
※meyerweb.comより引用
要は個別に初期化してるということ。
IEが対応していないcontentやquotesにまで初期化しています。
これを使う理由は表示速度を上げるため。*（全ての要素）に対して適応しない分速いのです。
あとfloatに関するバグと空ボックスに関するバグを取り除くclearfixの初期化。
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
スタイルシートをめぐる冒険: clearfixの決定版を作る −モダンブラウザ編−のCASE10より勝手に引用
CASE11（contentに透過GIFで透明の1×1の画像を用いる）の方がいいみたいだからそうするかもしれない。
FirefoxとOperaの縦スクロールが出たりでなかったりするのを強制的に出させるために
html {
height: 100%;
margin-bottom: 1px;
}
を適応。
上下の付き文字のバグとかはどうしようか…
sup,sub { vertical-align: baseline;
position: relative;
}
sup { top: -4px }
sub { top: 4px }
reset.css あるいは init.css によるブラウザのスタイルシートの初期化 (Port80)より勝手に引用
*を使った方が内容は少ないのにね。
下の方の色のトーン。白地に黒よりも黒地に白の方が読みづらい理由→重いから。
配色のルールと注意点 - Web配色の見本
同じようなことがかかれている
無料区間 全国初の白地に緑文字 山陰道新標識
高速道路の標識
BlurtIt: 非常口は、緑色と白色があるのは何故ですか？
安全意識。
道路標識の色について 白地に青文字を見ました。 - Yahoo!知恵袋
いつもは青地に白。どちらかというと青地に白のほうが見やすい。
色の三原色
明るめの色の背景に明るい色の文字は眼がチカチカする
ウェブのテキストがもっとも読みやすい文字色と背景色は？ | POP*POP
薄い黄色の背景に緑の文字の時Times New Romanは見やすい
色の組み合わせチェック - 読みやすい前景色と背景色
読みやすさを数値化してくれる。
| タイトル・ブログ説明 ナビゲーション | → | 検索 |
| 本文繰り返し | プラグイン1 | プラグイン2 |
| 著作権表示 | → | → |
とりあえず現在の予定。
フォントサイズは82%、行の高さ（line-height）は1.37で指定します。
画像は
で指定します。img {
float: left;
margin: 0 10px 0 0;
border: 1px solid #ccc;
padding: 2px;
}
日本語言うと左側に配置して、外側の右の余白が10px、内側の余白が2px。灰色の線で囲まれている。
引用部分は…考え中なのだが、
blockquote要素の背景画像を一つ用意してパディングを設定して、線で囲むといい感じになりそうな気がして…
こんな感じかな…。blockquote{
background:#fff url("なんか表示するもの") left top;
padding: 画像の高さ 2px 2px 2px;
border:dotted 1px 5px 1px 5px #000;
}
一番考えなきゃいけないのは記事繰り返し部分。
タイトル、投稿日時、コメント数、トラックバック数、カテゴリー、タグ、ブックマーク、記事内容、追記内容…
これを一つにまとめるのだから。でもタグはトップページに表示しなくても良さそうだな。
背景色を変えても対応できるようにするのはかなり面倒。
透過GIFか透過PNGを使う必要があるんですよね。
画像ファイルで透過処理が出来るのはGIFかPNGだけなんですよ。
透過PNGは2種類あって、「PNG-8」というものと「PNG-24」というものがある。決定的に二つが違うのは色数。「PNG-8」は256色、「PNG-24」は1677万色。桁外れですね。
現在主流のInternet Explorer6（以下IE6）では「PNG-24」は対応されていない。実際使ってみると灰色の背景色が後ろに表示されてしまう。これを対処するにはこのサイトで公開されているようなJavascriptを用いて使うしかないのである。
「透過GIFでいいのでは？」という意見もあるだろう。だが、透過GIFは256色まででしか表現できないのだ。
256色と1677万色の違いはかなりでかいですよ。OSの画面の壁紙なんかは256色では色が反転してしまったりしまうんです。
この辺で色の話は終わりにしましょう。とにかく、今回は透過PNGは使用しません。
実装予定リスト
1.ナビゲーションタブ
2.記事開閉スクリプト
3.Lightbox
1.タイトルの下に実装予定。一番上はCSS外したときにナビゲーションが一番上に来てしまうからダメだ。
2.今回のテンプレートの失敗点。一記事だけをトップに表示するというのはたまに見に来る人が見にくい。
3.Yahoo!の画像検索で用いられていた気が。いちいち新しいウインドウで表示する手間を省くため。
タイトル（画像・テキスト） | （未定） | （未定） |
| 記事繰り返しゾーン | プラグイン1 | プラグイン2 |
※2 テンプレ作成終了時まで続けます
まず、枠のタイプを決めました。3カラムです。
（ここでのカラムというのは行組のことです。記事の行とプラグインの行二つです。）
| 記事繰り返し枠 | プラグイン1 | プラグイン2 |
まぁこんなところでしょうかね。上の図だと幅がバラバラですね。
記事の幅は可変。プラグインの幅は200pxぐらいで固定にする予定。
tableで組むと重くなったりするのでdivを使って組みます。
割とニュースサイトとかだと固定にしてるが、現状から言って固定だと横にお気に入りだの履歴だのを出すとすぐに横スクロールバーが出る。
（固定というとpxとかmmなんかで設定してることを指す。）
可変にするには%を使うんですね。そうすると基本的にはどんな幅の画面でもスクロールバーは出ません。
100%を超える範囲を指定したら当然出ますけど。
名前通り、カーソルを変更するんですよ。
で、urlを指定することが出来るんですよね、これが。
cursor: url(cursorファイルまでのアドレス);
でやるんですけど、問題点がある。
・IE6以上でしか使えない。
・Windowsでしか使えない。
・cur、aniの拡張子のみ。
はっきり言って、必要ないなｗ
ちなみにJavascriptだと
Object.style.cursor = "url(uri)"
になりますね。これもWinIE6のみ。
画像でカーソルを変更できればいいのにな。
「仮タグ挿入スクリプト」という代物なんですけど、
なんかうまく動いてくれない。
FirefoxのFirebug使って調べてみると、ボタンを押してエラー発生。
最初の行のdocument…で処理が止まっている。
いったいどういう訳だろうか…。
もしかして定義タグでくくっているから？
RSS1.0のリンク