Broadband Watch logo
バックナンバー

■ 第14回（最終回）：タグ編集が楽になる「HTMLエディター」登場
[2005/06/16]
■ 第13回：新機能「おえかきツール」を使ってみよう
[2005/06/09]
■ 第12回：Amazonアソシエイトを使ってみよう
[2005/05/26]
■ 第11回：アクセス解析を活用しよう
[2005/05/19]
■ 第10回：「gooブログアドバンス」を使ってみよう
[2005/05/12]
■ 第9回：CSS編集でオリジナルデザインに挑戦 その2
[2005/04/28]
■ 第8回：CSS編集でオリジナルデザインに挑戦
[2005/04/21]
■ 第7回：goo RSSリーダーでブログを読もう
[2005/04/14]
■ 第6回：携帯電話で「モブログ」しよう！
[2005/04/07]
■ 第5回：コメント、トラックバックでコミュニケーション
[2005/03/24]
■ 第4回：gooでネタ探し＆トラックバックの使い方
[2005/03/17]
■ 第3回：写真入りブログを作ろう
[2005/03/10]
■ 第2回：記事を書いてみよう
[2005/03/03]
■ 第1回：gooブログはどんなブログ？
[2005/02/24]

第9回：CSS編集でオリジナルデザインに挑戦 その2


　前回に引き続き、CSSを編集してオリジナルデザインを作ってみましょう。「テンカスエディタ」を使って色を編集する段階から、さらに複雑なCSSの編集に挑戦します。

　今回の作業を行なう前には、前回の「以前のCSSを保存しておこう」で解説したように、CSSのバックアップを取っておくことをおすすめします。もし失敗したときにも、以前のデザインにすぐ戻せるようにするためです。

　初心者だけどオリジナルデザインを追及したい、という方には、まず「テンカスエディタ」でイメージに近い配色を作り、そのCSSをベースに今回の編集を行なうといいでしょう。


■ 背景に画像を使う

　ブログでは、前回ご紹介したようにいろいろな部分の色を指定できますが、背景に好きな画像を使うこともできます。画像を使うことによって、ブログのタイトル部分に写真を入れたり、サイドバーの背景にテクスチャ（模様）を入れたりと、さらに豪華なデザインや、リッチな質感を追及したデザインが可能になります。

　まず、使いたい写真を縦90ピクセル、横800～1,000ピクセル程度の細長い画像に加工します。加工には、第3回で紹介したフリーソフト「JTrim」を使います。このとき、上に表示される文字が見やすいように、［カラー］の［明るさ／コントラスト］や［ガンマ補正］を使って、全体的に暗め（白など明るい色の文字の場合）または明るめ（黒など暗い色の文字の場合）に調整しておきます。


まず、タイトル部分に使うために、縦90ピクセル程度の細長い画像に加工する ［明るさ／コントラスト］で明るさ-100、コントラスト-20にしたところ

［加工］メニュー内のフィルタで加工もできる。［超新星］を使った例 ［モザイク］を使った例

　「画像フォルダ」から登録（アップロード）し、第3回の「1つの記事に複数の写真を使うには」で紹介した方法で、URLを調べます。


「画像フォルダ」に画像を登録し、オリジナル画像のURLを調べる

　次にCSSを書き換えます。［CSSの編集］で表示されるフォームで直接編集するよりも「メモ帳」にいったん貼り付けてからの方が、編集がやりやすく、また「.headerLight」という部分（「/* ブログのタイトル部上 */」というコメントがついている部分）のCSSは、「テンカスエディタ」で編集した状態だと以下のようになっています。なお、以下では図中の「xxxxxx」部分はすべて任意の色を表わすコードを示します。 



/* ブログのタイトル部上 */
.headerLight {background-color:#xxxxxx;}


　ここに次の1行を書き足します。 



background-image:url(http://blogimg.goo.ne.jp/user_image/0e/95/7c51b94aa1d1d1232e49562155c4c1d3.jpg);


　これは、「背景画像（background-image）に、カッコ内のURLを指定する」という意味になります。CSSは基本的に「属性の名前:その値」という書式で記されており、属性の名前は英語のそのままの意味のものが多いので、少し勉強すれば簡単に意味を理解できるようになります。

　いくつものCSSを書くときには最後にセミコロンをつけて並べて書きます。

　「.headerLight」は、どこのパーツのCSSかを示すための記号で「セレクタ」と呼ばれます（「class="headerLight"」と書かれているすべてのタグを示す）。ひとつのセレクタに対するCSSは中カッコ（{～}）に囲んで書き、タブで表示位置を整えて、次のように書くのが一般的です。 



/* ブログのタイトル部上 */
.headerLight {
	background-color:#xxxxxx;
	background-image:url(http://blogimg.goo.ne.jp/user_image/0e/95/7c51b94aa1d1d1232e49562155c4c1d3.jpg);
}


　ここまでできたら、ひとまず［CSSの編集］でこれを貼り付け、プレビューしてみましょう。


「メモ帳」でCSSを編集する 編集したCSSを［CSSの編集］のフォーム内に貼り付ける プレビューしたところ

　背景の画像と文字の色のバランスが良くないときは、以下◆で挟んだ2か所にある色のコードを編集します（ここでは◆は目印のために入れたもので、実際のCSS記述では、◆は含みません）。 



/* ブログのタイトル */
.bTitle {
	font-size: 26px;
	font-weight: bold;
	font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;
◆color:#666666;◆}


/* ブログの概要 */
.bDesc {
	font-size: 12px;
◆color:#666666;◆}


　HTMLやCSSで色を指定する場合、光の三原色（RGB）を16進数で表現しています。最初の2文字がR（RED＝赤）、次にG（GREEN＝緑）、最後がB（BLUE＝青）を示します。16進数ですから、2文字で0～256までの段階を示します。

　簡単な例を挙げれば、黒にしたければ「#000000」、白にしたければ「#FFFFFF」と書くことになります。

　インターネット上では、実際の色と16進数での記述を合わせて確認できるカラーチャートがたくさん提供されています。検索エンジンなどで「HTML」「カラーチャート」で検索し、気に入ったカラーチャートのWebページがあったらブックマークしていつでも参照できるようにしておくと便利でしょう。


タイトル画像に重なる文字を白くしたところ

■ タイトル部分の大きさを変える

　今のままではタイトルに入る画像が縦90ピクセルと極端に細長すぎすため、いい写真を使えないこともあります。そんなときはCSSの「height（高さ）」属性を追加し、次のように書きえてみましょう。 



/* ブログのタイトル部上 */
.headerLight {
	height:180px;
	background-color:#xxxxxx;
	background-image:url(http://blogimg.goo.ne.jp/user_image/0e/95/7c51b94aa1d1d1232e49562155c4c1d3.jpg);
}


　「180px」で、180ピクセルを表わします。あわせて「background-image」の画像も変えてみましょう。


「height:180px」を書き足し、タイトルの縦サイズを180ピクセルに拡張

■ その他の、タイトル部分に使えるCSS

　スタイルシートは他にもさまざまなことができます。タイトル部分に（「.headerLight」に書き加えて）使えるCSSをいくつかご紹介しますので、いろいろと試してみてください。

【test-align:left/center/right】
文字の位置を、左寄せ、中央、右寄せにします。何も指定していない状態では左寄せになっています。

【background-repeat:repeat/repeat-x/repeat-y/no-repeat】
背景画像をパーツ中に連続させて敷き詰めるかどうかを、連続させる、横方向にのみ連続、縦方向にのみ連続、連続させない、のうちから指定します。何も指定していない場合は、連続させます。

【background-position:x y;】
背景画像の入る位置を指定します。xは横位置を「left、center、right」で左寄せ、中央、右寄せ、yは「top、center、bottom」で上、中央、下に指定します。そのほか50%のように、左上端からのパーセンテージで位置を指定することもできます。「background-repeat:no-repeat」と一緒に使うことで、指定位置にひとつだけ背景画像を表示させられます。

【padding:n n n n;】
上、右、下、左からの余白を、ピクセル数などで指定します。例えば、背景画像のデザインの関係で左側に120ピクセルの余白を持たせたい、というような場合、「padding:0 0 0 120px」のように指定します（0ピクセルの場合、単位「px」を省略できます）。


コラム：文字の大きさ、行間の幅を変える

　ここまでタイトル部分のデザインについて解説してきましたが、このほかにCSSで編集してみたいと考える人の多い場所として、本文の文字があると思います。「テンカスエディタ」で生成されるCSSでは、下のようになっている場所です。 



/* エントリー本文 */
.etBody {line-height: 160%;	text-align: left;
color:#xxxxxx;}

　このCSSは、次のような意味を持っています。

【line-height:160%;】
行間の幅。160%は、文字の60%幅の余白が行間にあることを意味します。行間はあまり大きすぎても読みにくいですが、120%～160%ぐらいの間で指定すると、文章が読みやすくなります。

【text-align:left;】
先に解説したものと同じ。文字の位置を、左寄せ（left）、中央（center）、右寄せ（right）にします。

【color:#xxxxxx;】
文字の色を指定します。

　このほか、次のようなCSSもよく使われます。

【font-size:100%;】
文字の大きさを指定します。100%は普通。90%など小さくすれば小さな文字、大きくすれば大きな文字になります。ただし、本文の文字サイズは、よほどのことがない限り変えるべきではありません。Webブラウザの機能で、文字のサイズは自分の読みやすいサイズに変えられます。よく「お年寄り向けなので大きな文字にしたい」といったことをいう方がいますが、それは、余計なお世話になりかねません。少々読みやすさを犠牲にしても小さな文字でオシャレさん度を演出したい場合などに指定します。

【font-family:"ＭＳ Ｐ明朝";】
font-family:"フォント名"でフォント名を指定することで、表示するフォントを変更できます。ただし表示するパソコンにそのフォントがない場合は、無視されます。もし「ＭＳ Ｐ明朝」を指定する場合には、「ＭＳ」と「Ｐ」は全角、間のスペースは半角ですので、間違えないようにしてください。

「font-family:"フォント名1","フォント名2"」のようにカンマで区切って複数のフォント名を指定すると、最初から順番にフォントを探してシステムにあるフォントを使います。これで、WindowsとMacのそれぞれのフォントを指定することもできます。

　なお、間にスペースの入らないフォント名は「" "」で囲む必要はありません。



■ ＵＲＬ
　 gooブログ
　 http://blog.goo.ne.jp/

2005/04/28 11:06
山田貞幸
編集スタッフとしてgoo内の企画、コンテンツ制作に携わる一方で、ライターとしても活動中。ホームページはこちら
Broadband Watch ホームページ
Copyright (c) 2005 Impress Corporation, an Impress Group company. All rights reserved.