ヘッダー変更メモ

構築

ul class="wpn_toplinks"

  • ul class="wpn_toplinks"をコメントアウトした。あとでどこかで使いそう。
  • wp_list_pages()で、ページ読み込み＆リンク表示があった。フッターに移動させよう。

div class="wpn_advert"

  • editable/ads/header.php内のwpn_advertwpn_advertaに変更して、消した。

div class="wpn_search"

.wpn_header .wpn_logo

  • ロゴの位置変更 style.css position:absolute;left:0;top:47px → top:0pxに。高さはpngファイルで調整。
  • ロゴの画像ファイルを　logo-twit5.png に変更。

class="wpn_menu"

  • 色変更。 #135171 → #fa8072
  • .wpn_header .wpn_menu .wpn_menu-lbutton, .wpn_header .wpn_menu .wpn_menu-rbutton についてやりました。
  • 左右のボタンとa:hoverに指定されている色も後で変更。

ヘッダーのheight

  • ヘッダー部分の高さを低くした。style.css .wpn_header height:250px → 150px。

検索ボックスを追加

検索ボックスを追加するため、もともとあった以下のコードをロゴのあとに張り付け。

<!-- New Search // -->
<div class="wpn_search">
<form id="searchform" action="<?php echo get_option('home') ?>" />
<input type="text" name="s" value="Search the blog..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value='Search the blog...';" />
<input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/img/button_search.gif" />
</form>
</div>
<!-- // New Search -->

次に、wpn_searchに対するcssを変更。

  • .wpn_header .wpn_searchの height:32px →　47px(元の32＋input欄を大きくした15)
  • 同、width:150px → 300px
  • 配置も position:relative;top:15px; を追加して変更。
  • .wpn_header .wpn_search input[type="text"]の height:15px → 30px