はてなダイアリーのhtml,CSSについての質問です。

サイドバーの各モジュールのタイトルを画像に置き換えたいのですが、どの部分にどのように記述すればよいのか、教えていただけますでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/09/12 04:40:49
  • 終了:2011/09/19 04:45:02

回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512011/09/12 06:03:18

管理画面にログインして、「デザイン」→「デザイン編集」の「詳細」タブで設定します。

表示しているモジュール(※タイトル表示を画像に変更したい)の個数分だけ、「スタイルシート」の欄に次のようなCSSを記述する必要があります。


.hatena-module-モジュール名 .hatena-moduletitle {
    background: url('画像のURL') left top no-repeat;
    text-indent: -5000px;
}


※「モジュール名」の部分は、プロフィールモジュール「<hatena name="profile" template="hatena-module">」の場合は「profile」、calendar2モジュール「<hatena name="calendar2" template="hatena-module">」の場合は「calendar2」という風に、「name="モジュール名"」で指定している名前になります。

表示しているモジュールに関しては、「ページのフッタ」欄で確認してください。


http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E4%B8%80%E8%A6%A7


http://www.dspt.net/stylesheet_css/004/008.html


※使用しているデザインによっては、上記のCSSを若干変更したり、別の指定を追加する必要があるかもしれません。

上手くいかない場合は、使用しているテーマ(デザイン)名を返信で教えてください。

※作成した画像を、はてなフォトライフ(http://f.hatena.ne.jp/はてなID/)にアップロードして使用するといいです。



【返信への回答追記】


> 何らかの設定がされているのでしょうか?


テーマのmemo3.cssで「.hatena-module」に「background-image: url("kabe.gif");」が指定されている為です。

次の記述を追加して「.hatena-module」への背景画像指定を無効にしてください。

※「.hatena-module」への「background-color: #ffffff;」については、同じくmemo3.cssで既に指定されているので、追加する必要はありません。


.hatena-module {
  background-image: none;

}


背景を白にすると、最新タイトルやカテゴリー等で、各テキストが茶色の枠で囲まれますので、以下の記述も任意で追加してみてください。

※マウスオーバーした時の表示は変わりません。


.hatena-modulebody li a {
  border: none;
}

id:tokyo-kyoto

rouge_2008さま。

大変わかりやすい説明ありがとうございました!

早速cssに書き足してみたところ変更できました!

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

もう1点お分かりでしたら教えていただきたいのですが、

サイドバーの背景がbackground-colorやbackground-image:none;などに設定しても変化がみられません。何らかの設定がされているのでしょうか?

背景色を#ffffffにしたいのですが、お分かりになりますでしょうか?

デザインテーマは「memo3」です。

2011/09/12 11:37:42
  • id:rouge_2008
    返信への回答についてですが、既存の回答に追記させていただきました。
    確認お願いします。
  • id:tokyo-kyoto
    rouge_2008さま。
    大変分かりやすい解説感謝しております。
    早速記述してみました。希望通りになりました。
    ありがとうございました!!

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

トラックバック

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません