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

http://d.hatena.ne.jp/ken47/ でブログを書いています。
この度、デザインを変更しました。

サイドバーのデザインについてなのですが、hatena-widgetクラスで指定しているブログパーツ部分のデザインを、はてなモジュールと同じにするにはどうすればいいでしょうか。
具体的には、はてなモジュールの下の影のようなものをhatena-widgetの部分にも付けたいです。
http://d.hatena.ne.jp/theme//ugomemo-green/blog-sidebar-bottom.gif の画像を使って表示させているのではないかと思うのですが、具体的にどんなスタイルシートを書けばいいのか分かりません。

今、スタイルシートで指定しているのは .hatena-widget{background-color: #FFFFFF} のみです。
よろしくお願いします。

●質問者: ぐっちー
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:background-color Hatena widget はてなモジュール クラス
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Yuichirou
●68ポイント ベストアンサー

このような場合、スタイルシートの設定を自分で書くより、HTMLの構造をはてなモジュールと同じようにしてしまう方が、デザインテーマのスタイルシート設定をそのまま活用できて効果的です。

例えば、以下のようにdivのタグを追加してみてください。

before

<div class="hatena-moduletitle">更新通知メール</div>
<div class="hatena-widget">
<form target="_blank" action="http://mixfeed.jp/subscribe" method="POST">…(略)…</form>
</div>
<br>

after

<div class="hatena-module"> <!-- ココ -->
<div class="hatena-moduletitle">更新通知メール</div>
<div class="hatena-modulebody"> <!-- ココ -->
<div class="hatena-widget">
<form target="_blank" action="http://mixfeed.jp/subscribe" method="POST">…(略)…</form>
</div>
</div> <!-- ココ -->
</div> <!-- ココ -->

(<!-- ココ --> と書いてある行を追加してください。ただし <!-- ココ --> 自体は不要です)

◎質問者からの返答

うまくいきました!

こういう方法があるんですね。これで、今後ブログパーツを追加したときも対処できます。(^_^)b

適切かつ分かりやすい回答、ありがとうございました。m(__)m

関連質問


●質問をもっと探す●



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