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

このページについて

id:sugioさんにご招待いただきました。ありがとうございます。

はてなダイアリーガイドの草稿をアップする場所として使わせていただきます。

(今日のこの日記は、のちに削除するかもしれません)

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
  • 画像の配置を調整してみよう(これから書きます)
    • 文字を回り込ませてみよう
  • アンテナを段組で表示させてみよう(これから書きます)
    • アンテナや注目キーワードなどの項目を横に並べる方法