サポート » 使い方全般 » 画像ポップアップのcssとjsを停止するとヘッダー画像とメニューの間が狭

  • nashikuzushi

    (@nashikuzushi)


    表題の件ですが下記トピックの続きとなります。
    https://ja.forums.wordpress.org/topic/158151?replies=19

    使用テーマ「Fluxipress」
    https://ja.wordpress.org/themes/fluxipress/

    ・トップページと同じテンプレートを適応している固定ページ以外の「固定ページ」
    ・全記事ページ
    が表題の様に狭くなってしまいます。

    何故か画像ポップアップのcssとjsを停止すると
    ヘッダー画像とメニューの間が狭くなります。

    >>nobitaさま

    ご回答ありがとうございます。
    ヘッダー画像は自分で指定しました。

    header.phpに直接imgタグで指定しております。
    画像を横並びにして、ホバーで画像が変わるようにしております。
    下記がソースとなります。

    <div id="header">
    		<div class="wrap">
    			<div class="inner">
    				<?php if(is_home()) : ?><h1 id="blog-title"><?php else : ?><strong id="blog-title"><?php endif; ?>
    					<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name')); ?>"><img src=".../images/head_1.jpg" onmouseover="this.src='.../images/head_1h.gif'" onmouseout="this.src='.../images/head_1.jpg'" /><img src=".../images/hagu.gif" onmouseover="this.src='.../images/hagu_r.gif'" onmouseout="this.src='.../images/hagu.gif'" /><img src=".../images/head_2_2.jpg"  style="margin-right:50px;" /><img src=".../images/head_3.jpg"></a>
    				<?php if(is_home()) : ?></h1><?php else : ?></strong><?php endif; ?>
    				<div id="menu">
    				<?php
    					wp_nav_menu(array(
    						'theme_location' => 'primary',
    						'container' => false
    					));
    				?>
    				</div>
    			</div>
    		</div>
    	</div>

    下記画像の「正解」に全てのページもしたいです。
    固定ページと記事ページは「不正解」の方になってしまっております。
    http://www.fastpic.jp/images.php?file=8562508992.jpg

    以上となります。

    大変お手数ですがご確認をよろしくお願い致します。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • nobita

    (@nobita)

    マージン等は、CSSがメインになるので、htmlソースだけでは、何とも答えられないのですが、

    こちらでも、一通りのテストはしてみたのですが、レスポンシブの部分で問題が発生します。

    画像の高さに問題が出るようです。 テーマのjsの影響かなといったところですが

    マージンだけの問題で収まっているなら、良い方なのかもしれないですね。

    それぞれのページで、マージンの調整を行っていただくしかないかも、、、

    nashikuzushi

    (@nashikuzushi)

    >>nobitaさん

    ご回答ありがとうございます。
    テストの方もしていただき感謝です。

    >>レスポンシブの部分で問題が発生します。

    こちらですが、私の環境ではレスポンシブにしても
    問題は見受けられなかったのですが、
    どのような問題がございましたでしょうか?

    >>それぞれのページで、マージンの調整を行っていただくしかないかも、、、

    それが一番早そうですね…
    ありがとうございます。

    大変お手数なのですが、よろしくお願い致します。

    nobita

    (@nobita)

    >>レスポンシブの部分で問題が発生します。

    こちらですが、私の環境ではレスポンシブにしても
    問題は見受けられなかったのですが、
    どのような問題がございましたでしょうか?

    テストの条件が悪かったみたいで、苦しくなって、「テーマのjsの影響かなといったところですが」 テーマのせいにしてしまったようです。

    ごめんなさい。

    一応テストの条件書いておきますね。

    functions.php

    function extend_custom_header_setup() {
    	$args = array(
    		// Text color and image (empty to use none).
    		'default-text-color'     => '515151',
    		'default-image'          => '',
    
    		// Set height and width, with a maximum value for the width.
    		'height'                 => 250, //px
    		'width'                  => 1120, //px
    
    		// Support flexible height and width.
    		'flex-height'            => true,
    		'flex-width'             => true,
    
    		// Random image rotation off by default.
    		'random-default'         => false,
    
    		// Callbacks for styling the header
    		'wp-head-callback'       => 'extend_header_style',
    
    	);
    
    	add_theme_support( 'custom-header', $args );
    }
    add_action( 'after_setup_theme', 'extend_custom_header_setup' );
    
    function extend_header_style() {
    
    	$property = get_custom_header();
    	?>
    	<style type="text/css">
    
    		.header-image-wrapper{
    			width:1120px;
    			margin:32px auto;
    
    		}
    		.lt-1280 .header-image-wrapper{
    			width:90%;
    		}
    		.lt-640 .header-image-wrapper img{
    			width:100%;
    		}
    		.header-image-wrapper img{
    			width:32.3%;
    			height:auto;
    			max-width:100%;
    			margin:.5%;
    		}
    		.header-image-wrapper a{
    			/* 改行スペース相殺 */
    			margin-left:-4px;
    		}
    
    	</style>
    	<?php
    }

    OK

    <?php
    if ( has_header_image() ) {?>
    	<div class="header-image-wrapper">
    	 	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
    			<img src="<?php header_image(); ?>" class="header-image"  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
    		</a>
    	 	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
    			<img src="<?php header_image(); ?>" class="header-image"  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
    		</a>
    	 	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
    			<img src="<?php header_image(); ?>" class="header-image"  alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
    		</a>
    	</div>
    <?php } ?>
    
    	<div id="main" class="wrap clear">

    テスト条件1200×400のヘッダー画像、640pxで横並び解除

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「画像ポップアップのcssとjsを停止するとヘッダー画像とメニューの間が狭」には新たに返信することはできません。