XserverXserverSupportDomainDomainSupportMany-KingMany-King Support

カテゴリー:「ウェブデザイン」に関するアーカイブ

本サイトで採用しているウェブデザインに関する投稿記事を総括。

色彩(カラーパレット)に関する参考サイト

ウェブサイトやブログにおいて、色の組み合せというのは本当に難しいものです(少なくとも私にとっては難しい・・・)。

こうした色の選定でとっても参考になる(参考にしている)サイトをご紹介しましょう。といっても、有名なサイトのようですが、既にご存知の方々がほとんどでしょうけど、自分用の覚書として!

COLOURlovers
もうこのサイト、私のような色に関して素人にとっては、本当に素晴らしいサイトです。どの色とどの色を組み合わせるとしっくりくるのか・・・いったいいくつの色の組み合わせが紹介されているのでしょうか。まったく色に無関心でも、COLOURlovers で紹介されている色の組み合わせを利用することで、とってもしっくりくるサイトやドキュメントが作成できますよ!

Color Palette Generator
いったいどうやって、こうしたサイトを構築できるのでしょうか。利用したい写真やイメージを指定すると、それに見合った Color Palette を推奨してくれます。例えば、ヘッダーやロゴを作成して、ブログ全体の色を決定する、なんていう手順が良いのでしょうね。素晴らしい色の組み合わせをヘッダーやロゴに合わせて選定することができます。

FOTOSEARCH
ちょっとカラーパレットとは違いますが、このサイトいったいどれ位の写真やイラスト、そして動画が保存されているのでしょう。とにかく凄い数です。上記のような Color Palette Generator に好きな写真やイラストを指定すれば、お好きな色の組み合わせが即座に設定できます。

上記のサイトだけでも素人作成のサイトから脱出できそうです。本サイトもちょっと色の組み合わせを再考しようかな~

「caramel*vanilla::サイトの配色を決める時に使えるツール」によると、上記のような「カラースキーム生成ツール」はWeb上にたくさんあるそうです。ビックリ!

CSS の最初に設定すること!

いつもは、既存のテンプレートを使うので、スタイルシートを自分で最初から設定することは無いのですが、それでも改訂を実施していくと、どこで何を設定して、どこを改訂したのかが解らなくなってしまいます。そこで、自分なりのルールを作ろうと考えてはいるのですが・・・

まずは、Body に関する設定ですが、とっても参考になる投稿記事を発見!「DesignWalker::CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント」という記事がそれですが、まったくそのまま適用できますね。私は、ちなみに次のように設定しています。

body {
margin:0; padding:0;
line-height:1.4;
background:#666666;
color:#333333; font-family:Arial, sans-serif;
font-size:10pt;
}

1、2行目の margin、padding、line-height は、上記の投稿記事の推薦通り!ブラウザごとに違っている余白を無くす為に margin と padding を “0″ に設定し、行間設定は、モニターで人間が最も読み易いそうである 1.4 を設定(これは、上記の投稿記事を読むまで知りませんでした・・・)。更に、最近は、3行目に background を設定しておくようにしています。私の場合、ブラウザ全体に広がるサイトページがあまり好きではないので、background の色、またはイメージを設定し、background にも拘って!?います。

4、5行目でフォントに関する設定。通常は、色(color)、種類(font-family)、大きさ(font-size)を設定します。フォントの大きさは、「固定しないこと」というのが鉄則のようですが、私は自分勝手にいつも 10pt に設定してしまいます。実は、自分が最も好きなサイズなもんでして・・・そういう意味では、自分勝手な設定で閲覧者を重視していないサイト、と言えるかもしれません。

そうそう!上記から、できるだけ前半部分に形に関するスタイルの設定(margin、padding、line-height、background、border 等)、次にフォント等文章や文字に対する装飾に関する記述という自分なりのルールを決めています。

と、ちょっとかっこいい事を言っていますが・・・実践が伴わない・・・

上記の投稿記事をベースに、とっても興味深い記事、「CSS Happy Life::bodyに設定しておくと便利な3つのポイントとおまけ」を発見。こちらでは、background を記述していますね!さらに CSS 記述に関する詳細な説明もあるので参考になります!

WordPress のテーマ選定

WordPress といえば、そのテーマが豊富で、選択に迷ってしまうことが多々あります。私は、新しいサイト公開に当たって、新しいテーマを選定しようと考えましたが、やはり文章主体になるだろうし、シンプルかつ改良がし易いだろうと考えて、「Cha’s Bar」で適用した Sunaryo Hadi 氏が提供している TypoXP を適用!

TypoXP の最新バージョンは、2.0 でしたが、私は TypoXP theme 1.0.3 を適用することにしました。2.0 は、最新版であるがゆえに、ちょっと推奨される plugin が多くなっていたので、違和感があったのと、TypoXP 1.0.3 で充分高機能!?のブログが公開できる、と信じていましたので。

改良は、以前のブログ「Cha’s Bar」をできるだけ引き継いでいこうと考えています。

Page 3 of 3«123