はてなダイアリーのカスタマイズについて質問です。

・ブログの左側のサイドバーに、特定の記事へのリンクを任意のテキストでリンクしたい(要するにメニューを作りたい)場合はどうしたらいいですか。
・カテゴリー表示の際、「カテゴリー」と表記された部分を任意の文字に書き換えることは可能ですか。
・左サイドバーに任意のHTMLや文字を埋め込める、ライブドアブログで言うところの「フリーエリア」を作ることは可能ですか。
・アクセス解析をする際「カウンター」というのを表示していますが、これは消すことが可能ですか。(認識が間違っているかもしれません)
・記事を書くときに、改行すると必ず行間が一行あいてしまうのですが、あかないようにする方法はありますか。
・こうしたカスタマイズについて分かりやすいサイトはありますか。

http://d.hatena.ne.jp/oz8/

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2008/11/30 09:00:02
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答1件)

id:Yuichirou No.1

回答回数112ベストアンサー獲得回数36

ポイント60pt

希望されている種々のカスタマイズは、「管理ツール」の「詳細デザイン設定」を利用すると実現できます。

oz8さんのブログで上の方に「管理」というリンクが表示されていると思いますので、まずこれをクリックすると「管理ツール」トップページに行くことができます(表示されていない場合ははてなダイアリートップページからアクセスしてみてください)。

次にその「管理ツール」のサイドバーで「デザイン」を選択すると、「かんたんデザイン設定」のページが表示されると思うので、タブのようになっている部分の「詳細」をクリックしてください。「詳細デザイン設定」のページにたどり着きます。


このページでは、oz8さんの日記のデザインをHTML/CSSレベルで文字通り「詳細」にデザインすることができます。恐らく最初からあらかじめHTMLが記述されていると思いますので、それに書き足すことで『ライブドアブログで言うところの「フリーエリア」』を超える自由なデザインができます。

例えば「ページのフッタ」で

<div class="sidebar">
……
</div>

とある部分がサイドバーなので、ここに

<div class="hatena-module">
  <div class="hatena-moduletitle"><a href="http://d.hatena.ne.jp/diarylist?mode=staff">リンク集</a></div>
  <div class="hatena-modulebody">
    <ul>
      <li><a href="http://d.hatena.ne.jp/">はてなダイアリー</a></li>
      <li><a href="http://www.hatena.ne.jp/">はてな</a></li>
    </ul>
  </div>
</div>

といった感じでHTMLコードを書き足すと、リンク集やメニューを作ることができます。


さらに、

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

といったhatena疑似タグが書かれていると思いますが、これはそれぞれname属性の値に対応するはてなモジュールを自動挿入する記法です。

上記のタグは日記のカテゴリーを表示するsectioncategoryモジュールのものです。これを例えば、

<hatena name="sectioncategory" moduletitle="ジャンル" template="hatena-module">

と書き換えると、「カテゴリー」と表記された部分を「ジャンル」に置き換えることができます。

また、

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

と書いてあるのがカウンターを表示させる記法なので、これを

<hatena name="counter">

とすると、無駄な枠などを省くことができます。

これらはてなモジュールについて詳しくは、「はてなモジュールってなに? - はてなダイアリーのヘルプ」をご参照ください。


最後に行間の調節ですが、これは「スタイルシート」で変更します。

「詳細デザイン設定」の「スタイルシート」欄に

p {
  margin-top: 0;
  margin-bottom: 0;
}

と記述すると、行間がなくなります。きつきつが嫌であれば、「0」の部分2か所をそれぞれ「0.5em」とすると、1文字の0.5倍の高さだけ空けるようにできます。


これら、はてなダイアリーのデザインに関する詳細な情報サイトとしては、まず公式の「はてなダイアリーのヘルプ」、あるいは劣化している部分もありますが「はてなダイアリーガイド」やそこからリンクされたページが参考になると思います。

また、HTMLやCSSははてなダイアリーに限らない普遍的な技術なので、汎用的なHTML・CSSの情報サイトの内容も活用できると思います。

id:oz8

丁寧な回答ありがとうございます。感激です。ここまでしてくれるとはおもいもしませんでした。本当にありがとうございます。じっくり読んで実践してみます。

ありがとうございました。

2008/11/23 16:51:33

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません