ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1906-01-03はてなダイアリーガイド「CSSセレクタ - その他

この草稿ははてなダイアリーガイド「CSSセレクタ」としてキーワード化しました。

ガイドトップへ・ ガイドトップ ・ 目次 ・ 索引

(セレクタ探しトップに戻る

はてなダイアリーガイド「CSSセレクタ - その他のモジュール」

セレクタは全体が「ul.hatena-photo」。

いっこいっこの画像が「ul.hatena-photo li」または「img.hatena-photo」。

画像はリンクになっているので「a img.hatena-photo」でも。リンク状態によって変える場合は

  • a img.hatena-photo
    • a:link img.hatena-photo(未訪問)
    • a:visited img.hatena-photo(未訪済み)
    • a:hover img.hatena-photo(マウスオーバー時)
    • a:active img.hatena-photo(クリック時)

応用技は、キーワード「photoモジュール」にも載っています。

ブラウザによって、画像のまわりに枠が表示されるのをやめたい時は(すべての画像で枠が表示されるのをやめたい時は『img {border: none;}』)

img.hatena-photo {
 border: none;
}

のようにします。

== HTML構造概略 ==

 <ul class="hatena_photo">
  <li><a><img class="hatena_photo"></a></li>
  <li>同上</li>
  <li>同上</li>
  <li>同上</li>
 </ul>

はてなダイアリーのセレクタ探し - adsenseモジュール

adsenseモジュール。全体にはdiv.adで指定できるけれど、表示にscriptが使用されているので中の要素を個別にはスタイル指定できない。

でもadsenseモジュールを表示するタグのほうで見栄えを変えられるのでした。

Google AdSense広告を表示することができます。ヘッダやフッタに

<hatena name="adsense">

と記述するとAdSense広告が表示されます、が、収益は全てはてなに入るのみです。

<hatena name="adsense" format="180x150" color_link="#0000ff" color_url="#0000ff" color_border="#0000ff" color_bg="#ffffff" color_text="#000000">

と指定することで、広告のフォーマットや、文字などの色を指定することができます。

formatで指定できるのは以下の種類です。

  • 728x90
  • 468x60 (初期値)
  • 234x60
  • 125x125
  • 120x600
  • 160x600
  • 120x240
  • 300x250
  • 250x250
  • 336x280
  • 180x150

実際の表示イメージはこちらをご覧ください。なお、adsenseモジュールは1ページに1個しか掲載できません。

はてなダイアリーのヘルプ - adsenseモジュール

タグの中に書くものを整理すると、上の画像例で

format="〜x〜"
全体の大きさ
color_link="#色コード"
ブラウザ印刷なら、の部分
color_url="#色コード"
- www.axissoft.co.jp/biz/、の部分
color_border="#色コード"
枠の色
color_bg="#色コード"
Ads by Google、の部分の背景色
color_text="#色コード"
高速レスポンスを可能にした〜、の文字色
 | 

ホームページ制作