スマートフォン用の表示で見る

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

はてな

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

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

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

知っておくと便利な小技などが書かれていますが、慣れた方でないと多少むずかしいかもしれません。

はてなダイアリーのヘルプ - はてなダイアリー 機能一覧やユーザーによる使い方解説「はてなダイアリーガイド」、よくある質問をまとめた「はてなダイアリーFAQ」も参考にしてください。

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


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

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

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

id:Jehoshaphatさま作

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

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

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

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で非表示にする方法です。管理ツール > デザイン > 詳細デザイン設定の「スタイルシート」欄に

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

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

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

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


【line-heightでの単位指定】

スタイルシートにおいては、行の間隔(line-heightプロパティ)は実数で指定する(単位をつけない)と文字が重なる心配が少ない。

たとえば{line-height: 1.5;}と{line-height: 1.5em;}ではどう異なるのか?

詳しくは


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

photoモジュール関連Tips

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

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

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

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

sectionモジュール関連Tips

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

antennaモジュール関連Tips

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


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

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

スタイルシート欄に

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

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

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

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

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

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

投稿した画像の位置調整

ここでは投稿した画像のセレクタとして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;
}

のようにする。

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