今回から小見出しつけてみた。こうして項目は増える、っと。ダイアリーのデザインテーマをしっかり作る気で作るのは初めてかも（これまでも何度か改造をした事があるけれど）。
なんにも見ないでサムネイルを起こしててもラチがあかないので、はてなダイアリーテーマのデザイン的母体である「tDiary」のサイトでテーマギャラリーを眺める。
http://www.tdiary.org/20021001.html
さて。Firefoxのデザイナー御用達ツールバー、 Web Developer君の出番でござるよ。にんにん。
http://www.infoaxia.com/tools/webdeveloper/
気になったCSSの使い方があればメモしていこう。今回は線とか配色に着目したい。
今回はハンドクラフト的、手書き的シンプルさ、線で構成するのが基本なので、シンプル一番。
いくつか選んでみた。
- 文字サイズもいいし、落ち着いてみられる配置。もう少し左右に余白取るかも。
- 輪郭に強い線を入れてないのがいい。この配色は暖かみがある。background-color:#FFFFF0;border:solid 1px;border-color: #FFFFF0 #999 #999 #FFFFF0;とそれから本文はcolor:#333;で100%Blackじゃないのだ。これが活字体なのに鉛筆っぽいんだな。鉛筆って黒じゃなくてグレイだしね。
- これも割と見かける。タイトルの控えめなグラフィックが面白いが、主張しなさ過ぎな気もしないでない。全体を茶色にアレンジしたらどうなるか想像してみたら、うるさくなりそうな気がした。日付線の背景の盛り上がってる部分がクール。
- うおっと。先に原稿用紙ネタでお作りの方が！ なるほど、本文にマス目を入れて文字配置を合わせると、フォントサイズとの絡みで字間が空きすぎてしまって読みにくくなる。短くて済む詩・短歌などのブログには向いているいるかもしれない。しかし、長文の場合は字間は多少ベタ詰め気味にして、行間をしっかり調整しないと読みにくい。あと、考えてみれば人によって表示文字サイズを変更してるかも（コレを言い出すときりがないけど）。茶色の罫線は 1px solid #c9ad80、背景画像は
で実現。なるほど、この形だけで行けるんですね！ すごい。本文はやはり黒100%を避けて#333、この方が目に優しい。それから、コメント部などの赤はc00。f00よりも落ち着きがある。MAXのカラーを使わない感覚って、勉強になる。
- うおっと。先に原稿用紙ネタでお作りの方が！ なるほど、本文にマス目を入れて文字配置を合わせると、フォントサイズとの絡みで字間が空きすぎてしまって読みにくくなる。短くて済む詩・短歌などのブログには向いているいるかもしれない。しかし、長文の場合は字間は多少ベタ詰め気味にして、行間をしっかり調整しないと読みにくい。あと、考えてみれば人によって表示文字サイズを変更してるかも（コレを言い出すときりがないけど）。茶色の罫線は 1px solid #c9ad80、背景画像は
- 今回、ヘッダに画像を置く気はしないのだけれど、非常に迫力がある構図で見入ってしまった。左右に余白を大きめにとって、中央に記事を置くデザインは参考になる。
- さっきのtour-de-hokkaidoとは逆に、画面一杯に使う例。といっても、左右に余白はちゃんとある。カレンダーの下にワンポイントの青線（#63f）が入っているが、こういうのは面白い。強いオレンジは#f63。色コードの位の入れ替えで色の強みに統一性を持たせているようで、こういう方法もあるという事で。
- これは線画アイコンで機能を説明している面白さがある。ピクトグラムは個人的にも面白いと思っているが、こういう使い方もあるわけだ。
- 線ではなく、面で配色したデザイン。狭くスペースを使っていても、広々として見える効果があるみたい。
- 思い切って線をはみ出させる。配色がシンプルだけど、今度は線で見せると。
- これは前にどこかでお見かけして、タイトルが背景に回っている面白さがあると思った。z-indexの工夫のようだ。CSSって自在だね。
- 輪郭の太い線と配色で、独特の可愛らしさを醸し出す。原稿用紙＝小学生的子どもっぽさ、を目指すなら参考にしていいデザイン。
- やりたいデザインにテイストが似ている。配色を含めてじっくり研究したいテーマ。本文color:#755447;の茶色。また、border-style:solid;でありながら、2pxの太さと四辺の配色を工夫する事によって見出しを立体に。ブラウザによって立体エッジの見え方が異なる点はこれで簡単にカバーできるし、配色で穏やかにも、派手にもできるだろう。
- 無印良品みたい。こういう風に、色合いが社会的に意味を持っている場合、それをパクるのも一つのデザイン手段。ただ、左右に余白は入れた方がいいだろう。
- 本文左端のドットの打ち方に注目！ さわやかなアクセント。
- ブログに対する象徴的画像があって、あとは黒でまとめてクールに見せている。見せ方はとってもカッコいいけど、目にはイマイチ優しくないかも？
- これを見ていて、トップに様々な原稿用紙とか鉛筆とかの写真を入れて、っていうのもアリかなあと。色々見ていて、せっかく作るのに線だけで見せるシンプルなデザインではつまらないという気もして来た。控えめな大きさでうまく使えば……。
- にゃんこです、猫ちゃんです。猫好き御用達……だけど、輪郭の消し方は参考になる？
- こういうふうに、原稿用紙のマス目を両端にだけ入れてアクセントにするのもいいかもしれない。
- 全体的な構図や背景画像の使い方がやりたい事に近い気がする。
- フレッシュ、さわやかな感じ。余白をもっととるとこの感じが生きると思う。
- 見出しを矢印で見せるのは非常に面白いアイデア。タイトルに視線を誘導する、という意味では、小道具を大胆に使うのも一つの方法だ。
- 紙に何か描く、というイメージ、かな。ちょっと光が強すぎるけど。
ここまでで18ページまで見た。ちょっと休憩！
- [:image]
- -
- [:image]
- -
- [:image]
- -
- [:image]
- -
- [:image]
- -
