Hatena Blog Tags

はてなダイアリーTips

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

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

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

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

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

【pタグの排除の必要性】

pタグの排除について留意しておかないと、自分でタグを書いたときに意図しない表示になるかもしれない。

山カッコで構成した「><」で始まる行があると、そこから自動的なpタグの挿入はストップし、次に「><」で終わる行を見つけるまではその設定が有効となります。自分でタグを書きたい時や、不適切な挿入が行われる際に、お使いください。

例えば、上の引用は、

><blockquote 〜(中略)〜><
山カッコで構成した 〜(中略)〜 お使いください。
></blockquote><

と記入したものだが、これを、

<blockquote 〜(中略)〜>
山カッコで構成した 〜(中略)〜 お使いください。
</blockquote>

といったように記入してしまうと、


山カッコで構成した「><」で始まる行があると、そこから自動的なpタグの挿入はストップし、次に「><」で終わる行を見つけるまではその設定が有効となります。自分でタグを書きたい時や、不適切な挿入が行われる際に、お使いください。

と、上下に不適切なスペースが空いてしまう。(ブラウザの「すべて選択」を使うとわかりやすい)

専門的な言い方をすれば「ブロック要素のタグ」、簡単に言えば「1行に単独で書かれるタグ」は「><blockquote><」という形で記入する、と覚えておけば普通は問題ないだろう。

【「同一URLを含む日記の一覧」を見る】

その時々に注目をされている記事、またはHPにどのくらいのダイアリーユーザーが着目しているのかを見る為に、そのURLを書いているダイアリーの一覧を見る。
注目しているURLが、例えば「http://www.hatena.ne.jp/」であるならば、以下のように入力し一覧を表示する。

http://d.hatena.ne.jp/http?//www.hatena.ne.jp/
  1. はてなダイアリーのURLをまず打つ。
  2. その右に、httpから始まる検索先URLを入力する。
  3. 検索先URLのhttp直後にある":"を"?"に変える。

上記の方法で「同一URLを含む日記」の一覧を表示できる。

【「あるISBN/ASINを含む日記」を見る】

asinページを利用。ページ下部に『「(商品名)」を含む日記』リストが出る。例:asin:4798107042

    • asinページについては、はてなダイアリー日記[id:hatenadiary:20030829#1062153665]ほかを参照のこと。
  1. asinページと同内容を、例:http://d.hatena.ne.jp/asin?B0000DGS7O
http://d.hatena.ne.jp/asin? + 商品のISBN/ASINコード

でも表示できる。

【コメントでの改行】

  • コメント欄では基本的にタグは使えないが、改行タグ<br>だけは例外的に使用できる。
    • ただし現在は日記のコメント欄がtextarea要素となり(id:hatenadiary:20040803#1091529303)、日記の方では改行するだけでよい。
    • しかし、キーワードのコメント欄は依然input要素であり、キーワードの方ではまだ現役のテクニックである。

【同じ行に[]を2つ表示させる方法】

日記などで同じ行に「[]」を2つ記入すると、普通は自動リンク停止のマークとみなされ表示されないが、数値文字参照を使うと表示できる。

&#91;&#93;あいうえお&#91;&#93;

と記入すると、

[]あいうえお[]

と表示される。

数値文字参照によるコードを知るには次のページが便利。

【「時刻付きの見出しをつける」機能(*t*)の書き込み時刻を非表示にする方法】

「時刻付きの見出しをつける」(http://d.hatena.ne.jp/help#sectiontimestamp)機能を使ったときに書き込み時間を常に非表示にする方法。

スタイルシート欄で下記の指定をする。

h3 span.timestamp { display: none }

※これによりスタイルシートを解釈し有効にしているブラウザにおいて書き込み時刻は表示されなくなる。スタイルシートを解釈しないブラウザや無効にしている場合などでは書き込み時間は表示される。
※「時刻付きの見出しをつける」機能(*t*)を利用して、はてなダイアリーの日記記事にユニークで内容を更新しても変化しないアンカー付きの見出しをつけ、Permalink(固定リンク)に適した形にすることができる。

(注:この説明は、好きなname属性の見出しを作る機能(http://d.hatena.ne.jp/help#sectiontitlename)がなかった頃に考え出されたものです。現在はこの機能を使うことで簡単にPermalinkが作れますが、参考として残しておきます)


上記「時刻付きの見出しの書き込み時刻を非表示にする」方法の応用。

はてなダイアリーで記事に見出しをつけると、日にち単位のほかに記事単位にもリンクできて便利です。
しかし、「*見出し」(参照:http://d.hatena.ne.jp/help#sectiontitle)とつけたとき、見出しごとに常に上から順にp1, p2…と割り振られるので、上に新たに見出しつき記事を追加した場合、下の記事の見出しにつけられた数字は自動的に増やした記事の数だけずれていくことになります。
そのせいで、リンクした記事の見出しの数字がその後の記事の追加で変わってしまい、意図したのとは違う記事へのリンクになっている、といった問題がおこることがあります。

この問題を防ぐため、「時刻付きの見出しをつける」(http://d.hatena.ne.jp/help#sectiontimestamp)機能を使って記事ごとにユニークなアンカーを設定させ、

  • その日の見出しは上へ追加していきたい
  • 見出しのURLは、新たな記事を上へ追加しても変化させたくない(=Permalink(固定的なリンク、固定リンク)を提供したい)
  • 書き込み時刻を表示したくない

を実現する方法を下記でご紹介します。

  • はてなダイアリーガイド「書き込み時刻表示のない見出しをPermalinkにしつつ、上へ上へと追加する方法」 [id:manpukuya:20031114#1068735602](草稿)

この問題についての関連記事

【Googleを利用してはてなダイアリー内を検索する】

 [google:検索語 site:d.hatena.ne.jp]

と日記本文に記載すると

google:検索語 site:d.hatena.ne.jp

と表示されます。
このリンクをクリックすれば、Googleを利用してはてなダイアリーを検索することができる。

【はてなダイアリーとTrackBack】(トラックバック受信、トラックバック送信)

TrackBack(トラックバック)とは

を参照のこと。

はてなダイアリー内のTrackBack(はてなダイアリー内言及通知)

外部からのTrackBack(トラックバック受信)

  • 【はてなダイアリーTrackBackシステム】
  • 【はてなダイアリーガイド「はてなダイアリー以外のサイトからトラックバック」】

はてなダイアリーから外部へTrackBackを送る(はてなダイアリーから外部へのトラックバック送信)

  • はてなダイアリーから外部へのトラックバック送信(はてなofficial) 【はてなダイアリー日記:id:hatenadiary:20040325#1080189658】
    • 日記編集ページ下部の「トラックバックを送信」リンクをクリックするとその日付のアイテムが表示されますので、送信するアイテムとトラックバック先のURLを入力して「送信」ボタンを押してください。
  • 【はてなダイアリーガイド「はてなダイアリー以外のサイトにトラックバック」】
  • 外部提供ツールを利用したブックマークレット、HTMLファイルを使って手動ではてなの外へ送る方法(ユーザー提供、はてなUnofficial) 【TrackBack:「手動ではてなの外へ送る方法についてはここを参照」http://d.hatena.ne.jp/keyword/TrackBack?kid=2269#p6

【日記が文字化けして編集できなくなったときの修正方法】

  • 長文を書いて日記を登録したら最後が文字化けしてしまった。編集画面もうまく表示されず、編集ができなくなった。
    • 具体的な症状の例
      • 日記の最後が文字化けしたり、何かのHTMLタグが見えてしまったりしている。
      • 日記編集画面(日記を書く/編集で入る画面)が正常に表示されない。「この内容を登録する」ボタンやリンク元が表示されないので更新できない。 など…。

といったときの対処方法は下記を参照。

【はてなダイアリーでハングルを表示するには】

キーワードハングル」の「はてなダイアリーでハングルを表示するには」項を参照のこと。

【はてなダイアリーで多国語日記を書く・編集する】

はてなのシステムは英語と日本語の日記しか取り扱うことが出来ません。これはシステム上仕方のない制限です。しかし、WEBシステムの国際標準で定められている「数値文字参照」という機能を使うと、中国語、ハングル、アイルランド語、フィンランド語、フランス語、イタリア語と主だった言語殆どで文章を書くことが出来ます。

具体的な詳細はid:suikanさんのid:suikan:20040420#p5を参照のこと(id:suikan:20040420全体も参考になります)。

【日記にアスキーアート(AA)を貼り付ける】

1)「管理ツール > デザイン > 詳細デザイン設定 > スタイルシート」欄に

pre.aa {
    margin : 0em 0em;
    font-size : 12pt;
    font-family : "MS Pゴシック","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
    line-height : 17px;
    text-indent : 0em;
    letter-spacing : 0em;
    speak : none;
}

を追加しておく(id:ykrishnasさんの設定)。

  • "Mona"と"mona-gothic-jisx0208.1990-0"はUNIXやMac(OSX)環境でAAを見るためのフォント(モナーフォント:http://monafont.sourceforge.net/を参照)で、普通はAAの表示がグダグダに崩れる。
  • 「speak : none;」は音声ブラウザで無意味な文字列となるAAを読み上げない指定。
  • 文字色や背景色を変えたい場合は上の指定の中に『color: 色の値;』や『background-color: 色の値;』を追加。

2)コピペ支援Script ちょこっと改 for はてなダイアリーid:ykrishnasさん提供)で、貼り付けたいテキストを変換。変換されたテキストを日記に貼り付ける。

><pre class="aa">
〜変換されたテキスト〜
</pre><

キーワードへの自動リンクと「キーワードを含む日記」によるキーワードからの捕捉を制御する方法。

を参照のこと。

  • 他の参照先
    • id:wushi:20040913#p2 「自動リンクとキーワード捕捉のまめ知識」
    • id:sugio:10050121 はてなダイアリーガイド草稿「文章内のキーワードを消す、編集する」

【自分の日記を含むはてなアンテナ(アンテナ数)を調べる】

(※別に自分の日記じゃなくても、はてなダイアリー以外のページでも、同じことが調べられます)

「〜を含む公開アンテナ」の数をチェック

自分の日記をはてなアンテナに登録してアンテナ画面上でページタイトル横に表示された「」をクリックすると、「〜を含む公開アンテナ」というページが見られる。また『http://a.hatena.ne.jp/include?http://d.hatena.ne.jp/自分のユーザーID/』というアドレスを直接入力しても良い。

はてなダイアリーの日記なら「はてなダイアリーアンテナ」、はてなグループの日記なら「はてなグループアンテナ」には自動的に含まれている。

非公開(プライベート)アンテナを含めたアンテナ数を調べる。

どの非公開アンテナに含まれているかはわかりませんが、総数は調べられます。

  1. 自分の日記を、自分のアンテナに登録しようとしてみる。
  2. すると「ページの確認」の画面で登録者数が表示される。

><

【はてなブックマークに登録された自分のサイトやダイアリーのエントリー(ページ)を一覧・ダイアリーに表示する】

※自分のサイトやダイアリーだけでなく他の方のサイトを調べることも可能です。

キーワード「はてなブックマーク」>はてなブックマークに登録された自分のサイトのエントリー(ページ)一覧 をご覧下さい。

【日記のサイドバーなどにFlashでアニメーションする時計を表示する。】

有料オプション(http://d.hatena.ne.jp/help#aboutoption2)のみの機能ですが、かんたんデザインあるいはclockモジュールを用いて設定を行うことで、日記のサイドバーなどにアニメーションする時計を表示することができます。時計の時刻は、閲覧した人のPCの時刻が反映されます。詳しくは、

  • キーワード「clockモジュール」(時計の見本やスタイルシートTipsも掲載)
  • はてなダイアリーのヘルプ‐clockモジュール http://d.hatena.ne.jp/help#clock

をご覧下さい。

日記に登録した画像を日記の一番上以外の場所に表示する

フォトライフを使う(ガイド)場合をのぞき、日記に登録した1日1枚の画像は日記の一番上に表示されます。これを特定の記事の中に移動します。これで見出し別表示した時やカテゴリー別表示したときに適切な位置に画像がきます。
まず一度普通に画像を登録。そしてその画像のURLを調べる(ガイド)。『http://d.hatena.ne.jp/images/diary/h/hatenadiary/2005-05-12.gif』のような形式のURLになっています。これをimgタグ(同ガイド)で日記の文中に貼ります。

<img alt="代替文" src="http://d.hatena.ne.jp/images/diary/h/hatenadiary/2005-05-12.gif" class="photo">

のように書くと(http://d.hatena.ne.jp部分は省略可)
imgタグで貼った例
右図のように文中に表示されます。そして編集画面で「画像を削除」すると、日記の一番上の画像は消えますが画像データ自体は残り、imgタグで貼ったものだけ表示されます。(同じ日に新しい画像を同じ画像形式で登録しなおすと上書きされる)
過去日記を利用する(ガイド)方法を併用すれば、ほぼ無制限に画像を貼ることも可能ではあります。

はてなアンテナにブログモードの日記のコメントやトラックバックを無視させる

まんぷく::日記 - ブログモードのはてなダイアリーをはてなアンテナに登録する際のTipsより。
該当する日記(のトップページ=最新の日記)を自分のはてなアンテナに登録した状態で、editマークからそのページの「ページの編集」画面へ。
「上級者向け設定」の「更新無視文字列」を、以下の強調部分のように指定します。

^Permalink \| コメント\(が含まれる行を無視

今までにもらったコメントを表示させたまま、コメント機能を停止する

管理ツールの「コメント許可設定」を「なし」にするとコメント機能を停止できますが、今まで日記にもらったコメントもすべて非表示になってしまいます。これを表示してままにしておく裏技です。

  1. 管理ツール「日記の設定 > コメント・トラックバック設定 > コメント許可設定」を「ユーザー」に設定。
  2. コメント拒否ユーザーに「|」、もしくは「hatenadiary|」のように「|」で終わるよう記述する。

これでだれも書き込めなくなります(コメント画面を見ることはできます)。
ただコメント欄は見えていてコメントできないので、コメントしようとした人におかしいな?と思われることがあるかもしれません。注意書きをしたほうが良いかも。
日記モードの場合は、以下のようなスタイルシートで日記画面の「[コメントを書く]」の部分も非表示に指定することができます。一見コメントなしの日記に見えるでしょう(携帯画面やスタイルシートを切っているブラウザでは効果がありません。テーマにもよって無効の場合もあるかもしれません)。

div.comment div.caption {
 display:none;
}

自分の日記に自動トラックバックしないようにする

自分の過去の日記にリンクしたときなどに、自動トラックバックをしないようにする設定です。管理ツール「日記の設定 > コメント・トラックバック設定 > 自動トラックバック拒否ユーザー」で、自分のIDを指定します。

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。