人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: oz8
●カテゴリ:はてなの使い方
✍キーワード:あい いるか はてなダイアリー アクセス解析 エリア
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Yuichirou
●60ポイント

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

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の情報サイトの内容も活用できると思います。

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ