まんぷく::はてなガイド草稿

CSSではてなダイアリーの見栄えを変えてみよう

「CSS(スタイルシート)ではてなダイアリーの見栄えを変えてみよう」とは

このコーナーでは、「はてなダイアリー」の見栄えを調整するための、スタイルシート(CSS)の使い方を説明します。

目標は、これを読んだ人が、自分の「はてなダイアリー」をなるべく思った通りに装飾できるようになることです。

「テーマ」を使わず、0からスタイルを作ります

はてなダイアリーにはたくさんの「テーマ」が用意されており、自分のはてなダイアリーの見栄えを手軽に変更できます。

しかしこのコーナーでは、テーマがまったく適用されていない状態からスタイルを作っていきます。

スタイルシートを学ぶには、そのほうが効率がよいという考えからです。

「はてなダイアリー」そのものの使い方はヘルプをご覧ください

このコーナーは、「はてなダイアリー」そのものの使い方をある程度ご理解なさっている方向けに書かれています。

「はてなダイアリー」のヘルプや、「はてなダイアリーガイド」のほかの項目にざっと目を通しておくだけでも、このコーナーを理解する手助けになるでしょう。

おもなスタイルシートだけを解説しています

スタイルシートを使うと、ページの見栄えをとても細かく指定できます。しかし本稿では、そのすべては解説せず、よく使うものを中心に解説しています。

目次

まとめ読み

  • スタイルシートとは(id:manpukuya:20030129
  • はてなダイアリーでスタイルシートを使う準備(id:manpukuya:20030128
  • ページ全体の見栄えを変えてみよう1~背景の色(id:manpukuya:20030127
    • 背景の色を変えてみよう
    • スタイルシートの書き方
    • スタイルシート関連の用語
  • ページ全体の見栄えを変えてみよう2~背景画像(id:manpukuya:20030126
    • 背景に画像を入れてみよう
  • 見出しを装飾してみよう(これから書きます)
    • 文字の大きさを変えてみよう
    • 枠線を引いてみよう
    • 余白には「内側の余白」と「外側の余白」がある
    • 文字の表示位置を変えてみよう
    • 太字にするには、太字をやめるには
    • そのほかの装飾
    • 引用、リストなども同じように装飾できる
  • 文章中の文字を強調してみよう(→id:sugio:19020201
  • リンクの見栄えを変えてみよう(→id:sugio:19020100
  • キーワードのリンクだけ見栄えを変えてみよう(→id:sugio:19020101
    • キーワードのリンクを目立たなくさせてみよう(→id:sugio:19020102
  • 画像の配置を調整してみよう(これから書きます)
    • 文字を回り込ませてみよう
  • アンテナを段組で表示させてみよう(これから書きます)
    • アンテナや注目キーワードなどの項目を横に並べる方法

スタイルシートとは

Webページの見栄えは、スタイルシートで調整できる

「はてなダイアリー」では、ユーザーが日記の見栄えを調整するにはスタイルシート(CSS)を使います。

スタイルシートは、Webページ(いわゆる「ホームページ」)の見栄えを調整するための言語です。

といっても難しいものではありません。HTMLを少しでも使ったことがある人ならすぐに、そうでない人も少し勉強すれば、スタイルシートの使い方を理解できるでしょう。

このコーナーでは、「スタイルシート」はCSSのことを指します。

HTMLとスタイルシートの関係

Webページとして公開される文書は、具体的な内容と、その見栄えという2つの要素で作られています。

ブラウザに文字として表示されるのが、ここでいう内容です。一方、「見出しを太字で表示する」などといった指定が、内容の見栄えにあたります。

かつては、内容と見栄えの両方をHTMLで指定していました。<body>タグにbgcolor属性を指定して、ページの背景色を変える、などといった方法です。このころは、サイト内の全ページに「<body bgcolor="#330000">」などと書いていました。

その後、内容はHTMLファイルに書き、その見栄えはスタイルシートとして別に指定する、という方法が作られました。

内容とその見栄えを別々に指定することによって、いくつかのメリットが生まれました。

スタイルシートを使うメリット

スタイルシートを使うと、こんな点が便利です。

よりきめ細かく見栄えを調整できます
HTMLでは、文字の行間を調整できません。そのほか、枠線で囲んだり、段落の1文字めだけを1字下げたりするといった装飾は、すべてスタイルシートでのみ可能です。
一度スタイルを指定すれば、ページ内や複数のページにある同じ要素に、同じスタイルを適用できます
スタイルシートでは、特定のタグの範囲(「要素」といいます)のすべてに、まとめて同じ見栄えをさせることができます。「<p>タグから</p>タグの範囲(p要素)は、枠線で囲って表示する」というスタイルシートを書けば、そのスタイルシートを読み込むすべてのページのすべてのp要素は、枠線で囲まれて表示されます。枠線の色や太さを変えたくなったら、先ほどのスタイルシートの指定を書き換えます。そうすれば、すべてのp要素にその変更が適用されます。

※ここに説明図を入れます

はてなダイアリーでスタイルシートを使う準備

はてなダイアリーのスタイルシートをいったんOFFにする

はてなダイアリーに登録すると、まず「はてな」が用意してくれた「hatena」というテーマが適用されます。テーマは、さまざまなスタイル指定の集合体です。

このコーナーでは、テーマがまったく適用されていない状態から、あなたのオリジナルスタイルに作り替えていきます。そのために、まず「hatena」テーマの適用を解除しておきましょう。

(以下、スクリーンショットはid:alisatoさん作成の「スタイルシートテスト用HTML」を参考にさせていただきました)

操作手順

  1. 「はてなダイアリー」にログオンし、ページ最上部のヘッダにある「設定」をクリック
  2. 「テーマ」のリストボックスにある[▼]をクリックし、「指定なし」を選択する(「設定」ページにおけるこのほかの設定項目のはたらきについては、「はてなダイアリーヘルプ」をご覧ください)
  3. [この内容に変更する]ボタンをクリックする
  4. 「最新の日記」をクリックする
  5. 表示結果

文字の書体や大きさは、あなたのブラウザでは少し違って見えるかもしれませんが、おおむねこのような見栄えになったことでしょう。

たとえば、日記のタイトル(ここでは、「xxxxxの日記」という文字は太字で、かつやや大きな文字で表示されます。

これは、HTMLやスタイルシートによるさまざまな装飾(背景色、文字の大きさや色など)がまったく指定されていないときに、ブラウザが表示するデフォルトのスタイルです。

もし「最新の日記」をクリックしても当初と同じ見栄えでページが表示されたなら、「hatena」のテーマがまだブラウザの中に残っています。ブラウザの「更新」や「再読み込み」などのボタンをクリックしてみましょう。

ページ全体の見栄えを変えてみよう1~背景の色

背景の色を変えてみよう

ではさっそく、スタイルシートを使ってみましょう。まず、ページ全体の背景色をスタイルシートで変えてみます。

HTMLを知っている方なら、ここで<body>タグに「bgcolor=#d5dbff」などといった属性を書くでしょうが、「はてなダイアリー」ではスタイルシートで背景色を指定します。

操作手順

  1. はてなダイアリーのページ最上部にある「設定」をクリック
  2. 「スタイルシート」欄に「body{background-color:#d5dbff}」と入力
  3. [この内容に変更する]ボタンをクリックする
  4. 「最新の日記」をクリックする
  5. 表示結果は次の通りです。ページの背景が、「#d5dbff」という指定の色(薄い水色)に変わりました。

「#d5dbff」という指定をさまざまに書き換えることによって、背景色を任意に変えることができます。色は赤、緑、青の3原色の強さで指定してあり、2桁ずつ区切った「d5」が赤の成分の強さ、「db」が緑の成分の強さ、「ff」が青の成分の強さを示しています。

色指定の書き方について詳しくは、「CSSの主なプロパティ~色の値」や、「CSS2/4.3.6 色」などを参照してください。

一般的には、HTMLと同じ「#RRGGBB」という書き方や、桁数の少ない「#RGB」という書き方がよく使われているようです。また、白や赤など、一部の色については「white」や「red」などといった書き方もできます。

背景色が白いままで変わらない場合は、ブラウザの「更新」や「再読み込み」といった操作をしてみましょう。

スタイルシートの書き方

先ほど指定したスタイルシートは「body{background-color:#d5dbff}」という内容でした。この各部分の名称は、以下の通りです。

セレクタ{プロパティ:}
body{background-color:#d5dbff}

これは、「body要素というセレクタのbackground-colorプロパティに、#d5dbffというを指定している」ということになります。このような、「このセレクタのこのプロパティに、この値を指定する」という書き方が、スタイルシートの指定方法の基本です。

スタイルシートを指定する対象が「セレクタ」で、各セレクタには、背景色や余白、文字の大きさや行間といったプロパティ(属性)が備わっています。そして、プロパティに割り当てる具体的な内容が「」となります。

それぞれの用語の意味は、下の通りです。

スタイルシート関連の用語

要素
HTMLにおける、開始タグから終了タグまでの範囲のことです。たとえば「<p>」タグから「</p>」タグの範囲は、これらのタグも含めた範囲が「段落」という要素で、これは「p要素」と呼ばれます。また、開始タグしかないタグ(<img>タグなど)は、<img>タグそのものが「img要素」ということになります。
セレクタ
スタイルシートを指定する対象のことです。上の例では「セレクタ」は「要素」と同じですが、セレクタの書き方によっては「○○という種類の×要素」というセレクタや、「A要素の中に含まれているB要素」といったセレクタも指定できます。
プロパティ
各要素は、「背景色」「文字の色」「枠線の太さ」「枠線の色」「余白」など、見栄えの情報をいろいろ持っています。スタイルシートの世界では、これらの情報のことをプロパティと呼びます。たとえば背景色の情報は「background-color」プロパティに定義されています。各種のプロパティを皆さんが指定することによって、ページの見栄えを自由に変更できるのです。
プロパティに与える、具体的な指定です。たとえば背景色(background-colorというプロパティ)を灰色(grayという値)にするには、「background-color:gray」という指定になります。

ここで登場したプロパティの文法

要素の背景色を指定するプロパティ
background-color
各種の方法による色指定、または「transparent」(透過)
background-colorプロパティに値を指定しなかったとき
「transparent」を指定したものとして扱われる

ページ全体の見栄えを変えてみよう2~背景画像

背景に画像を表示するスタイルシート

次に、ページ全体の背景に画像を表示させてみましょう。

「ページ全体」を指すセレクタは「body」です。そして、背景に画像を表示するには、「background-image」というプロパティに、値として画像のURLを指定します。

ここでは、「http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif」というURLにある画像を、ページの背景に表示してみます。

この場合、スタイルシートの指定は次のようになります。

body{background-image:url("http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif");}

「body」セレクタには、すでにid:manpukuya:20030127#p2で背景色を指定しています。ここに「background-image:…;」の指定を追加するために、次のように書き換えます。

body{background-color:#d5dbff;
background-image:url("http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif");}

スタイルシートを書き換える方法も、すでに説明しました。id:manpukuya:20030127#p2の手順に従って、はてなダイアリーの設定画面にある「スタイルシート」欄に、上のように入力しましょう。

表示結果は、次のようになります。

ページ全体の背景に、画像が表示されました。

ここで登場したプロパティ

要素の背景画像を指定するプロパティ
background-image
url("画像のURL")、または「none」(背景に画像を表示しない、という指定)
background-imageプロパティに値を指定しなかったとき
「none」を指定したものとして扱われる

1つのセレクタに、複数のプロパティを指定するときは「;」でつなぐ

上のように、「body」セレクタに複数のプロパティを指定するには、「プロパティ:値;プロパティ:値;…」というように、「;」(セミコロン)でプロパティの指定を結びます。

スタイルシート内の空白や改行はいくら入れても同じ

上のスタイルシートでは、背景色の指定(「background-color:#d5dbff;」)でいったん改行してから、背景画像を指定しています。

これは、見やすくするために改行しただけで、プロパティの指定ごとに改行するといったきまりはありません。

「body{background-color:#d5dbff;}」というスタイルシートならば、「body」「{」「background-color」「:」「#d5dbff」「;」「}」といった単位で、改行や空白(半角スペース)をいくらでも入れることができます。

改行や空白があってもなくても、ブラウザは同じスタイルシートとして解釈してくれます。

たとえば下のような書き方でも、上で書いたスタイルシートと同じ指定として扱われます。

body{
     background-color:
     #d5dbff;
     background-image:
     url("http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif");
}

あとから読み返しやすくするために、スタイルシートにはある程度改行を入れておくとよいでしょう。