フォントとリンク色のカスタマイズ

　週末はずっと雨だったので、家に引きこもり状態でCSSをいじってカスタマイズしてみたんですが、ちょっとオシャレに、そして読みやすくなったでしょうか…？

 

フォントのカスタマイズ

　以前 イメージチェンジした時 も紹介させていただいた、もそさんのブログ 今日の覚え書き はご存知の方も多いと思いますが、デザインをリニューアルされてさらに素敵になったオシャレなサイトなので、オシャレなブログにしたい！という方はぜひ覗いてみてください。

　スタイルシートいじりの覚え書き を拝見して、もそさんがお気に入りフォントの組み合わせがとてもオシャレだったので、わたしも真似して“Tahoma & MS UI Gothic” に変えてみました。

　このフォントはどちらかと言うと女性向きだと思いますが、文章を優しい感じに見せてくれるところが気に入りました。フォントを変えるだけでもずいぶんと印象が違って見えるものですね。

リンク色のカスタマイズ

　デザイン的にリンクの下線はないほうが見た目はスッキリしますが、アクセシビリティ の低下にも繋がりますので、こちらの記事を読んで悩んだ結果、今回はサイドバーの下線だけ消すことにしました。

オトコのキモチ：リンクの下線を消したいって？
リンク部のテキスト装飾を変更するときには，そこがリンクであることが一目でわかるようにしておくことが重要。強調部や見出しもフォント色を指定したり，テキスト装飾をした場合，これらと区別がつけられること。リンクであることが読みとれるような何かがあるとなおよい。
　たとえば，下線はそのひとつ。だから無闇にとってしまうことはすすめられない。

　以前は下線付きで、#FF44F4をリンク色に指定していましたが、普段は不真面目なこの人→（*´・３・）にコメント欄でいいことを教えてもらいました。

前景色と背景色の明度差と色差も重要なポイント
　（明度差は１２５以上、色差は５００以上）

ということらしいので、Color Contrast Checker でさっそくチェックしてみると、色覚異常の見え方ではテキストと同じ黒に見えることが判明。わたしにはピンクに見えても、この色だと下線がなければそこがリンクだとわかりません。色々悩んだ結果、（シャレではなく）リンク色を #FF3399 にしました。

背景色とリンク色 - 坂本邦夫の『基礎からわかるホームページの配色』
　こちらのサイトで詳しく述べられているように、リンクに下線があることに越したことはありませんが、見栄えをスッキリさせたいという場合や、背景色やテキストの色を変える時には、色覚障害者や白内障の方への配慮も頭に入れておきたいと思いました。

　すべての人が満足できるデザインというのは無理ですが、できるだけ多くの訪問者に優しいデザインを心掛けたいですね。

関連：背景色と文字色の見やすさをチェック
カスタマイズに便利なおすすめツールです。

CLOSE ↑

CCSのカスタマイズメモ

　ブログダイエットからサイドバーをいじっていたら、デザインもリニューアルしたくなったので、背景やフォントとリンク色のカスタマイズをするうち、すっかりスタイルシートいじりにハマってしまいました。
　

---

■今回の変更点

・背景を黒から明るいグレー系に変更
・無駄にエロいバナーを外して、ヘッダをシンプルに
（Yahoo!BLOGS時代から使っていたので愛着があるんですが…）
・引用部分の色をピンクからグレーに
・フッタにCopyrightを追加


今回の背景画像は、Background Image Makerを使用しました。
このツールを作った方、はてなのエンジニアだったんですね…。

川o・-・）＜2nd life - Web2.0 アプリケーションライク な背景画像を生成する
偉い人ありがとうございます！

素材屋さんが配布しているモノや、自分で作ったモノを使うのもいいですが、
このツールが優れているのは、ブラウザ上でパッパと出来ちゃう上に、
作成された画像のURLを編集画面に入れてプレビューできるので、
イメージがつかみやすく、短時間でいろんなパターンを作れる点です。

作品例：

上のような画像が出来るので、イメージが決まったら画像を保存、
自分のサーバにアップして、URLをスタイルシートのbackgroundに書き込めばOK。
簡単にイメージチェンジができるし、アイデア次第でいろいろ使えそうですね。
ついでなのではてブのデザインも変えますた。



以下、自分用メモ

「デザイン」→「スタイルシート」

/*背景画像（全体）*/
body {
background-image : url(http://〜);
}

/*バナー（ヘッダ）*/
#banner {
text-align : left;
height : 125px;
font-family : Tahoma, Verdana;
margin : 0 0 15px;
background-image : url(http://〜);
background-repeat : no-repeat;
}

/*引用部分*/
blockquote {
width : 400px;
margin : auto auto auto 15px;
padding : 7px;
border : 1px solid #ccc;
background-color : #eee;
}

/*Copyright（フッタ）*/
まず「コンテンツ」→「自由形式」のメインページを選んで、
自由入力欄に以下を追加
<span class="address">Copyright © 2005-2006 sweetlove</span>

.address {
font-size : 8pt;
font-family : Tahoma, Verdana;
font-style : normal;
margin : 5px 0;
padding : 3px;
border : 1px outset #eeddff;
text-align : center;
}

他のテンプレで使用する場合は数字をテキトーに変えてください。

CLOSE ↑

テンプレ派とカスタマイズ派

　誰でも気軽に始められるのがブログのいいところなんですが、現在ブログをしてる人は、テンプレートをそのまま使っていますか？

• テンプレートが気に入ってそのサービスを選ぶ人
• 既存のデザインや機能が不満で自分でカスタマイズしたい人

さて、あなたはどっち

他人の不幸は蜜の味：引越完了報告＆seesaaブログの良いところ
1. ろくなテンプレートがない
2. スタイルシートとかがいじりやすい

　LSTYさんの記事を読んでなるほどなぁ…と思ったんですが seesaa はテンプレートが少ないし、デザインもいまいち。
だからこそ、いじりたい欲求が出てくるというワケか…。

seesaa を選んだ理由

　わたしは Yahoo!ブログから Seesaa に引越して来たんですが、Yahoo!ブログは HTML や CSS によるデザインのカスタマイズができないため、無料サービスの中ではカスタマイズの自由度が高い seesaa を選びました。

アクセス解析など機能面でも充実していると思います。
ただ、再構築がちょっと面倒なんですけどね…。

カスタマイズするメリット

　これからブログを始めてみようという人も、現在ブログをやっている方も、他の人とはちょっと違うかっこいいデザインに憧れますよね。
そこでこんなサービスを発見。

>> ブログ別にみるカスタマイズの違い
　リンク先のブログでは、そのサービスを選ぶ人やブログの特徴などを紹介していますが、プロのWEBデザイナーさんが、テンプレートをカスタマイズをしてくれるそうです。
もちろん、有料（34,800円）ですが…。

　お値段はそんなに高くないと思いますが、わたしはこれからデザインや CSS の勉強をしていきたいので、そのお金を書籍の購入などにあてたいと思います。自分では面倒だし無理という人は、プロのデザイナーにお任せしてみては？
（ひそかにYahoo!ブログのカスタマイズが気になります。）

　企業のブログや芸能人などは、宣伝効果やイメージが大切なので、デザインもSEO対策もプロに任せるのは仕方ないんでしょうけど、何よりカスタマイズは楽しい！
こんな楽しいことを人まかせにするなんてもったいない…と思っちゃうんです。

　わたしが考えるカスタマイズの一番のメリットは、自分が手を加えることで便利になったり、自分好みのブログになるだけでなく、「自分のブログが好きになる」ということだと思います。
…自己満足だけどね。

CLOSE ↑

相談のあとのありがとう

〜第2章〜告白
7.相談のあとのありがとう
　

---

さて、今日から第2章です。

第1章の　「恋上手になる3つの法則」　で質問上手は恋上手という話をしましたが、
人に相談するということもコミュニケーションのひとつだと考えます。

“ＡさんがＢさんに相談しＢさんがそれに答え、それに対してもう一度ＡさんがＢさんにひとこと返す”
これができて、はじめてコミュニケーションは完結します。

当たり前のようなことですが、ブログや掲示板などを見ていると、
相談しっぱなしで　「ありがとう」　のひとことが言えない人が多いと感じます。

恋愛関係においても、相談を持ちかけるというのは接近方法として効果的な方法ですが、一方的な相談ではふたりの距離はほんとうの意味で近づきません。

相談に乗ってもらったら　「ありがとう。あなたのおかげで助かった」　とか
「その一言で元気が出たよ」　と感謝の気持ちを伝えましょう。

ここで肝心な一番のポイントは、相談することではなく、
相談に乗ってもらう相手に好意を示すことです。
期待した答えじゃなかったとしても怒ってはいけませんよ。


追記：今回は真面目に書いてみますた。（笑）

狙っている相手がいたらぜひ、お試しください。（今日はgoogle風味）
恋愛相談は、不備日報: ちんこさんの漢の恋愛相談室へ

>>恋のかけひき

| 恋愛 | コミュニケーション |

CLOSE ↑

ブラウザによる見え方の違いをチェック

　CSS をいじりだすと気になるのが、ブラウザによる見え方の違い。
このブログでは訪問者の約65％が Internet Explorer ユーザですが、最近は Firefox など Mozilla系や、Opera・Safariといったブラウザの方も増えているようです。

---

　わたしはWinXP+スレイプニルという環境で更新作業をすることが多いのですが、はてなツールバーがスレイプニルでは使えないので、最近は Firefox をメインブラウザとして使用しています。（もうすっかりはてなっ子）

　CSS をいじったり記事をアップした後、スレイプニルで見た時は思ったとおりのデザインだったのに、あとで Firefox で見てみるとレイアウトが崩れていてショック！なんてことがよくあります。レイアウトが多少崩れても読めればいいのですが、なるべくならブラウザに左右されないデザインにしたいものです。

　自分が使用しているブラウザだけでなく他のひとにはどう見えているのか、わざわざいろんなブラウザを用意しなくても、URL を入れるだけで簡単にチェックできるサイトがありますので、1度確認してみてはいかがでしょうか。

どちらも URL を入れてボタンを押すだけ。
▼このようなサムネイルができます。

　■Browsershots
　結果はこんな感じにスクリーンショットで表示されます。
　しばらく時間がかかることもあります。

　■SafariTest
　Safari での見え方をチェックできるサイト
　わたしのブログはこんな感じ（クリックで拡大）


safari での見え方が気になっていたんですが、大きな崩れがなくて安心しました。
それにしても、Mac のフォントはきれいだなぁ…。

追記：Intel iMac欲しいよ〜！→ 買っちゃった！

CLOSE ↑

BlogPeople

お気に入りや役立つサイトのリンク集です。
これまでサイドバーに最新20件表示していたのですが、無駄に長くなるので記事ページに移しました。
24時間以内に更新されたサイトにはマークが出ます。

■BLOG PEOPLE（更新順）


List Me! by BlogPeople

参考：blog*citron | BlogPeopleのカスタマイズ
カテゴリ別に随時、追加・修正していきます。

CLOSE ↑

新サービス「TagClick」を導入

　2006年4月18日に始まったばかりの、新サービス　「TagClick」　を導入してみました。TagClick とは、記事に「タグ」を付けてグループ分けと検索機能をプラスする無料サービスです。 また、サイドバーなどにタグクラウドと呼ばれるタグ検索用のパーツを設置できます。

---

通常のブログでは、記事をひとつのカテゴリにしか入れられませんが、
複数のカテゴリに共通する内容や、例えば「BLOG」のカテゴリの中を
さらに「文章」とか「トラックバック」など分類したいという時に使うと便利です。

サイドバーのタグ検索パネルのタグをクリックすると、ポップアップウィンドウが現われます。
タイトルと概要を見て、読みたい記事を探せるので読者にも便利。
（スレイプニルではちょっと不便かも…。）

これまではテクノラティのタグ検索を利用していましたが、
TagClick はブックマークレットや、自動で登録できる機能がありタグ付けがとても楽です。

はてなブックマークでセルフブックマーク（自分の記事を自分でブックマーク）するのは少し抵抗がありますが、TagClickなら自分のブログの記事管理にも役立つと思います。
どうぞご利用ください。（はてなのサービスじゃないけど）

タグ検索パネルが設置できる無料ブログサービス

• Livedoor blog
• JUGEM
• seesaa blog
• ヤプログ
• FC2ブログ
• MovableType

詳しくはヘルプをご覧ください。

CLOSE ↑

レイアウト5つの法則「C.R.A.P.S」

　How C.R.A.P is Your Site Design?(Vitamin Features)というデザインについてまとめた海外の記事を、日本語で解説されている記事をみつけました。

C.R.A.P : ウェブデザインを検討する上での４つの観点（PamGau）
「C.R.A.P」の各々は、「対照(Contrast)」・「反復(Repetition)」・「位置あわせ(Alignment)」・「近接配置(Proximity)」を指します。

　これらの４つのポイントをわかりやすく解説されていましたが、レイアウトの目的は「情報の視覚化」だと考えます。

以前のブログで書いたものの順番を入れ替えましたが、
４つの頭文字「C.R.A.P」にひとつプラスして、意識しているポイントをわたしも便乗して書いてみます。


■第１の法則　「メリハリをつける」（Contrast）
ズバリ一点豪華主義。
「ココを見てほしい！」という箇所を強調して視線を誘導します。
太字や色の使いすぎには注意。

■第２の法則　「繰り返す」（Repetition）
ページごとにレイアウトやボタンの位置が変わると迷子になりやすい。
繰り返しは理解されやすく、安心感と信頼性が生まれます。

■第３の法則　「揃える」（Alignment）
何はともあれ左揃え！
写真や詩など例外もありますが、動線にバラつきが出ると目が疲れます。
個人的な好みもあると思いますが、左揃えが一番リスクが少なく見やすいとわたしは思います。

■第４の法則　「グループ化」（Proximity）
探している情報がどこにあるのかひと目でわかるように、
グループごとにカテゴリやタグでまとめます。

■第5の法則　「立体化」（Solid）
スタイルシートなどで画像や文字にちょっと影を落とすだけで、
立体的でオシャレに見えます。

以上、５つの頭文字をとって「C.R.A.P.S」　クラップス…？


もうひとつ参考になったのは、ウェブページを見る目の動きは「F」パターンという記事。
人の目の動きは「左から右・上から下」で、わたしは「Z」だと思っていたんですが、こちらの記事の図を見ると、ちゃんと「F」になってる！

「ここを見て欲しい」というものは、右よりも左に置く方が効果的なんだそうです。
しかし、中には「S」とか「L」とか「I」という人もいるんじゃないかなぁ…と思っていたら、はてなダイアリーを見る目の動きは「＠」パターン らしいですよ。
やっぱりクネクネが好きなんですね。（笑）


追記：ブクマのコメント見たら、「CRAP」って糞って意味なんですね…。
kanimasterさんありがとう！

CLOSE ↑

タイトル変更のお知らせ

突然ですが、ブログタイトルを変更いたしました。

「LOVE PARADISE」をググると 出会い系サイトやあやしいサイトがたくさん出てくるので、読者の方への配慮から……というのは建て前で単に飽きてきたからです。

直訳すると、愛はデザイン！（？）

わたしが考えるデザインとは、絵を書いたり字を書くことだけじゃなく

• 伝えたいことを見えるカタチにすること
• そしてそれを発想すること

　タイトルを変えたからといって内容が良くなるというわけではありませんが、いいデザインにするためには「愛」が必要ですし、愛も「デザイン」するようにいいカタチを作っていけたらと思います。

　これからも恋愛やデザインに関する情報をお届けしていきたいと思いますので、今後とも「*LOVE IS DESIGN*」をどうぞよろしくお願いします。

おすすめ記事の表示はオススメ！

「おすすめ記事」の意味と効果を考えてみたい
（BLOG STATION）を読んで、おすすめ記事の表示について考えてみました。



　これまでは、ブログのトップに自薦のエントリーをpickupしたり、INDEXを作ったりしていましたが、最近ははてなブックマークでクリップされたエントリーの上位５本を、おすすめ（看板記事）として表示しています。
その理由を書いていきたいと思います。

---

■おすすめ記事を表示させようと思ったきっかけ

一番の理由は、初めての訪問者にブログの特色を知ってもらうため。
下の記事を見て、コレいいなと思ってはてなダイアリー（+LOVE 2.0+）で始めたのがきっかけです。
kokepiの日記 - はてなダイアリ用「よくアクセスしてもらったエントリ」の表示方法
RSSではいてくれるので、自分でリンクを挿入したり、入れ替えの手間がかからない点も魅力だと思います。
※seesaaの場合は、デザイン→コンテンツ→新しいコンテンツの追加（RSS取得）

■おすすめ記事の意味

「はてブの被クリップ数が多い＝関心が高い」と考えると、「自分が読んでもらいたい記事≠読者が読みたい記事」だと言えます。
自薦のエントリーをpicuupするよりも、人に推薦してもらったエントリーのほうが、ブログの特色がわかりやすいのではないかと思います。

■おすすめ記事の効果は？

LSTYさんが「また当たり前のことを書いてしまった。」と言っていましたが、「読者はめんどくさがり」というのはおっしゃる通りだと思います。

書き手の視点よりも、自分がどういう読み方をしているかという視点で捉えると、ヒントになるのでは？
記事単位で読まれるブログにおいて、常連さん以外でTOPページを見てくれる人は少ないのではないでしょうか。そもそもわたし自身、他人のブログのTOPページなどほとんど見ませんし、TOPページという概念もブログではナンセンスなのかもしれません。

■表示方法の工夫と注意点

「トップに大量のリンクが並んでいると、最新記事が下のほうに追いやられてしまうのではないか？」とkenさんがおっしゃるように、スクロールしないと本文が読めないようなページや、どこからがエントリーなのかわからないようなページ構成は、わたしも読む気が失せてしまいます。

ひとつのエントリーを読んだあと、ページTOPやHOMEに戻ることさえ面倒な人は、すぐ目の前に興味のあるタイトルやカテゴリがあったほうが、他の記事も読んでみようと思うのではないでしょうか。

　これらを踏まえて、カテゴリページにはカテゴリ内のタイトル一覧を表示して、「おすすめ記事」はブログのトップよりも、記事ページのほうが効果的（？）ではないかと考え、全ページのエントリーの下へ変更してみました。
他の方がどういう工夫をされているのか、わたしもとても興味深いです。

CLOSE ↑