はてなダイアリーTipsスタイルシートでデザイン編

【はてなダイアリーの文書構造・CSS作成支援リンク集】

視覚的に表したものを先日作成したのでよろしかったら参考にしてください。

• 視覚的、はてなダイアリー文書構造サンプルHTML
• CSS Tips for はてなダイアリー
• はてなダイアリーガイド「CSSセレクタ」
  • はてなダイアリーガイド「CSSセレクタ - 日記１日分」
  • はてなダイアリーガイド「CSSセレクタ - photoモジュール」
  • はてなダイアリーガイド「CSSセレクタ - adsenseモジュール」
  • はてなダイアリーガイド「CSSセレクタ - calendar2photoモジュール」
  • はてなダイアリーガイド「CSSセレクタ - ヘッダテーブル」
  • はてなダイアリーガイド「CSSセレクタ - アンテナ型モジュール」

また、全てのクラス名はこちらでまとめられています。

• id:smoking186:20030218#1045504830
• はてなダイアリー兼tDiary用cssのテンプレート　http://d.hatena.ne.jp/dav/theme/template.css

id:Jehoshaphatさま作

• http://joram.agz.jp/hatena/hatena_theme.html
  • tDiaryおよびはてなダイアリーで使われるテーマを手っ取り早く確認できる（はてなダイアリーで使えるテーマのみの掲載）。ほか、はてなダイアリーの構造、はてなダイアリー便利リンク・HTMLとCSS制作に関する一般的な情報のリンク集など。
  • http://joram.agz.jp/hatena/thumbnail/もあります。

※既存のテーマ一覧は上記の他に、はてな作成（公式）「テーマサンプルページ」もあります。

• テーマサンプルページ
  • 管理ツール画面「デザイン > 詳細デザイン設定」にある「テーマ」欄の「テーマサンプルを見る」というリンクをクリックすると上記サンプルページにアクセスできる。
  • ヘッダにあるテーマ一覧からテーマを選んで変更ボタンをクリックすれば、ブラウザのウインドウで実際のテーマがどんな風に見えるのかチェックすることができる。要Javascript。

有名所ではありますが、以下もご参考に。

• ごく簡単なHTMLの説明
• Guide to Cascading Style Sheets(jp)
• ZSPC
• using CSS1 with HTML
• [ホームページ作成] All About｜HP制作の基礎や便利な情報を解説

【スタイルを書くときの留意点】

「セレクタ > セレクタ」を利用しようとすると、 > が > に変換されてうまくいかない。→参考「はてなダイアリーXSS対策」

【キーワードへのリンクと通常のリンクが区別できるようにする】

キーワードのリンクと、通常のリンクの色は、CSSで以下のように記述すると区別できます。
キーワードに設定されたアンカーには、"keyword"と云うclass名が設定されているので、通常のアンカーとは別に、

a.keyword:link{ color: #A9A9A9; background-color: transparent; }

このように記述する事で、キーワードへのリンクと通常のリンクを違うフォントカラー等にする事ができます。

なお、通常リンクも含めて自分で新たに指定する場合、スタイルシート欄に書く順番がポイントになります。

/* リンク用の指定 */
a	{}
a:link	{}
a:active	{}
a:visited	{}
a:hover	{}

などの後に、

/* はてな独自のキーワード用リンクのための指定 */
a.keyword		{}
a.keyword:link	{}
a.keyword:active	{}
a.keyword:visited	{}
a.keyword:hover	{}

を書く必要がある。文書には後から書いた指定のほうが先に書いた指定より優先されて適用されるので、こう書くことでa.keywordなどによるキーワードリンク用独自指定が可能になります、詳しいことは「スタイルシートの基本」（ごく簡単なHTMLの説明）のカスケーディングのルールhttp://www.kanzaki.com/docs/html/htminfo17.html#S312や専門の解説を参考にしてください。

ではもしここで逆にキーワードリンク用の指定（a.keywordなど）で文字色を指定した後に、通常リンク用の指定（a:linkなど）で違う文字色の指定を書いていたとします。その場合にはa.keywordでキーワードリンク用に独自の文字色指定をしていても、キーワードリンクもやはり「リンク」の一形態でありますから（）、後からa:linkなどで指定した通常リンク用の文字色が優先されて適用されてしまいます。せっかくのキーワードリンク用の文字色指定は無駄になってしまうのです。

• id:mozuyamaさんのid:mozuyama:20040227#p3

【字下げのテクニック】

はてなダイアリー内の日記を見ていると、頭に全角の空白を入れて字下げをしているところがいくつかあるが、テーマの中には普通に書いても1字下げてしまうものがある。もしそういったテーマに変更した際は、段落の頭が2文字分下がって表示されてしまうことを覚えておいて損はない。だから、できれば空白を使った字下げをせず、CSS（管理ツール画面「デザイン > 詳細デザイン設定の「スタイルシート」欄）に

div.section p {
	text-indent: 1em;
}

というのを追加して、頭から普通に書く方が「つぶし」が効く。
逆に、字下げつきのテーマを「字下げなし」にしたいときは、

div.section p {
	text-indent: 0em;
}

とすれば良い。

【段落の前後のすき間をなくす方法】

日記の本文において、段落の前後のすき間をなくす方法。

スタイルシート欄に

div.section p{
	margin-top: 0; margin-bottom: 0;
	padding-top: 0; padding-bottom: 0;
}

と指定する。これは、どんなテーマを使っていても有効なはず。
ただ、段落の前後にはすき間があったほうが読みやすいという意見もあり、アクセシビリティやユーザビリティの面も考えて導入は慎重にして下さい。
この指定についての詳しい説明や他の行間と隙間の開け方についてはid:manpukuya:20040222#p2を参照のこと。

【sidebar（サイドバー）を作る、sidebar関連CSS Tips】

【はてなダイアリーのヘルプ - 日記の横にサイドバーを表示する】【はてなダイアリーsidebar利用可能テーマ】【はてなダイアリー日記：id:hatenadiary:20030122#p8】【sidebar】

• 表示位置に関するCSS Tips。自分のパブリックモードのアンテナほか各種リストを日記の左側もしくは右側のサイドバーに（ページのすみに縦長に）表示する
  • キーワード【sidebar】を参照のこと。表示位置（左、右、左右、上）に関するCSS Tipsなどがまとめてあります
    • ※sidebarキーワード記載内容はこちらTipsに記載されていたものを転載、および追記してまとめました。
• その他sidebar関連CSS Tipsもキーワード【sidebar】に掲載しています。

• はてなダイアリーsidebar利用可能テーマ…対応テーマ一覧、Tips、非対応テーマにsidebarを表示させる方法
  • 「お使いのテーマによっては、sidebarクラスの指定が無いために、うまく画面のすみに表示されない場合があります。sidebarが使用可能なテーマをご利用いただくか、スタイルシートのカスタマイズによりdiv.sidevar,div.mainクラスを定義してください。詳しくは、はてなダイアリーsidebar利用可能テーマをご覧ください。」

サイドバーをはみ出した英数文字列の非表示

サイドバーからあふれてしまう長い英数字の文字列をCSSで非表示にする方法です。管理ツール > デザイン > 詳細デザイン設定の「スタイルシート」欄に

div.sidebar {
word-break: break-all;
overflow:hidden;
}

を追加。英単語中での折り返しが可能なIE用に「word-break: break-all;」も記入。

【h3の■を変える・コメント欄の#を変える】

span.sacnchorを好みに指定。同様にしてspan.canchorでコメント欄のコメント先頭につく#を変更できる。

• 画像にしてみる … id:smoking186:19010203#p5

【アンテナ型モジュールの「template="hatena-module"」属性によって、各モジュールに生成されるクラス名】

• • はてなダイアリーガイド「CSSセレクタ - アンテナ型モジュール」
• id:manpukuyaさんのid:manpukuya:20040126#1075042800
• id:kamiokaさんのid:kamioka:20040128#p3

【line-heightでの単位指定】

スタイルシートにおいては、行の間隔（line-heightプロパティ）は実数で指定する（単位をつけない）と文字が重なる心配が少ない。
たとえば{line-height: 1.5;}と{line-height: 1.5em;}ではどう異なるのか？
詳しくは

• id:mozuyamaさんのid:mozuyama:20040223#p4・id:mozuyama:20040225#p9
• id:manpukuyaさんのid:manpukuya:20040225#1077634801

【各種モジュール関連Tips】

【日記作成画面（日記を書く）のテキストエリアを拡げる方法】

デフォルトの設定では少々狭めで見づらい、日記作成画面（日記を書く）の文字入力フィールドを拡げる方法。
スタイルシート欄に

textarea {
	width: 85%;
	height: 30em;
}

と記述する。数字は自分の好みで変更しても問題はない。

※詳細デザイン設定画面のテキストエリアは、各エリア右下隅にある画像「」をクリックすることで広げることができます（要Javascript）。

【日記の一部で背景と文字を同じ色にする（キーワードリンクも隠すためには）】

ネタバレ防止などの目的のために、背景と文字の色を同一にすることによって文字を見えなくする方法。隠したい文中に含まれるキーワードリンクも一緒に隠します。

• id:mozuyamaさんのid:mozuyama:20040425#p2
  • 【キーワードリンクは残しつつ表示上のみリンクを目立たなくする。】のid:mozuyama:20040227#p3の類似テクニック。

【日記文章中の画像位置の調整】

img.photo {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-right: 10px;
	margin-left: 10px;
}

img.photo {
	float: right;
	margin: 10px;
	border: 0;
}

img.asin,img.barcode,img.hatena-fotolife {
	float: right;
	margin: 10px;
	border: 0;
}

【はてなフォトライフ画像の枠線を消す】

キーワード「はてなフォトライフ」‐はてなフォトライフ画像の枠線をスタイルシートで消す　をご覧下さい。

【テーマ別デザイン変更ガイド】

• Hazakura/Navy/Kurenaiの枠の色を変更する→id:chepooka:20040001#hazakura
• Apolloの色を変える→id:chepooka:20040001#apollo
• connectをいじる→id:chepooka:20040001#connect
• colorlabelのサイドバー（モジュール）の色を変更する→id:n-yuji:20050105#p2
• Hatena_noteに好きな写真を配置する→id:tikeda:20050906
• Hatena_tangoで金太郎の写真を別の写真に→id:tikeda:20060412:1144820918
• karteの色を変更する→http://theme.g.hatena.ne.jp/n-yuji/20080519

><