ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

2004-07-23ガイド草稿「サイドバーに何かを入れる」

サイドバーに何かを入れる

日記のサイドバーに、なにか(かんたんデザイン設定にあるもの以外)を入れる方法です。サイドバーの作り方はいろいろありますが、ここでは「かんたんデザイン設定」で作ることにします。「かんたんデザイン設定」でないテーマで今サイドバーが無い方は、補足を見てください。

サイドバーが日記に表示されていますか?そこに、なにか他のものを入れるには、『管理ツール > デザイン > 詳細デザイン設定』の下の方、『ページのフッタ』欄を使います。

<div class="sidebar">

</div>

の間に入っているものが、日記のサイドバーに表示される仕組みです(これが基本)。文字を書いてみれば、そのまま表示されます。

入れるものがモジュールの場合

http://d.hatena.ne.jp/help#moduleにある各種モジュールを入れる場合は、そのタグを書くだけです。

すでに他のモジュールのタグが書かれていると思いますが、他のモジュール同様「template="hatena-module"」を入れておくと同じ見栄えになります。

<hatena template="hatena-module" name="antenna">

のようにすると良いでしょう(この例はantennaモジュールです)。細かい設定はヘルプを見てください。

<div class="hatena-module">
 <div class="hatena-moduletitle">タイトル</div>
 <div class="hatena-modulebody">
  <hatena template="hatena-module" name="antenna"> <!--←表示させたいモジュールのタグ-->
 </div>
</div>

のようにすると、「かんたんデザイン設定」で入力したのと同じような見栄えになるでしょう。

「カテゴリー」のリストや、プルダウンメニューを入れる

「カテゴリー」のリストや、プルダウンメニューの作り方は活用編「ヘッダにカテゴリーのリストを作ってみる。」や、「カテゴリーのプルダウンメニューを作ってみる」を見てください。

ただそれをそのまま書くと、他のモジュールとちょっと見栄えが変わってしまうので、もう一工夫します。

<div class="hatena-module">
 <div class="hatena-moduletitle">タイトル</div>
 <div class="hatena-modulebody">
 入れる内容
 </div>
</div>

という形にすると、他のモジュールと同じ見栄えになります。例えば

<div class="hatena-module">
 <div class="hatena-moduletitle">この日記のカテゴリー</div>
 <div class="hatena-modulebody">
  <ul>
   <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5bweb%5d">web</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5bhatena%5d">hatena</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5b%a5%c9%a5%e9%a5%de%5d">ドラマ</a>]</li>
  </ul>
 </div>
</div>

のようにします。このような内容を<div class="sidebar">〜〜</div>の間に入れてみてください。

文章や画像を入れる

ちょっとはてなの仕様がそのうち変わりそうなのですが、2004年7月25日現在で……

そのまま文章を入れるとあんまり見栄えが良くないと思うので、こういう形にしてみましょうか。

<div class="hatena-module">
 <div class="hatena-moduletitle">自己紹介</div>
 <div class="hatena-modulebody">
  <p>こんにちは。</p>
  <p>はてなダイアリーに引っ越してきました。</p>
  <img src="http://〜〜画像のアドレス" alt="あれば画像の代替文">
 </div>
</div>

のようにすれば、うまく表示されるんじゃないかと思います。このような内容を<div class="sidebar">〜〜</div>の間に入れてみてください。

画像を背景にしたりといった応用的なものはスタイルシートを使うのでここでは省略します。

補足:「かんたんデザイン設定」対応でないテーマの場合

サイドバーを作る作業です。もうある方は必要ないでしょう。まず今フッタ欄に書いてる内容があれば、コピーしてパソコンに保存しておいてください。今使っているテーマの名前も覚えておいてください。

そして簡易設定の「かんたんデザイン設定」で、カレンダーなどを選択し、テーマは適当で、サイドバーを作ります。もしフッタ欄の元の内容が上書きされて消えていたら、<div class="sidebar">〜〜</div>の下側などに元の内容をコピーし直してください。

次に、詳細設定でテーマを元に戻します。「サイドバー対応の」テーマなら、これでサイドバーができると思います。完成です。

「サイドバー非対応」のテーマでは、日記の下にサイドバーの内容が表示されてしまうと思います。これは“サイドバーの中身をどこ表示させるか”という情報が、そのテーマのCSSファイル(スタイルシート)に含まれていないからです。

なのでその情報を詳細設定の「スタイルシート」欄に追加します。すべてのテーマで使えないかもしれませんが、以下の内容をコピーペーストしてください。

div.main {
	margin-left: 18%;
}

div.sidebar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 15%;
	margin-left: 5%;
}

これでとりあえず左側にサイドバーが出ると思います。これで出ないと、道のりはもうちょっと険しいです。その状態で「教えてはてなダイアリー」を唱えるか、元に戻すか……。

キーワードsidebar」を参考にスタイルシートが書ければいいのですが、上の方法でできないテーマだと難易度高いかも……。ちなみにキーワード「sidebar」はサイドバーを右に表示したり、左右に表示したりといった方法も紹介しています。

補足:モジュールにtemplate="hatena-module"を使用していない場合

モジュールのタグにtemplate属性の指定がない場合はHTMLの構造が違うので(参考図)、それに合わせてきれいに表示するための記述方法が変わってきます。

「カテゴリー」のリストを入れる場合は以下のような形で。

 <p class="recentitem">この日記のカテゴリー</p>
 <div class="recentsubtitles">
  <ul>
   <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5bweb%5d">web</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5bhatena%5d">hatena</a>]</li>
   <li>[<a href="http://d.hatena.ne.jp/自分のID/searchdiary?word=%2a%5b%a5%c9%a5%e9%a5%de%5d">ドラマ</a>]</li>
  </ul>
 </div>

文章や画像を入れる場合は以下のような形で。

<p class="recentitem">この日記のカテゴリー</p>
<div class="recentsubtitles">
 <p>こんにちは。</p>
 <p>はてなダイアリーに引っ越してきました。</p>
 <img src="http://〜〜画像のアドレス" alt="あれば画像の代替文">
</div>

このような内容を<div class="sidebar">〜〜</div>の間に入れてみてください。

sugiosugio2004/07/23 05:14このガイドで解決しなかった方、そのほかご指摘などございましたらコメントくださいませ。

sugiosugio2004/07/23 11:18サイドバーを作る項目自体はよそに置きたいな。でもテーマが対応してないとスタイルシートまでいっちゃうしな。(ということで分けてません)

tsuntsun2004/10/03 10:03サイドバーをいじってみたかったので、とても参考になりました。ありがとうございます!

sugiosugio2004/10/03 10:57まー、とても嬉しいお言葉。書いてみて良かったです。どうもです。

NoseNose2004/10/19 04:46カテゴリー一覧の表示方法がわからず彷徨ってました^^;参考にさせて頂きます!

sugiosugio2004/10/19 10:40おつかれさまでございました。自動でできそうなかんじなのに、実はできないという。

sugiosugio2004/11/13 03:52↑追記。sectioncategoryモジュールまたはcalendarモジュールのドロップダウン表示で、できるようなりました↓
http://d.hatena.ne.jp/hatenadiary/20041028#1098956566

 | 

ホームページ制作