サポート » テーマ » 特定の場合のみ、回り込み解除をする?

  • 解決済 goodtimes

    (@goodtimes)


    お世話になります
    現在kubricデフォルトテーマをカスタマイズ?しています
    見た目調整はあとまわしにしていますので、
    phpの文章を書き変えたり書き足したりしています

    ヘッダーにナビゲーションボタンを付けたかったため
    inoveテーマの一部をデフォルトテーマにごっそりコピペしました

    inoveのテーマはこれです
    http://wordpress.org/extend/themes/inove

    いままでいい感じで表示されていたのですが、(少なくとも私はそう思っていました)
    ナビゲーションボタンのソースのあたりに私がphpの文章を書き足したところ
    コンテンツ?(記事が載るところ)がナビゲーション部分に回りこむ場合がでてきました

    以下、ソースです
    分岐させているんですが、コメントでしるしをつけたところを通ると、なぜか回り込みます
    頓珍漢なことをふさわしくない場所で訊いていると思うのですが
    PHPにもCSSにも明るくないので、無礼を承知で質問させていただきました
    どなたか修正のアドバイスいただければ幸甚です

    header.php

    <!– header START –>
    <div id=”header”>
    <div id=”headerimg”>
    <h1>/”><?php bloginfo(‘name’); ?></h1>
    <div class=”description”><?php bloginfo(‘description’); ?></div>
    </div>

    <!– navigation START –>
    <div id=”navigation”>
    <ul id=”menus”>

    <!– 現在のページ階層を取得 –>
    <?php $depth = get_post_ancestors($post->ID); ?>
    <?php if(empty($depth)) {
    $depth = 0;}
    else{
    $depth = count($depth);
    }?>
    <?php $depth = $depth + 1; ?>
    <!– 5階層目以上はナビボタンを変更 –>
    <?php if($depth < 5){
    wp_list_pages(‘depth=1&title_li=0&sort_column=menu_order’); }
    else{//********ここを通ると回り込んできます*********
    wp_list_pages(‘child_of=’ . $post->ID . ‘&title_li=0&sort_column=menu_order’);
    }?>

           

    •      
           <div class=”fixed”></div>
         </div>
         <!– navigation END –>
        <div class=”fixed”></div>
      </div>
      <!– header END –>
      <hr />

    style.css

    /* naviで追加 */
    #navigation {
    margin:1px 0;
    background-color: red;
    }
    #menus li {
    display:inline;
    list-style:none;
    }
    #menus li a {
    background:transparent url(img/menu.gif) no-repeat;
    display:block;
    color:#382E1F;
    height:31px;
    line-height:31px;
    padding:0 20px;
    margin-left:-10px;
    text-decoration:none;
    font-size:11px;
    float:left;
    z-index:1;
    }
    #menus li a:hover {
    background-position:0 -31px;
    }
    #menus li.current_page_item a,
    #menus li.current-cat a {
    background-position:0 -62px;
    }
    #menus li a.home {
    background-position:0 -93px;
    width:45px;
    padding:0;
    margin-left:0;
    text-indent:-999em;
    }
    #menus li a.home:hover {
    background-position:0 -124px;
    }
    #menus li.current_page_item a.home {
    background-position:0 -155px;
    }
    #menus li a.lastmenu:hover {
    background-position:0 0;
    }

    .fixed, .clear {
    clear:both;
    }
    /* naviで追加終了 */

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • モデレーター jim912

    (@jim912)

    goodtimesさん、こんにちは。

    できましたら、回り込みが発生している場合htmlが分かるとアドバイスしやすいです。

    5階層未満と5階層以上の場合で、出力されるhtmlの違いは、リスト数と複数階層の表示になりますので、そのあたりが影響している可能性はあります。特に、cssを見た限り複数階層の表示は考慮していなさそうなので、どう表示されるか分かりません。

    また、<ul id=”menus”>に呼応するがなさそうなので、追加しておいた方がhtmlの完全性を保てます。

    トピック投稿者 goodtimes

    (@goodtimes)

    jim912さん
    こんにちは ご回答ありがとうございます

    できましたら、回り込みが発生している場合htmlが分かるとアドバイスしやすいです。

    htmlとは、これでよかったで・・すか?(すみません、よくわかってないもので・・)
    回り込みが発生しているページを右クリック→ソースを表示し、コピペしてきたものです

    現在、日本語が化けてまして、(最後に調べて解決しようと思って保留してました)
    ソース内コメントも一部文字化けしてます。
    ヘッダー部分のみコメントを英語に変えたのですけど、もしコンテンツ部のコメントも英語になおしたほうがよければ、変えます。

    header.phpを少しだけ一回目の投稿のときより変更しています
    回り込みが発生する箇所はかわっていません(日本語コメントがあるところが発生箇所です。実際のソースにはこのコメントはありません)
    関係ないかもですけど、一応今回のheader.phpをhtmlのあとに載せておきます

    html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja">
    
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>㈱テストテスト &raquo; あいうえおマネージャー</title>
    
    <link rel="stylesheet" href="http://unisonet.ciao.jp/wp-content/themes/Cheese/style.css" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="㈱テストテスト RSS フィード" href="http://unisonet.ciao.jp/?feed=rss2" />
    <link rel="alternate" type="application/atom+xml" title="㈱テストテスト Atom フィード" href="http://unisonet.ciao.jp/?feed=atom" />
    <link rel="pingback" href="http://unisonet.ciao.jp/xmlrpc.php" />
    
    <style type="text/css" media="screen">
    
    	#page { background: url("http://unisonet.ciao.jp/wp-content/themes/Cheese/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    
    </style>
    
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://unisonet.ciao.jp/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://unisonet.ciao.jp/wp-includes/wlwmanifest.xml" />
    <meta name="generator" content="WordPress 2.6.5" />
    
    </head>
    <body>
    <div id="page">
    
    <!-- header START -->
    <div id="header">
    	<div id="headerimg">
    		<h1><a href="http://unisonet.ciao.jp/">㈱テストテスト</a></h1>
    		<div class="description">Just another WordPress weblog</div>
    
    	</div>
    
    	<!-- navigation START -->
    	<div id="navigationbtn">
    		<ul id="menus">
    <!-- get how deep the page is -->
    									<!-- change navibutton whenever its =over 5/the deepest -->
    												<li class="page_item page-item-24"><a href="http://unisonet.ciao.jp/?page_id=24" title="概要・導入メリット">概要・導入メリット</a></li>
    <li class="page_item page-item-27"><a href="http://unisonet.ciao.jp/?page_id=27" title="機能一覧">機能一覧</a></li>
    
    		<li><a class="lastmenu" href="javascript:void(0);"></a></li>
    		</ul>
    		<div class="fixed"></div>
    	</div>
    	<!-- navigation END -->
    
    	<div class="fixed"></div>
    </div>
    <!-- header END -->
    <hr />
    
    	<div id="content" class="narrowcolumn">
    
    				<div class="post" id="post-18">
    		<h2>あいうえおマネージャー</h2>
    			<div class="entry">
    				あいうえおマネージャー
    
    							</div>
    		</div>
    
    			<a href="http://unisonet.ciao.jp/wp-admin/page.php?action=edit&amp;post=18" title="投稿の編集">この投稿を編集する。</a>
    
    	</div>
    
    		<div id="sidebar">
    
    		<ul>
    						<li>
    				<form method="get" id="searchform" action="http://unisonet.ciao.jp/">
    <label class="hidden" for="s">検索:</label>
    
    <div><input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="検索" />
    </div>
    </form>
    			</li>
    
    			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    			<li><h2>作成者</h2>
    			A little something about you, the author. Nothing lengthy, just an overview.
    
    			</li>
    			-->
    
    		<!-- �ڡ���ɽ����4���ؤޤ� -->
    			<!-- ���ڡ����κǾ��$ancestor����� -->
    			is page<li class="pagenav"><h2> </h2><ul><li class="page_item page-item-12 current_page_ancestor"><a href="http://unisonet.ciao.jp/?page_id=12" title="管理系ソフト">管理系ソフト</a>
    
    <ul>
    	<li class="page_item page-item-14 current_page_ancestor"><a href="http://unisonet.ciao.jp/?page_id=14" title="貸出管理">貸出管理</a>
    	<ul>
    		<li class="page_item page-item-16 current_page_ancestor current_page_parent"><a href="http://unisonet.ciao.jp/?page_id=16" title="あいうえおマネージャー シリーズ">あいうえおマネージャー シリーズ</a>
    		<ul>
    			<li class="page_item page-item-18 current_page_item"><a href="http://unisonet.ciao.jp/?page_id=18" title="あいうえおマネージャー">あいうえおマネージャー</a></li>
    			<li class="page_item page-item-21"><a href="http://unisonet.ciao.jp/?page_id=21" title="あいうえおマネージャーlight">あいうえおマネージャーlight</a></li>
    
    		</ul>
    </li>
    	</ul>
    </li>
    </ul>
    </li>
    </ul></li>
    
    		<!-- ������������ɽ��
    			<li><h2>アーカイブ</h2>
    				<ul>
    					<li><a href='http://unisonet.ciao.jp/?m=200901' title='2009 年 1 月'>2009 年 1 月</a></li>
    				</ul>
    			</li>
    		-->
    
    		<!-- ��ƥڡ����ϥ��ƥ���ɽ��ʬ��//is_home����ƥڡ�����ʬ��� -->
    		<!-- omajinai -->
    
    		<!-- �֥�������ɽ����//��å���ܡ��ɤǺ��������󥯤���ɽ��
    							<li id="linkcat-2" class="linkcat"><h2>ブログロール</h2>
    	<ul class='xoxo blogroll'>
    <li><a href="http://wordpress.org/development/">Development Blog</a></li>
    <li><a href="http://codex.wordpress.org/">Documentation</a></li>
    <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li>
    <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li>
    <li><a href="http://wordpress.org/support/">Support Forum</a></li>
    <li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
    <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>
    
    	</ul>
    </li>
    		-->
    
    		<!-- �᥿������ɽ��
    				<li><h2>メタ情報</h2>
    				<ul>
    					<li><a href="http://unisonet.ciao.jp/wp-admin/">サイト管理</a></li>					<li><a href="http://unisonet.ciao.jp/wp-login.php?action=logout">ログアウト</a></li>
    					<li><a href="http://validator.w3.org/check/referer" title="このページが XHTML 1.0 Transitional に準拠しているか確認する">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
    					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    									</ul>
    				</li>
    					-->
    					</ul>
    
    	</div>
    
    <hr />
    <div id="footer">
    <!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
    
    		Copyright (c) 2004--2008 ㈱テストテスト All rights reserved.
    		<!-- (��)��˥��ͥå� is proudly powered by WordPress ����ɽ��-->
    				<a href="http://unisonet.ciao.jp/?feed=rss2">投稿 (RSS)</a> と <a href="http://unisonet.ciao.jp/?feed=comments-rss2">コメント (RSS)</a>		<!-- 24 個のクエリと 0.423 秒を要しました。 -->
    
    </div>
    </div>
    
    <!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ -->
    
    		</body>
    </html>

    変更後header.php
    変更部(分岐追加)にコメント入れてます

    <!-- header START -->
    <div id="header">
    	<div id="headerimg">
    		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    		<div class="description"><?php bloginfo('description'); ?></div>
    	</div>
    
    	<!-- navigation START -->
    	<div id="navigationbtn">
    		<ul id="menus">
    <strong><!-- get how deep the page is --></strong>
    			<?php $depth = get_post_ancestors($post->ID); ?>
    			<?php if(empty($depth)) {
    				$depth = 0;}
    			else{
    				$depth = count($depth);
    			}?>
    			<?php $depth = $depth + 1; ?>
    <strong><!-- change navibutton whenever its =over 5/the deepest --></strong>
    			<?php if($depth < 5): ?>
    				<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
    <strong>			<?php else: ?>//*******回り込む*******
    				<?php if ( function_exists( 'has_child_page' ) && has_child_page() ) : ?>//*******この行から以下は追加した分岐です*******
    					<?php wp_list_pages('child_of=' . $post->ID . '&title_li=0&sort_column=menu_order'); ?>
    				<?php else :/*the deepest*/ ?>
    					<?php $ret = $post->post_parent ; ?>
    					<?php echo ($ret) ; ?>
    
    					<?php wp_list_pages('child_of=' . $ret . '&title_li=0&sort_column=menu_order'); ?>
    				<?php endif; ?>
    			<?php endif; ?></strong>
    
    		<li><a class="lastmenu" href="javascript:void(0);"></a></li>
    		</ul>
    		<div class="fixed"></div>
    	</div>
    	<!-- navigation END -->
    
    	<div class="fixed"></div>
    </div>
    <!-- header END -->
    <hr />

    トピック投稿者 goodtimes

    (@goodtimes)

    すみません
    二重投稿のため、内容削除します

    トピック投稿者 goodtimes

    (@goodtimes)

    二重投稿の削除したほうに対する自己フォロー?でしたので
    削除します。ごめんなさい。

    トピック投稿者 goodtimes

    (@goodtimes)

    < /UL > についてです

    最初からheader.phpにあったのですが
    私がソースをblockquoteでくくったために?一回目の投稿で消えてしまったみたいです?

    変更後header.phpは逆クオートでくくりまして、ul~/ulも見えてます
    これが本当の、わたしのheader.phpです

    1回目に見てもらったのにすみません・・

    モデレーター jim912

    (@jim912)

    goodtimesさん、こんにちは。

    サイト拝見させていただきました。
    回り込みがメニューの上にコンテンツが重なっている事を指しているのであれば、これは、#headerと#headerimgの高さの設定によるものです。

    #header、#headerimgともに200pxで指定されており、隙間がないにも関わらずメニューを差し込んだために、メニュー部分が#headerからはみ出してしまっているのですね。

    cssの253行目あたりにある#headerimgのheightを169pxに変更して、さらに

    #menus {
    margin: 0;
    padding: 0;
    }

    を追加してみてください。

    また、文字化けの原因ですが、テンプレートファイルの文字コードがEUCになっているためです。style.cssは追加したコメント部分がshift_jisになっているので、双方ともutf-8に統一しておきましょう。文字化けが原因でブラウザが解析を行えず表示不具合を起こすことも多々ありますので。

    トピック投稿者 goodtimes

    (@goodtimes)

    Jim912さん
    こんにちは
    ご回答ありがとうございます

    まず文字化けの件ですが、原因ご教示くださってありがとうございます!
    でも、ご教示くださった文字コードを変更しているのですが、UPすると文字化けたままの状態なんです。。

    正確に文字コード変更できているかも自信がないのですが(というか化けるということはできてないんでしょうね・・)、
    Jim912さんの仰る回り込みと私の回り込みがちょっとちがうので、先に投稿させてください

    回り込みがメニューの上にコンテンツが重なっている事を指しているのであれば、

    重なってるだけじゃないんです、すみません
    わたしが言っていた回り込みは、
    ※サイトを見てくださったようなので、サイトにつけている色でも説明します
    ※メニュー(赤)の「パッケージ」をクリックした状態での説明です

    1.メニュー(赤)に、コンテンツ(青)が重なっている
    2.メニュー(赤)とコンテンツ(青)の左端が揃ってない
    → トップページ(緑)のように、メニュー(赤)と左端をそろえたい
    → サイドバーのサブメニュー(色づけなし)の最下層(例えば「あいうえおマネージャー」をクリックしたときだけ、コンテンツが右にずれていました(=メニューに回り込んでる?)

    で、Jim912さんがご教示してくださったことをしましたら、

    1.はOKになりましたが
    2.が階層関係なしに、メニューに回り込むようになりました

    文字コード変更の件、引き続き調べてみます

    トピック投稿者 goodtimes

    (@goodtimes)

    jimさん
    ごめんなさい追記です

    わたしFireFoxでみてます
    ヴァージョンは3.0.5です

    いまIEでみたらキレイに表示できてるので、すみません
    きっとIEでごらんになってくださったんですね?
    大事なこと書き忘れてました、本当申し訳ないです、ごめんなさい

    トピック投稿者 goodtimes

    (@goodtimes)

    Jim912さん

    回り込み、解決しました!!
    解除の<div class=”fixed”></div>を、
    ヘッダーのしたにもだめもとで入れてやったらFireFoxでも解除してくれました!!
    IEにも影響でずです!
    ご指摘くださった重なってたところも直ってよかった!
    ピーチクパーチク騒がしくしてスミマセン

    文字化けはいまだ奮闘中ですが、タイトルの回り込み云々は解決したので
    一旦解決済みということにさせてください
    文字化けに関しては、過去ログにもあったような気がするので、そちらも参考にしてみます
    またお世話になるかもしれませんが、その際はよろしくお願いします

    ありがとうございました!

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「特定の場合のみ、回り込み解除をする?」には新たに返信することはできません。