読者です 読者をやめる 読者になる 読者になる

MoonNote

はてなブログテーマ / CSS / jQuery

広告専用のサイドバーモジュールがあったら便利だなと思った

はてなブログテーマ

はてなブログでサイドバーに広告を配置する方法は「HTMLモジュール」に広告コードを追加するという他社のサービスでもよくある方法だけど、広告配置専用の「広告モジュール」があったらデザインの幅が広がるのになとテーマを作っていて思った。

さて、はてなブログのHTML構造でも書いたけど、サイドバーモジュールの基本構造はこんな感じで、hatena-module-XXXX に入る文字列はHTMLモジュールの場合 html です。

<div class="hatena-module hatena-module-XX">
    <div class="hatena-module-title">
        モジュール名
    </div>
    <div class="hatena-module-body">
        モジュール内容
    </div>
</div>

HTMLモジュールに記述されるのは広告コードだけじゃないし、むしろその他の、SNSリンクボタン etc が記述される割合の方が圧倒的に多いと思います。

f:id:waitingmoon:20150519231201j:plain

だから、Yahoo!知恵袋のような「広告はサイドバーの幅に合わせる」「役に立つ質問(=最近の投稿 etc)には枠を付ける」デザインにする場合、利便性を考えるとHTMLモジュールのスタイル(margin や padding)を削除できないので、デザインの幅が狭まってしまうんですね。

冒頭で述べた「広告モジュール」を用意してくれれば、利便性を損ねることなく、広告専用のスタイルが適用できるんです。class は hatena-module-ads が良いかな。HTMLモジュールとの混乱を避けるために、Pro 専用にしてさ。

広告を非表示にする