WordPressグローバルナビゲーション
-
●質問の主旨
グロバールナビゲーションの位置がずれるのは、どうしてでしょうか？
意図する位置に変えるためには、コード（header.phpとnav.css)
をどのように書き換えればよいでしょうか？
ご存知のかたよろしくお願いします。（意図する位置）
左から
「トップページ」→「会社概要」→「モール開発実績」→「コラム」→「お問い合わせ」（現状の位置）
左から
「お問い合わせ」→「トップページ」→「会社概要」→「モール開発実績」→「コラム」●質問の補足
この質問は、OKWaveにも投稿しています。
そこにグローバルナビゲーションの
現状の画像を添付しております。
WordPressグローバルナビゲーション●開発環境
windows8
xammp1.8.1●参考文献
本格ビジネスサイトを作りながら学ぶWordPressの教科書P96～97
●コード
(header.php)
<!DOCTYPE HTML>
<html dir=”ltr” lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title><?php bloginfo(‘name’); ?></title>
<link rel=”apple-touch-icon” href=”<?php bloginfo(‘template_url’); ?>/images/touch-icon.png” />
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_url’); ?>/images/favicon.ico” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘stylesheet_url’); ?>” />
<!–[if lt IE 9]>
<meta http-equiv=”Imagetoolbar” content=”no” />
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id=”wrap”>
<section id=”description”>
<h1><?php bloginfo(‘description’); ?></h1>
</section><!– #description end –>
<div id=”container”>
<header id=”header”>
<h1 id=”site-id”>
“><img src=”<?php bloginfo(‘template_directory’); ?>/images/header/site_id.png” alt=”<?php bloginfo(‘name’); ?>” />
</h1><!– #site-id end –>
<div id=”utility-group”>
<?php
wp_nav_menu(array(
‘container’ => ‘nav’,
‘container_id’ => ‘utility-nav’,
‘theme_location’ => ‘place_utility’,
));
?>
<div id=”header-widget-area”>
<aside class=”widget_search”>
<form role=”search” id=”searchform”>
<div>
<input type=”text” id=”s” />
<input type=”submit” id=”searchsubmit”/>
</div>
</form><!– #searchform end –>
</aside><!– .widget_search end –>
</div><!– #header-widget-area end –>
</div><!– #utility-group end –>
</header><!– #header end –>
<?php wp_nav_menu(array(
‘container’ => ‘nav’,
‘container_id’ => ‘global-nav’,
‘theme_location’ => ‘place_global’,
));
?>
<?php
if (is_front_page()):
?>
<section id=”branding”>
<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />
</section><!– #branding end –>
<?php
endif;
?>
<section id=”contents-body”>(nav.css)
@charset “UTF-8”;
#global-nav ul {
margin: 0;
position: absolute;
z-index: 10;
}#global-nav ul li {
float: left;
}#global-nav ul li li {
float: none;
}#global-nav a {
display: block;
width: 190px;
height: 52px;
text-indent: -9999px;
outline: 0;
}#global-nav li ul {
display: none;
}#global-nav #menu-item-121 {
background-image: url(../images/nav/menu_home.png);
width: 194px;
}
#global-nav #menu-item-122 {
background-image: url(../images/nav/menu_about.png);
}
#global-nav #menu-item-126 {
background-image: url(../images/nav/menu_mall.png);
}
#global-nav #menu-item-132 {
background-image: url(../images/nav/menu_column.png);
}
#global-nav #menu-item-131 {
background-image: url(../images/nav/menu_inquiry.png);
width: 194px;
}#global-nav .current-menu-item,
#global-nav .current-post-ancestor,
#global-nav .current-page-ancestor,
#global-nav .menu-item:hover {
background-position: 0 -52px;
}#global-nav ul ul {
border-bottom: 3px solid #fff;
border-radius: 0 0 3px 3px;
display: none;
position: absolute;
top: 41px;
z-index: 100;
width: auto;
}#global-nav ul .menu-item ul a {
width: 170px;
color: #333;
background: none;
text-indent: 0;
height: 22px;
padding: 10px 5px;
border-top: dotted 1px #ddd;
}#global-nav ul .menu-item ul a:hover {
color: #f00;
}#global-nav ul .menu-item ul li {
background: #fff;
float: none;
padding: 0 5px;
}#global-nav ul .menu-item ul li:first-child a {
border-top: none;
}#global-nav ul li:hover > ul, div.menu ul li:hover > ul {
display: block;
}
- トピック「WordPressグローバルナビゲーション」には新たに返信することはできません。