はてなダイアリーガイド「モジュール一覧(3)」

モジュール一覧(3)

はてなダイアリーで設置できるモジュールの一覧です。モジュールの使い方はモジュールを使うをご覧ください。

設置したモジュールの見栄えを『かんたんデザイン設定』で作ったものと同じようにそろえる方法については、活用編「サイドバーに何かを入れる」などをご覧ください。


profileモジュール(プロフィール画面へのリンクを作成)


モジュール名 profileモジュール
用途 プロフィール編集ページで設定した紹介写真、一行紹介を表示させる。
作成用タグ <hatena name="profile">
無指定時に適用される設定 <hatena name="profile">
作成例
プロフィール

オプション指定 指定内容 入力例 入力例の意味
なし

[ページの先頭に戻る▲]


barcodeモジュール(携帯向けのQRコードを表示)


モジュール名 barcodeモジュール?
用途 自分の日記のURLなど、任意の英数字の文字列をQRコードに変換して表示する。
作成用タグ <hatena name="barcode" value="半角英数字の文字列(必須)">
無指定時に適用される設定 <hatena name="barcode" value="半角英数字の文字列(必須)">
作成例

オプション指定 指定内容 入力例 入力例の意味
value QRコード化する任意の半角英数字の文字列を指定する(必須)。 value="http://d.hatena.ne.jp/" QRコードで『http://d.hatena.ne.jp/』と表示する。
moduletitle モジュールのタイトル部分に表示される文字列を指定する。 moduletitle="このサイトのURL" モジュールのタイトル部分に『このサイトのURL』と表示する。
template hatenaモジュールのテンプレート化 template="hatena-module" モジュールのHTMLをdiv.hatena-moduleで囲んだUL要素(かんたんデザイン設定と同じ形式)にする。

[ページの先頭に戻る▲]


sectioncategoryモジュール(日記で使用しているカテゴリーを一覧表示)


モジュール名 sectioncategoryモジュール
用途 日記で使っている見出しカテゴリーの一覧を表示。
作成用タグ <hatena name="sectioncategory">
無指定時に適用される設定 <hatena name="sectioncategory" moduletitle="カテゴリー">
作成例
作成例(ドロップダウン形式)
category

オプション指定 指定内容 入力例 入力例の意味
moduletitle モジュールのタイトル部分に表示される文字列を指定する。 moduletitle="この日記のカテゴリー" モジュールのタイトル部分に『この日記のカテゴリー』と表示する。
template モジュールをドロップダウン形式にする。 template="dropdown" 作成例のドロップダウン形式を見てください。

[ページの先頭に戻る▲]



引用モジュール?(q,bq モジュール)(引用範囲を自動的に取得)


モジュール名 qモジュール?
用途 引用範囲を自動的に取得する。インライン要素(改行のない文、文の一部)に対して使う。
作成用タグ <hatena name="q" cite="引用するURL(必須)" range="引用を開始する文字列-引用を終了する文字列">
無指定時に適用される設定 <hatena name="q">
作成例(入力例) <hatena name="q" cite="http://d.hatena.ne.jp/help#uploadimage" range="画像を登録するには-URLを入力して下さい。">
作成例(出力例) 画像を登録するには、参照ボタンを押してお使いのパソコンの中にあるファイルをアップロードして頂くか、http://〜(ftp://〜)で始まるURLを入力して下さい。はてなダイアリー - はてなダイアリーのヘルプ*
備考

引用範囲ははじめと終わりを半角ハイフン「-」で区切る。はじめと終わりの文字の中に「-」を含むことはできない。取得先のページの HTML タグを取り除いた内容の中で、はじめにこの範囲に適応する内容が現れると、その内容を表示する。取得先ページのタイトルは自動的に取得するが、title 属性で指定することもできる。

2005年10月にはてなによる引用モジュール廃止が提案され廃止に関するアンケートが実施された。結果をふまえて機能は廃止しないがヘルプから記載を削除し公式に利用を推奨しない機能となった。


モジュール名 bqモジュール?
用途 引用範囲を自動的に取得する。ブロック要素(前後に改行がある、一段落以上の文章)に対して使う。 現在は、はてなツールバーや『このページに言及』のブックマークレット(同ページに掲載)にbqモジュール作成機能があり、見ているページの引用したい部分をドラッグしてツールバーをクリック(ブックマークレット選択)といった、さらに簡単な操作で書くことができる。
作成用タグ <hatena name="bq" cite="引用するURL(必須)" range="引用を開始する文字列-引用を終了する文字列">
無指定時に適用される設定 <hatena name="q">
作成例(入力例) <hatena name="bq" cite="http://d.hatena.ne.jp/help#uploadimage" title="はてなダイアリーヘルプ - 画像を登録する" range="1日1枚、画像を-画像は登録しないでください。">
作成例(出力例)

1日1枚、画像を登録する事ができます。画像は自動的にサイズ変更され、日記の中に表示されます。画像を登録するには、参照ボタンを押してお使いのパソコンの中にあるファイルをアップロードして頂くか、http://〜(ftp://〜)で始まるURLを入力して下さい。画像アップロード欄のとなりに文字を入力して、画像のタイトルを指定する事もできます。ただし、著作権やその他権利を侵害する可能性のある画像、公序良俗に反する画像は登録しないでください。

はてなダイアリーヘルプ - 画像を登録する*
備考 引用範囲ははじめと終わりを半角ハイフン「-」で区切る。はじめと終わりの文字の中に「-」を含むことはできない。取得先のページの HTML タグを取り除いた内容の中で、はじめにこの範囲に適応する内容が現れると、その内容を表示する。取得先ページのタイトルは自動的に取得するが、title 属性で指定することもできる。

オプション指定 指定内容 入力例 入力例の意味
title 引用元のタイトル。無指定なら引用元のページタイトル(title要素)を自動取得する。 title="はてなダイアリーヘルプ - 画像を登録する" 引用元のタイトルを『はてなダイアリーヘルプ - 画像を登録する』にする。

[ページの先頭に戻る▲]


パンくずリストモジュール(サイト内のナビゲーションリンクを表示)


モジュール名 パンくずリストモジュール
用途 閲覧者が現在サイトのどの階層にいるのかを知らせるナビゲーションリンクを表示する。
作成用タグ <hatena name="breadcrumbs">
無指定時に適用される設定 <hatena name="breadcrumbs" titlelength="30">
作成例
備考

パンくずリストについてはキーワード「パンくずリスト」参照。

1970年1月1日(エポック秒開始)以前の日付では、リストに日付が表示されない。


オプション指定 指定内容 入力例 入力例の意味
toptitle パンくずリストにおけるトップページのタイトルを指定する(デフォルトは日記のタイトル)。 toptitle="最新の日記" リスト内でトップページを「最新の日記」と表示。
dateformat リストに表示される日付のフォーマットを指定。書式指定には、%Y(年 2003)、%y(年 03)、%m(月 01..12)、%c(月 1..12)、%b(月名 Jan..)、%M(月名 January..)、%d(日 00..31)、%e(日 0..31)が使える。%H (時 00..23)、%k (時 0..23)、%i(分)、%S(秒)も指定できるが意味がないようだ。 dateformat="%Y年%c月%e日" リスト内で日付を「2005年5月11日」のように表示。
monthformat 月別表示時にリストに表示される日付のフォーマットを指定。上のdateformatと同様の書式指定ができる。 monthformat="%Y年%m月" 月別表示時にリスト内で「2005年05月」のように表示。
titlelength 見出しタイトルの文字数。デフォルトでは半角で30文字に設定されている。 titlelength="50" リスト内で見出しタイトルを半角計算で50文字まで表示。
showontop 日記のトップページ(最新の日記)でもパンくずリストを表示させるオプション。指定しなければ表示されない。 showontop="1" 日記のトップページでパンくずリストを表示させる。

[ページの先頭に戻る▲]


menuモジュール(ヘッダメニューと同じリンク)


モジュール名 menuモジュール?
用途 ヘッダテーブルにある、はてなダイアリーの各種操作を行うためのメニューリンクを表示する。
作成用タグ <hatena name="menu">
無指定時に適用される設定 <hatena name="menu">
作成例
備考 有料オプションでヘッダを非表示にした時などに使う。ヘッダメニュー同様、「日記を書く」画面や管理ツールへのリンクは、日記作者本人にしか表示されない。

オプション指定 指定内容 入力例 入力例の意味
なし

[ページの先頭に戻る▲]


searchformモジュール(日記の検索フォーム)


モジュール名 searchformモジュール?
用途 日記内を検索する検索フォームを表示する。
作成用タグ <hatena name="searchform">
無指定時に適用される設定 <hatena name="searchform">
作成例

詳細 一覧

オプション指定 指定内容 入力例 入力例の意味
type 一覧(アーカイブページ)検索を選ぶラジオボタンをなくす type="simple" ラジオボタン(アーカイブページ検索を選ぶ機能)をなくす

[ページの先頭に戻る▲]


blogpetモジュール(日記にBlogPetを表示)


モジュール名 blogpetモジュール
用途 日記のサイドバーなどに電子ペットサービスBlogPetを表示する。
作成用タグ <hatena name="blogpet" id="**************************">
無指定時に適用される設定 <hatena name="blogpet" id="**************************" moduletitle="BlogPet">
作成例
備考 KDDIとワークアット社が提供するBlogPetサービスにユーザー登録し、そこで発行されるコードからidを調べ、blogpetモジュールのタグに記入する(現在ははてなでそのまま使えるはてな用のタグも発行されているとか)。詳しい設置方法ははてなダイアリー日記 - blogpetモジュールの公開について 参照。

オプション指定 指定内容 入力例 入力例の意味
id 自分のBlogPet用idを指定する。idはBlogPet のペット設定で生成されたコード内に記載されている(詳しくははてなダイアリー日記 - blogpetモジュールの公開について id="0123456789xxxxxxxxxxxxxxx" 自分のBlogPet用idが『0123456789xxxxxxxxxxxxxxx』である。
moduletitle モジュールのタイトル部分に表示される文字列を指定する。 moduletitle="うちのペット" モジュールのタイトル部分に『うちのペット』と表示する。
template hatenaモジュールのテンプレート化 template="hatena-module" モジュールのHTMLをdiv.hatena-moduleで囲んだUL要素(かんたんデザイン設定と同じ形式)にする。

[ページの先頭に戻る▲]

counterモジュール(はてなカウンターを設置)


モジュール名 counterモジュール
用途 日記のアクセス解析や日記へのアクセス数を表示する。はてなカウンターを日記に設置するモジュールであり、はてなカウンター利用時、または有料オプション利用時でなければ使えない。
作成用タグ <hatena name="counter">
無指定時に適用される設定 <hatena name="counter">
作成例 1155
備考 有料オプションを使っていない、はてなカウンターだけの利用時はカウンターID(後述)の指定が必須なので注意。キーワード『counterモジュール』に注意事項などあり。

オプション指定 指定内容 入力例 入力例の意味
cid カウンターID。有料オプションを使っていない、はてなカウンター単独利用のユーザーは指定が必要。カウンターIDは、はてなカウンターの設定画面のURLや、カウンターのタイトル右の表示で確認できる。 cid="11" 自分のカウンターIDは『11』。
template アクセスカウンターを非表示にする。 template="none" アクセス数を表示せず、アクセス解析だけを行う。

[ページの先頭に戻る▲]


pvモジュール(アクセスカウンターを設置)


モジュール名 pvモジュール
用途 日記のアクセスカウンター。ページビュー数を表示する。
作成用タグ <hatena name="pv">
無指定時に適用される設定 <hatena name="pv">
作成例 1155
備考 日記内を移動したり、再読み込みした時もカウントされる。自分のアクセスを排除する機能は今の所ない。使用についてはキーワード『pvモジュール』が詳しい。

オプション指定 指定内容 入力例 入力例の意味
なし

[ページの先頭に戻る▲]


graphモジュール(はてなグラフのグラフを表示)


モジュール名 graphモジュール?
用途 自分のはてなグラフの、特定のグラフを表示する。
作成用タグ <hatena name="graph" graphname="グラフ名(必須)">
無指定時に適用される設定 <hatena name="graph" graphname="グラフ名">
作成例
備考

はてなグラフを使っていないと利用できません。はてなグラフについて詳しくははてなグラフのヘルプをご覧ください。ログイン時、自分のグラフの詳細画面にいくとグラフモジュール用のタグが表示されているのでコピーすれば使えます。


オプション指定 指定内容 入力例 入力例の意味
graphname 自分のはてなグラフの中から表示させるグラフを指定する(必須)。グラフのタイトルを記入。 toptitle="腹筋" 「腹筋」というグラフを表示。
moduletitle graphモジュールに表示するタイトルを指定。 toptitle="腹筋回数グラフ" graphモジュールのタイトルを「腹筋回数グラフ」と表示。
background 背景画像を指定できる。用意した背景画像のURLを記入する。 background="http://f.hatena.ne.jp/
images/fotolife/s/sample/
20050728/20050728171129.jpg"
この画像をgraphモジュールの背景にする。
template hatenaモジュールのテンプレート化 template="hatena-module" モジュールのHTMLをdiv.hatena-moduleで囲んだUL要素(かんたんデザイン設定と同じ形式)にする。

[ページの先頭に戻る▲]


ringモジュール(はてなリングの情報を表示)


モジュール名 ringモジュール?
用途 (自分が参加している)はてなリングの情報を表示する。
作成用タグ <hatena name="ring" rid="リング名(必須)">
無指定時に適用される設定 <hatena name="ring" rid="リング名(必須)">
作成例 ringモジュールイメージ
備考 リングのロゴ用画像が登録されたリングでは最初ロゴ画像しか表示されず、クリックすると移動用のポップアップが表示される。ブラウザでJavaScriptをオフにしていると作動せず、『random』リンクとそのリングへのリンクのみがテキストで表示される。

オプション指定 指定内容 入力例 入力例の意味
rid 表示するリングを指定する(必須)。 rid="sample" はてなリング - sampleリングの情報を表示する。
sid ringモジュールを表示させるサイトのID。リングに参加してロゴ貼り付けタグを取得するとタグ中に含まれている。 sid="123" sidが『123』のサイトを基点にしたリング情報を表示する。
moduletitle モジュールのタイトル部分に表示される文字列を指定する。 moduletitle="sampleリングに参加中" モジュールのタイトル部分に『sampleリングに参加中』と表示する。
template hatenaモジュールのテンプレート化 template="hatena-module" モジュールのHTMLをdiv.hatena-moduleで囲んだUL要素(かんたんデザイン設定と同じ形式)にする。

[ページの先頭に戻る▲]


adsenseモジュール(Google AdSense広告を表示)


モジュール名 adsenseモジュール
用途 Google AdSense広告を表示する。Google AdSenseについてはキーワードや活用編「アフィリエイト・プログラムに参加する」Google AdSenseをご覧ください。
作成用タグ <hatena name="adsense">
無指定時に適用される設定 <hatena name="adsense" format="468x60" color_link="#0000ff" color_url="#008000" color_border="#5279E7" color_bg="#ffffff" color_text="#000000">
作成例 HTMLで再現できないため、イメージ画像で代替してます。
備考 表示できるadsenseモジュールは1ページに3個まで。日記の文章の下に表示するタイプは、今の所色を変えたりする機能がなく、スタイルシートによる見栄え指定もできない。

オプション指定 指定内容 入力例 入力例の意味
format 広告のサイズを決定する。以下のサイズが指定できる。実際の表示イメージはこちら
  • 728x90
  • 468x60 (初期値)
  • 234x60
  • 125x125
  • 120x600
  • 160x600
  • 120x240
  • 300x250
  • 250x250
  • 336x280
  • 180x150
format="180x150" 横180ピクセルx縦150ピクセルの広告を表示する。
color_link 広告のタイトル部分の文字色。 color_link="0000ff" 広告のタイトル部分の文字色を0000ff(の色)にする。※色を指定する値(色コード)の説明はとほほの色入門・色見本、色選びはCGIBOY カラーコード作成マッシーン(ともに外部サイト)などをご覧ください。
color_url URL部分の文字色。 color_url="0000ff" URL部分の文字色をにする。
color_border 広告の枠の色。 color_link="0000ff" 広告の枠の色をにする。
color_bg 『Ads by Google』の部分の背景色。 color_link="000000" 『Ads by Google』の部分の背景色を黒()にする。
color_text 広告の本文の文字色。 color_text="fffffff00" 広告の本文の文字色をにする。

[ページの先頭に戻る▲]



amazonモジュール(Amazon.co.jpの検索ボックスや広告を表示)


モジュール名 amazonモジュール?
用途 Amazon.co.jpのライブリンクやサーチボックスリンクを表示する。はてなアフィリエイト利用者(有料オプション利用でAmazonのアソシエイトIDを管理ツールに登録済み)の日記では、amazonモジュールのリンク先はそのアソシエイトIDのページとなる。Amazonアソシエイトについては活用編「アフィリエイト・プログラムに参加する」 - Amazonアソシエイト・プログラム、ライブリンクやサーチボックスリンクについてはリンクタイプ - Amazon.co.jpをご覧ください。
作成用タグ <hatena name="amazon" type="search">
無指定時に適用される設定 type指定がないと「Error : unknown type」となる。
作成例 HTMLで再現できないため、イメージ画像で代替してます。
HTMLで再現できないため、イメージ画像で代替してます。

オプション指定 指定内容 入力例 入力例の意味
type 広告のタイプ(必須)。
  • サーチボックス…… search
  • ライブリンク…… livelink
type="livelink" ライブリンクタイプの広告を表示する。
mode typeが「livelink」の場合の、ストアの種類を指定する。この指定を省略した場合は「books-jp」が指定される。
  • 和書…… books-jp(初期値)
  • 洋書…… books-us
  • クラシックミュージック…… classical-jp
  • エレクトロニクス…… electronics-jp
  • ホーム&キッチン…… kitchen-jp
  • ミュージック…… music-jp
  • DVD…… dvd-jp
  • ビデオ…… vhs-jp
  • ソフトウエア…… software-jp
  • ゲーム…… videogames-jp
  • おもちゃ&ホビー…… toys-jp
  • スポーツ…… sporting-goods-jp
format="software-jp" ソフトウエアストアのライブリンクを表示する。
format typeが「livelink」の場合の、ライブリンクのサイズを指定する。
  • 120x150(初期値)
  • 120x240
  • 180x150
  • 120x450
  • 120x600
  • 300x250
  • 468x60
  • 160x600
  • 468x240
  • 468x336
  • 350x600
format="180x150" 横180ピクセルx縦150ピクセルのライブリンクを表示する。
browse typeが「livelink」の場合、ライブリンクの内容をカテゴリー・ジャンルで指定する場合のブラウズノードを指定する。ブラウズノードとはAmazonが商品を管理する際に利用しているジャンルのコード番号。調べ方は、Amazonアソシエイト・セントラルのリンク作成ページで指定したい「カテゴリー・ジャンル」を指定してリンクデータを作成し、そのHTMLコードの中に含まれる「browse=465610」といった部分の数値を見る。この指定を省略した場合は465610(和書のベストセラー)が指定される。 browse="3371351" エレクトロニクスストアの「PC周辺機器・パーツ」カテゴリー・ジャンルを指定
search typeが「livelink」の場合、ライブリンクの内容をキーワード指定する場合のキーワードを指定する。browseとsearchの両方を指定した場合はsearchで指定したキーワードが優先される。 search="はてな" ライブリンクの内容をキーワード「はてな」の結果で表示する。
fc1 typeが「livelink」の場合、ライブリンクで表示する文字の色。 fc1="0000ff" ライブリンクの文字色を0000ff(の色)にする。※色を指定する値(色コード)の説明はとほほの色入門・色見本、色選びはCGIBOY カラーコード作成マッシーン(ともに外部サイト)などをご覧ください。
bg1 typeが「livelink」の場合、ライブリンクで表示する背景の色。 bg1="000000" ライブリンクの背景色を黒()にする。
lc1 typeが「livelink」の場合、ライブリンクで表示するリンクの文字色。 lc1="ffff00" ライブリンクのリンクの文字色をにする。
style typeが「search」の場合、サーチボックスリンクにストア選択を行うドロップダウンメニューを表示する。 style="dropdown" サーチボックスリンクにドロップダウンメニューを表示する。
moduletitle モジュールのタイトル部分に表示される文字列を指定する。 moduletitle="Amazonライブリンク" モジュールのタイトル部分に『Amazonライブリンク』と表示する。
template hatenaモジュールのテンプレート化 template="hatena-module" モジュールのHTMLをdiv.hatena-moduleで囲んだUL要素(かんたんデザイン設定と同じ形式)にする。

[ページの先頭に戻る▲]


clockモジュール(日記に時計を表示)


モジュール名 clockモジュール
用途 日記にFlashで時計を表示。有料オプション利用時のみの機能。
作成用タグ <hatena name="clock">
無指定時に適用される設定 ※情報募集中
作成例
作成例画像

オプション指定 指定内容 入力例 入力例の意味
type 表示される時計の種類を選ぶ。
  • anadigi
  • analog-metal
  • analog-normal
  • disc
  • dot
  • gear
  • gear-white
  • handwriting
  • lcd-black
  • lcd-white
  • morphing
  • slim
が指定できる。キーワード「clockモジュール」に見本画像一覧あり。
type="anadigi" 時計を『anadigi』タイプにする。
color 時計のカラーリングを変える。色指定できるタイプとできないタイプがあり、キーワード「clockモジュール」 - 使い方に一覧がある。 color="0000ff" 時計の色を0000ff(の色)にする。※色を指定する値(色コード)の説明はとほほの色入門・色見本、色選びはCGIBOY カラーコード作成マッシーン(ともに外部サイト)などをご覧ください。

[ページの先頭に戻る▲]


モジュールを使うに戻る← |