スタイルシートの達人を目指してCSS

Blog デザインを ス マ ー ト にかっとばそう！
第7回

ブログ関連サービスもCSSデザイン

by スタイルシート・スタイルブック
http://www.stylesheet-stylebook.com/

ブログを長い間やっていると、いつの間にかサイドバーが長くなってきいます。そ主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。CSSのテクニックだけでなく、CSSにまつわる最新情報も随時更新しています。
また、情報交換広場にもたくさんの CSS 関連のサイトのリンク集が用 意されているので、ぜひそちらもチェックしてみてください。の理由はさまざまですが、コピー＆ペーストで簡単に設置できるブログ関連のさまざまなサービスがネット上にあるからでしょう。これらのサービスは標準のままでも十分魅力的な作りになっていますが、それぞれコードの中にCSSのクラス名が埋め込まれていて、ユーザーが好きなように見た目をカスタマイズできるようになっています。そこで今回はブログのサイドバーに設置できるお手軽なブログ関連のサービスを3つピックアップして、それぞれをカスタマイズしてみましょう。

今月のイケてるCSSデザインサイト

1

ディテールが光るサイト

2

all in the <head>

カッコいいデザインをたくさん見てセンスや技を学ぶのが、デザイン力アップの第一歩！

サイトも作品もアーティスティックJames Cordova Arts
http://www.jamescordovaarts.com

http://www.allinthehead.com/

ロンドン在住のウェブ開発者であるDrew McLellanさん

ニューメキシコ出身のアーティストJames Cordovaさんのサイト。シンプルな見た目ですが、ディテールにコダワリの作品集サイト。トップページのDTPっぽいレイアウトもすが光るブログサイトです。使われている色や画像も最小限ばらしいですが、「gallery」のナビゲーションは必見。年代に抑えてありますが、非常に見やすい仕上がりになっていごとに作品がまとめられているのですが、別ページにジャンます。可変レイアウトのサイトの多くはデザイン的に魅力的プしなくてもその 場 で 作 品リストを切り替えられます。

なものはあまり多くないのですが、彼のサイトは影のエフェJavaScriptと組み合わせなければできませんが、こういったクトも効果的に使われていて 個性的なイラストもサイトのエフェクトが作れるのもCSSレイアウトならではですね。

良いアクセントとなっています。

派手ではないがセンスのいいデザインだ
けでなく、記事の細部にも適切なマークアップとスタイル指定がされているのがすばらしい。

ナビゲーションの左に置かれている横向きの文字も、デザインをうまく引き立てています。

イケイケデザイン＆テクニック募集中
あなたのイケてるブログサイトやCSSテクニックを募集しています。
「いいデザインができたかも」と思ったら、ガンガン応募してください。イケてるデザインやテクニックは、このコーナーで紹介します。みんなで参考にし合っておもしろいサイト作りましょう！ 応募先：im-ikeike-css@impress.co.jp（スタイルシート・スタイルブックのサイトでも募集しているよ）

158 +++ iNTERNET magazine 2004.11 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

MyClipのカスタマイズ
1

DL／DT／DDの定義リストと縦に延びる場合の対処by 長谷川恭久

BeforeMyClip

は気になる記事をクリップして自分のサイトに表示できるツールで、独自Afterのコードを組み合わせて自由にレイアウトできます。MyClipのリストに記事のタイト
ルとコメントを表示させるために、定義リスト（DL）を使ってレイアウトしてみましょう。定義リストは箇条書きの一種で、各項目が定義見出し（DT）と定義解説（DD）
で

MyClipの設定画面の［表示設定］で下に示したHTML
コードを［Clipフォーマット］に埋め込みます。
「Easy」の設定方法にしている場合は、設定画面右上の［設定方法をProに変更する］をクリックしてProモードにする必要があります。CSSは自分のサイトに設定します。

HTM構成されます。記事タイトルをDT、コメン
トをDDとしてマークアップしましょう。
http://clip.myblog.jp/L<dl class="myclip-main"><CLIPS max=20><dt><span class="myclip-time">{TIME}</span>{TITLE popup=comment maxchar=50} <spanclass="myclip-count">[{CLIP_COUNTlink=on}]</span></dt><dd>{COMMENT maxchar=200 br=off}</dd></CLIPS></dl>CS}
dl.myclip-main dt a{color: #ffffff;
text-decoration: none;}
dl.myclip-main dd{
background: #E0EAEB url(myclip-dd.gif)
repeat-x 0% 0%;
font-size: 90%;
padding: 10px 3px 5px 3px;
margin: 0;}S

dl.myclip-main{
font-size: 85%;
margin: 10px 0px;
padding: 0;
text-align: left;
width: 220px;}
dl.myclip-main dt{
background: #26889A url(myclip-dt.gif)

C S S

no-repeat 0% 0%;
border-bottom: 1px solid #336666;
padding: 3px;
font-weight: bold;
margin: 0;

テ ク ニ ッ ク

.myclip-time,.myclip-count{color: #003333;
font-size: 80%;
font-weight: normal;}の定義リスト（DL）では、標準ではリスト全体なったりすると、画像の高さが足りなくなりま

DT の画像は上側の両角を丸くするために、に余白が設定されていて、用語説明（DD）にす。その場合でも背景画像の雰囲気を失わせDLのwidthに設定した220ピクセルの幅で作は左側にさらに余白が設定されています。まないためには、画像編集ツールなどで背景画り、CSS では no-repeat を指定しています。

ずCSSですべてのmarginの値を0にして同じ像の一番下の部分の色を調べて、その色をDT のほうは角をつけないので横幅の狭い画位置にそろえます。

background で背景色として設定します。DD

像を作ってrepeat-xで横幅いっぱいに表示さ部分も同様で、背景画像の一番下の部分のれるようにしています。

今回のポイントは、グラデーションの画像を色と同じ色を背景色として設定しています。

使っているDTとDDの部分です。
DT部分に使われている画像は縦が26ピクセルの小さな画像です。縦方向のグラデーシ
ョンになっていますが、ユーザーが文字サイズを大きくしたり、記事タイトルが長くて 2 行にDT用の背景画像

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

DD用の背景画像+++ iNTERNET magazine 2004.11 +++159

JUGEPi!のカスタマイズ
2

背景画像を上部と下部に分けて高さの変化に柔軟に対応
Beforeby 長谷川恭久

JUGEPi!

は会員登録も不要で簡単にブログパーツを作れるサービスです。現After

在BBS、メールフォーム、モブログのパーツが提供されていますが、今回はBBSをカスタマイズしてみましょう。JUGEPi!
BBSが使うHTMLでBBSのどのパーツに何というクラスが割り当てられているかは、カスタマイズ方法のページを参照してください。非常に細かいところまでクラス指定がされているので、カスタマイズの可能性も非常に大きいと思います。

サイトに埋め込むスクリプトは「mode=nostyle」にしておきましょう。標準では横線で区分けしてあるメッセージ部分ですが、今回はそれぞれにボックスを作って囲んでいます。

HTM

http://pi.jugem.jp/
http://pi.jugem.jp/custom.php

L<script type="text/javascript"
language="javascript"
src="http://pi.jugem.jp/bbs_read.php?bbsid=*****&num=5&mode=nostyle"charset="euc-jp"></script>

CSS.bbsres{background: #fff url(jugepi-top.gif)
no-repeat 0% 0%;
padding: 0;
margin-bottom: 10px;
text-align: left;}.bbsby{text-transform: uppercase;}.bbsname{color: #006666;}.bbsnote{font-size: 85%;
padding: 10px 10px 5px 10px;
}

C S S

.bbsfooter{background: #fff url(jugepi-bottom.gif)
no-repeat 0% 100%;
font-size: 80%;
padding: 5px 10px 10px 10px;
text-align: right;}.bbsdate{
display: none;}

テ ク ニ ッ クのボックスは上部と下部にあたる画像をそれ

JUGEPi!の BBS で出力されるHTML では、ぞれ用意して背景画像として設定します。ポ個々のメッセージのフッターとして記述されてイントは、「.bbsfooter」に指定するボックス下いる「by」「名前」「時間」はそれぞれ異なるク部の背景画像の位置です。
「0% 100%」を指ラス名が定義されています。つまり、それぞれ定して常にフッター部の最下部から表示させ違うスタイルを設定できるだけでなく、表示・るようにすることで、上部の背景画像と合わ非表示も細かく設定することができます。

せて1つのボックスに見せかけています。また、

たとえば標準では「by」は小文字ですが、投稿されるメッセージの長さはさまざまなのbbsbyクラスに「text-transform: uppercase;」

で、ボックスはさまざまな大きさに対応できなと定義すれば「BY」になり、「display: none」

くてはいけません。そのためには、ボックス上を指定すれば表示されなくなります。

部の画像を縦長に作っておくといいでしょう。

160 +++ iNTERNET magazine 2004.11 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

上部の背景画像は縦に長くしておく。

下部の背景画像は短くてもよい。

Flickrのカスタマイズ
3

画像の四隅と写真の重なりをpaddingで回避

by 長谷川恭久

BeforeFlickrは写真をシェアするコミュニティーサイトです。写真に関するさまざまAfterな機能が満載のサイトですが、自分のサイトに貼り付けるためのコードも提供しています。ウィザード形式で設定していくだけで見た目もカスタマイズできますが、CSSを使って独自のレイアウトを写真に組み込むことも可能です。Flickrでは、写真すべてに共通の設定をするCLASSと、個々の写真にそれぞれ異なるスタイルを設定させるためのIDが設定されています

コードは「Buddy icon抜き」「サムネイルサイズ」「No Styling」に設定してから生成してあります。
「No Styling」にしておかないと背景色が付いてくるので注意が必要です。

HTM

が、アルバム全体の見た目を変えたいときは生成されたスクリプトを囲むようなボックスを作るコードを自分で書き込む必要がL<div id="flickr"><div id="flickr-wrapper"><script type="text/javascript"
src="http://www.flickr.com/badge_code.gne?nsid=**********@N01&count=3&display=random&name=0&
size=thumb&raw=1"></script></div></div>

CSS#flickr{background: #fff url(flickr_top.gif)
no-repeat 0% 0%;
margin: 10px 0px;
width: 220px;
text-align: center;}

C S S

テ ク ニ ッ クあります。
http://www.flickr.com
http://www.flickr.com/badge.gne#flickr-wrapper{
background: transparent url(flickr_bottom.gif)
no-repeat 0% 100%;
padding: 20px;}.flickrimg{
background: #fff;border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
margin: 5px 0 0 0;
padding: 5px;
}のに数値を入れて間隔を開けるといいでしょう。

前ページで紹介した JUGEPi!のカスタマイいいでしょう。今回の例では、ボックスの角にズと同様に、こちらも写真をボックス画像で囲は装飾が施されています。何もスタイル定義が今回はボックスの真ん中に表示させるためんであります。写真を囲む「箱」になるコードはされていないと装飾と写真が重なることも考えに「text-align: center」を使いましたが、横にどFlickr の生成コードには含まれていないので、られるので、「padding」プロパティーを20pxとんどん並べたいときもあると思います。そうい

ボックスの上部に<div id="flickr">（背景画像大きめに設定することで、角と写真に空きを作った場合は「text-align: left」に変えて、写真の用ボックス）と<div id="flickr-wrapper">（写真ります。

用ボックス）
を、下部に</div>タグを2つ、それスタイル定義にあたる「.flickrimg」に「float:写真のほうは枠線「border」を上左と下右にleft」を加えてください。もちろん、写真の大きそれぞれ異なるスタイルを定義することによっ

さやカスタマイズしたボックスの大きさによって前ページのテクニックと同様に、写真の数がて、若干立体的な写真フレームになるようにしも見せ方を変える必要が出てくるので、Flickr多くなってもボックスの見た目が崩れないようています。それぞれの写真が隣接し過ぎないの設定画面と照らし合わせてプランを練るといに、ボックス上部の画像は縦長に作っておくとように、marginプロパティーの上下いずれかいでしょう。

ぞれ追加します。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.11 +++161

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.