はてなダイアリーを使う上で留意しておく点などを皆様で作り上げていくページ。
知っておくと便利な小技などが書かれていますが、慣れた方でないと多少むずかしいかもしれません。
はてなダイアリーのヘルプ - はてなダイアリー 機能一覧やユーザーによる使い方解説「はてなダイアリーガイド」、よくある質問をまとめた「はてなダイアリーFAQ」も参考にしてください。
「読んでも分からない!」そんな場合は日記に質問を書いて、教えてはてなダイアリー、と書くとどこかの誰かが答えてくれるかもしれません。
視覚的に表したものを先日作成したのでよろしかったら参考にしてください。
また、全てのクラス名はこちらでまとめられています。
※既存のテーマ一覧は上記の他に、はてな作成(公式)「テーマサンプルページ」もあります。
有名所ではありますが、以下もご参考に。
「セレクタ > セレクタ」を利用しようとすると、 > が > に変換されてうまくいかない。→参考「はてなダイアリー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利用可能テーマ】【はてなダイアリー日記:id:hatenadiary:20030122#p8】【sidebar】
お使いのテーマによっては、sidebarクラスの指定が無いために、うまく画面のすみに表示されない場合があります。sidebarが使用可能なテーマをご利用いただくか、スタイルシートのカスタマイズによりdiv.sidevar,div.mainクラスを定義してください。詳しくは、はてなダイアリーsidebar利用可能テーマをご覧ください。」
サイドバーからあふれてしまう長い英数字の文字列をCSSで非表示にする方法です。管理ツール > デザイン > 詳細デザイン設定の「スタイルシート」欄に
div.sidebar { word-break: break-all; overflow:hidden; }
を追加。英単語中での折り返しが可能なIE用に「word-break: break-all;」も記入。
span.sacnchorを好みに指定。同様にしてspan.canchorでコメント欄のコメント先頭につく#を変更できる。
スタイルシートにおいては、行の間隔(line-heightプロパティ)は実数で指定する(単位をつけない)と文字が重なる心配が少ない。
たとえば{line-height: 1.5;}と{line-height: 1.5em;}ではどう異なるのか?
詳しくは
キーワード「photoモジュール」をご覧下さい。
それぞれのキーワードをご覧下さい。
キーワード「sectionモジュール」をご覧下さい。
キーワード「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; }
のようにする。
キーワード「はてなフォトライフ」‐はてなフォトライフ画像の枠線をスタイルシートで消す をご覧下さい。
><