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

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

(はてな)
はてなだいありーてぃっぷすすたい

はてなダイアリーを使う上で留意しておく点などを皆様で作り上げていくページ。

知っておくと便利な小技などが書かれていますが、慣れた方でないと多少むずかしいかもしれません。
はてなダイアリーのヘルプ - はてなダイアリー 機能一覧やユーザーによる使い方解説「はてなダイアリーガイド」、よくある質問をまとめた「はてなダイアリーFAQ」も参考にしてください。

「読んでも分からない!」そんな場合は日記に質問を書いて、教えてはてなダイアリー、と書くとどこかの誰かが答えてくれるかもしれません。

  • はてなダイアリーTipsスタイルシートでデザイン編(本ページ)
    • 【はてなダイアリーの文書構造・CSS作成支援リンク集】
    • 【スタイルを書くときの留意点】
    • 【キーワードへのリンクと通常のリンクが区別できるようにする】
    • 【キーワードリンクを目立たなくする方法】
    • 【字下げのテクニック】
    • 【段落の前後のすき間をなくす方法】
    • 【sidebar(サイドバー)を作る、sidebar関連CSS Tips】
    • 【サイドバーをはみ出した英数文字列の非表示】
    • 【h3の■を変える・コメント欄の#を変える】
    • 【アンテナ型モジュールの「template="hatena-module"」属性によって、各モジュールに生成されるクラス名】
    • 【line-heightでの単位指定】
    • 【各種モジュール関連Tips】
    • 【日記作成画面(日記を書く)のテキストエリアを拡げる方法】
    • 【日記の一部で背景と文字を同じ色にする(キーワードリンクも隠すためには)】
    • 【日記文章中の画像位置の調整】
    • 【はてなフォトライフ画像の枠線を消す】
    • 【テーマ別デザイン変更ガイド】
  • はてなダイアリーTips
    • 【pタグの排除の必要性】
    • 【「同一URLを含む日記の一覧」を見る】
    • 【「あるISBN/ASINを含む日記」を見る】
    • 【コメントでの改行】
    • 【同じ行に[]を2つ表示させる方法】
    • 【「時刻付きの見出しをつける」機能(*t*)の書き込み時刻を非表示にする方法】
    • 【書き込み時刻表示のない見出しをPermalink(固定的なリンク・固定リンク)にしつつ、上へ上へと追加する方法】
    • 【Googleを利用してはてなダイアリー内を検索する】
    • 【日記に各種フォームを作る】
    • 【はてなダイアリーとTrackBack】(トラックバック受信、トラックバック送信)
    • 【日記が文字化けして編集できなくなったときの修正方法】
    • 【はてなダイアリーでハングルを入力・表示するには】
    • 【はてなダイアリーで多国語日記を書く・編集する】
    • 【日記にアスキーアート(AA)を貼り付ける】
    • 【はてなダイアリー自動リンクとキーワード捕捉を停止する】
    • 【自分の日記を含むはてなアンテナ(アンテナ数)を調べる】
    • 【はてなブックマークに登録された自分のサイトやダイアリーのエントリー(ページ)を一覧・ダイアリーに表示する】
    • 【日記のサイドバーなどにFlashでアニメーションする時計を表示する。】
    • 【日記に登録した画像を日記の一番上以外の場所に表示する】
    • 【はてなアンテナにブログモードの日記のコメントやトラックバックを無視させる】
    • 【今までにもらったコメントを表示させたまま、コメント機能を停止する】
    • 【自分の日記に自動トラックバックしないようにする】

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

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

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

id:Jehoshaphatさま作

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

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

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


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

CSS作成支援リンク集

  • id:chepooka:20040000#1085286324 … はてなのCSSデザイン便利リンク
  • id:ZO353:20040409#1081491362「はてなダイアリーのCSSを弄るにあたって」 … はてなダイアリーで部分的に直したい所を見つけていじる手順。特にテーマを利用している方におすすめ。
  • id:yms-zun:20040315#1079340307「CSS再構築」 … はてなダイアリーを自分の望むデザインにするために、CSSの設定過程を経過順に解説。スタイルシート初心者、はてなダイアリーのデザインカスタマイズに初めて挑戦する方におすすめ。

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

「セレクタ > セレクタ」を利用しようとすると、 > が > に変換されてうまくいかない。→参考「はてなダイアリー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などで指定した通常リンク用の文字色が優先されて適用されてしまいます。せっかくのキーワードリンク用の文字色指定は無駄になってしまうのです。

【字下げのテクニック】

はてなダイアリー内の日記を見ていると、頭に全角の空白を入れて字下げをしているところがいくつかあるが、テーマの中には普通に書いても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でコメント欄のコメント先頭につく#を変更できる。

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

【line-heightでの単位指定】

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

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

各種calendar2モジュール(1ヶ月分のカレンダー表示)関連Tips

それぞれのキーワードをご覧下さい。

  • calendar2モジュール(1ヶ月のカレンダーを表示)
  • calendar2photoモジュール(1ヶ月のカレンダーを表示。その日付の日記に画像が登録されている場合は、日付の代わりに画像が表示される)
  • calendar2jphotoモジュール(calendar2photoとよく似た写真入のカレンダーをFLASHで表示。日付の上にカーソルをあわせると、画像を拡大して見ることができる)

sectionモジュール関連Tips

キーワードsectionモジュール」をご覧下さい。

antennaモジュール関連Tips

キーワードantennaモジュール」をご覧下さい。

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

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

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

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

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

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

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

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

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

投稿した画像の位置調整

ここでは投稿した画像のセレクタとしてimg.photoを使う。左右の回り込みにはfloat属性を使う。スタイルシート欄に
img.photo { float: right;} と記述すると、右に位置し、文章が画像の左側に回り込む。
img.photo { float: left;} と記述すると、左に位置し、文章が画像の右側に回り込む。
画像と文章の間隔は

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

のようにし、数字を調整して上下左右を決めていく(長さの単位説明)。

投稿した画像以外を、投稿した画像と同じように配置する

投稿した画像にされているスタイルシートの指定を調べる。自分で指定している場合はスタイルシート欄で『.photo』を含むセレクタがそれに当たるだろう。

テーマを使っている場合は、まずテーマのCSSファイルを見る。だいたい“http://d.hatena.ne.jp/theme/テーマ名を小文字/テーマ名を小文字.css”というURLになっている(例:http://d.hatena.ne.jp/theme/hatena/hatena.css)が、wallシリーズのようにインポートしたファイル(http://d.hatena.ne.jp/theme/wall1/base.css)に記述がある場合もある。そのファイルで『.photo』を含むセレクタ、多くは『img.photo』を探し、スタイルシート欄にコピーする。

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

例えばこのような記述が見つかったとする。ここで『img.photo』を、この指定を適用したい画像の種類のセレクタに変える。

外部サイトに置いてありimgタグで日記文章中に表示させた画像は『div.section img』などが使える。はまぞうなどで表示したアマゾン商品画像なら『img.asin』、http記法によるQRコードなら『img.barcode』、フォトライフの画像なら『img.hatena-fotolife』であるが、『div.section img』で済んでしまうこともあるだろう。カンマ区切りで足していくことができる。

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

のようにする。

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

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

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

><

ネットの話題: はてなダイアリーTipsスタイルシートでデザイン編

人気

新着

新着ブログ: はてなダイアリーTipsスタイルシートでデザイン編