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

はてなダイアリーのhtml,CSSについての質問です。
サイドバーの各モジュールのタイトルを画像に置き換えたいのですが、どの部分にどのように記述すればよいのか、教えていただけますでしょうか?

●質問者: tokyo-kyoto
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008

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

表示しているモジュール(※タイトル表示を画像に変更したい)の個数分だけ、「スタイルシート」の欄に次のような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;
}

◎質問者からの返答

rouge_2008さま。

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

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

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

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

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

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

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

関連質問

●質問をもっと探す●



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