サポート » 使い方全般 » ヘッダーの右側に問い合わせ画像を入れリンクしたいが位置が固定しない

  • WordPrssの使用は初心者です。
    ネットで有料テンプレートを使用しているのですが、ヘッダーの右上に「問い合わせ画像」を入れ底にリンクしたいと思っています。
    画像はどうにか表示でき右側のいい位置によったのですが、左側にあるtitle画像の設定が
    わるいのか、右側の画像が上に上がらず、左側の画像の下の位置にまでしか、
    動きません。
    Twenty Elevenを利用してカスタマイズされたタグを使用してみました。
    どこがどうなっているのか分からずどうか宜しくお願い致します。

    CSS

    /*************
    /* ヘッダー
    *************/
    
    #header h1 {
    padding: 5px 5px 0px 10px;
    font-size:14px;
    }
    
    #header h1 a{
    display: block;
    width: 220px;
    height: 55px;
    float: left;
    }
    
    #contact {
        float: right;
        width: 20%;
        margin-right: 7.6%;
        padding-top: 5px;
    }
    
    #branding hgroup {
        float: left;
        width: 80%;
        margin-right: 0px;
    #site-title {
        margin-right: 0px;
    }
    #site-description {
        margin-right: 0px;
    }

    header.php

    <!-- ヘッダー -->
    
    	<div id="header">
               <h1><?php bloginfo('name'); ?></h1>
               <!-- ロゴ -->
               <div class="logo">
               <a>"><img src="<?php bloginfo('template_directory');?>/images/logo.png" width="220" height="50" alt="Sample site" /></a>
               </div>
               <!-- / ロゴ -->
    
    <div id="contact">
    <a href="(お問い合わせフォームページのURLなど)"><img src="<?php bloginfo('template_directory');?>/images/header.png" width="243" height="72" alt="Sample site"></a>
    </div>
    	</div>
    	<!-- / ヘッダー -->

    どうかよろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは
    ロゴ画像の親ブロックが邪魔をしているからです。

    以下のスタイルを追加していただくと原因は、解ると思います。

    #contact,.logo{
    border:1px solid red;
    }

    以下変です

    /*************
    /* ヘッダー
    *************/
    
    ....
    
    "><img src="<?php bloginfo('template_directory');?>/images/logo.png" ....

    追伸
    ソースコードを記述する場合は
    コード全体を選択してから code ボタン押してください :)

    トピック投稿者 fujintoco

    (@fujintoco)

    nobitaさん

    ありがとうございます。
    スタイルを入れてみました。赤い枠が出たので、
    これが邪魔だったのかな?って思いました。
    ただ・・・これをどう修正するのかがわかりません。
    なんとも超初心者でして…
    すみません・・・

    また、「ソースコードの記述」とありますが…
    どこが変なのかもわかりません…すみません…

    ご指導いただけると幸いです。
    宜しくお願いいたします。

    問い合わせ画像を上に上げるだけでしたら、以下を追加してみてください。

    .logo{
    float:left;
    }

    このスタイル指定が、どっかでコピペしたものでしたら、せっかくの機会なので、CSSの勉強してみるといいですよ。

    また、「ソースコードの記述」とありますが…
    どこが変なのかもわかりません…すみません…

    あっ、ごめんなさい
    ちゃんとなってますね 勘違いしたみたいです

    トピック投稿者 fujintoco

    (@fujintoco)

    nobitaさん

    ありがとうございます。
    無事出来ました!

    本当に安堵しました。

    もっとCSSを勉強しなければと思います。
    がんばります。

    本当にありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「ヘッダーの右側に問い合わせ画像を入れリンクしたいが位置が固定しない」には新たに返信することはできません。