はてなダイアリーガイド「サイドバーに何かを入れる」

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

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

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

<div class="sidebar">

と

</div>

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

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

はてなダイアリーのヘルプ - はてなモジュール一覧にある各種モジュールを入れる場合は、そのタグを書くだけです。
すでに他のモジュールのタグが書かれていると思いますが、他のモジュール同様「template="hatena-module"」を入れておくと同じ見栄えになります。

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

のようにすると良いでしょう（この例はantennaモジュールです）。細かい設定はヘルプのはてなモジュールってなに？や、ガイドのモジュールの設置・モジュール一覧をご覧ください。
「template="hatena-module"」が適用されないモジュールについては、

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

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

タグで書いたものを入れる

活用編「ヘッダにカテゴリーのリストを作ってみる。」や、「カテゴリーのプルダウンメニューを作ってみる」などでHTMLタグを書いたものの場合。

これもかんたんデザイン設定を見栄えを合わせる形があります。

<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>の間に入れてみてください。

文章や画像を入れる

これもかんたんデザイン設定を見栄えを合わせる形があります。

<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>の間に入れてみてください。

ヘッダやフッタに何かを入れるに戻る← | →アフィリエイト・プログラムに参加するに進む