コスパ重視で生きたい人生だった

なるべく楽して生きて行きたい30代サラリーマンのブログ

はてなのサイドバーにフリースペースを追加する方法


(c) .foto project

ふと思い立ち、このブログ(はてなダイアリー)のサイドにフリースペースを追加したくなりました。
思い立ったら即行動。
はてなダイアリーの管理画面から、設定を探す、がない。
あいや!?なんで!?

このとき既に夜中の1時。
明日は仕事だが・・・しかしここで負けるわけには・・・
長い夜のはじまりでした。


●サイドバーを編集はできるが、フリースペース/フリーエリアがない

サイドバーの編集は
管理画面メニュー → デザイン → デザイン編集 → 簡単 → サイドバー
からできます。
ここには様々なモジュールがあり、気に入ったものを簡単に追加できます。

しかし!なぜか!フリーエリアがない!なんで!
翌日の仕事の考えながら、とりあえずぐぐってみる俺。


●フリースペースを追加するためにはhtmlを編集

ぐぐるとあっさり答えが見つかり、拍子抜け。
html部分に直接書くしか方法がないようです。
以下、フリーエリア追加方法。

管理画面メニュー → デザイン → デザイン編集 → 詳細 → ページのフッタ
この部分にhtmlタグを追記します。

編集前はこんな感じで、今既に設置しているモジュールに関する情報が書かれているはず。
以下の例では、上から「プロフィール」「カテゴリーリスト」「カレンダー」が表示されています。

</div>
<div class="sidebar">
<hatena name="profile" template="hatena-module">
<hatena name="sectioncategory" template="hatena-module">
<hatena name="calendar2" template="hatena-module">
</div>
※<>は全角になっているため、コピペする際は置換してください。




ここでプロフィールの下にフリースペースを追加する際は以下のように追記してください。

</div>
<div class="sidebar">
<hatena name="profile" template="hatena-module">

<div class="hatena-module">
<div class="hatena-moduletitle">フリースペースのタイトル</div>
<div class="hatena-modulebody">
  この部分に好きな文字などを記載。
</div>
</div>

<hatena name="sectioncategory" template="hatena-module">
<hatena name="calendar2" template="hatena-module">
</div>
※<>は全角になっているため、コピペする際は置換してください。




思ったよりも簡単に解決して拍子抜け。
無事寝ることができました。