クールでかっこいいワードプレステーマ を カスタマイズすべ
クールでかっこいいワードプレステーマ を カスタマイズすべ > このサイトのカスタマイズ > このサイトのテーマのカスタマイズ(右にバナーをつけた)

このサイトのテーマのカスタマイズ(右にバナーをつけた)

右にバナー付けるのは、簡単。そう思ったさ。
ウィジェットにあるからね? リンクタグとイメージタグをテキストで貼ればおしまいさ。そう思ったさ。
2015y01m23d_115438861
 
したれば、こうなる。。。

 
ソースを眺める。logo.png の隣にあるやつなのはわかってる!<怒ってる
<div id="gnav-btn">
<div><a class="icon icon-list" href="#"></a></div>
</div>
<div id="header-inner">
<div id="ptitle" class="site-title"><a href="http://coolv9.yuzumaru.co.jp"><img src="http://coolv9.yuzumaru.co.jp/wp-content/themes/a9011/img/logo.png" alt="クールでかっこいいワードプレステーマ を カスタマイズすべ" title="クールでかっこいいワードプレステーマ を カスタマイズすべ"></a></div>
<div id="h-banner">			<div class="textwidget"><a href="http://yuzumaru.x0.com/oncode/7DZpzx/" targe="_blank"><img src="http://coolv9.yuzumaru.co.jp/img/CoolLogo.png"></a></div>
		</div><div id="s-button">
</div>
</div><!-- /#header_inner -->
いた! CoolLogo.png ってやつのAタグと画像のタグが入ってる。
これでまちがいない。。。で、これにかかってるクラスは?わかりやすく編集すると。
<div id="h-banner">
    <div class="textwidget">
      <a href="http://yuzumaru.x0.com/oncode/7DZpzx/" targe="_blank">
        <img src="http://coolv9.yuzumaru.co.jp/img/CoolLogo.png">
      </a>
    </div>
</div>
div class=”textwidget” は、テキストウィジェットのクラスなので、どこでも共通。
タイトルの文字の大きさとか設定してるクラスだから、関係ない。
と、それを囲んでるのが id=”h-banner” 名前からしてクサイ?!(笑)
 
早々、style.css を開いて、h-banner を検索すると・・・
/* ------ ヘッダー ------ */
header {width: 100%;}
#header-inner {position: relative; width: 800px ; height: 80px; margin: 0 auto; *zoom: 1;}
#ptitle {position: absolute; top: 20px; left: 0;  font-size: 124%; line-height: 1.5em; font-weight: 600; z-index: 30; }
#ptitle a {color: #799ED3; text-decoration: none;}
#ptitle a:hover {text-decoration:underline}
#h-banner{position: absolute; top: 20px; right: 130px; display: block;}
#s-button {position: absolute; top: 20px; right: 0;}
#s-button a {font-size: 20px; text-decoration: none;}
#s-button a:hover {text-decoration: none;}
いたー!
分解してみよう
/* ------ ヘッダー ------ */
#h-banner{
  position: absolute;  ←相対位置指定だな。
  top: 20px; ←相対位置の上から20ピクセル下にいったところから表示しろってな?
  right: 130px; ←右側から130ピクセルいったところから表示しろってな・・・
  display: block;
}
ん?右から? そっか、右からの距離をつかってるのか。左からだとばかり思ってた。
つーことは、画像を右端にあわせたいわけだから、右から130離すんじゃなくて、0にしろ!0に!
で、こう直した。
#ptitle a:hover {text-decoration:underline}
/*
#h-banner{
  position: absolute;
  top: 20px;
  right: 130px;
  display: block;
}
*/
#h-banner{
  position: absolute;
  top: 20px;
  right: 0px;
  display: block;
}
もちろん、オリジナルはコメントアウトしておいた。バックアップの意味合いもあるけど、あとで位置とかを直したいときの目印の意味でも。本当は、コメントに modyfy 日付 の形でいれておくとさらにいいんだけどね。
 
で、現状の位置におさまった。
あたかもそれにあわせてグローバルナビが存在しているかにみえるけど、画像サイズはウィンドのメジャーなどをつかってサイズを合わせたんだよ?
 
|<<先頭へ | <前へ次へ> | 最後へ>>|