ロゴ位置の変更とスマホ/PCで別々のロゴにする方法

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など ロゴ位置の変更とスマホ/PCで別々のロゴにする方法

このトピックには2件の返信が含まれ、2人の参加者がいます。4 年、 5 ヶ月前 ゆゆ さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #12541

    ゆゆ

    はじめまして。WordPress・CSS初心者です。
    Simplicityを発見し、とても気に入ったので使わせて頂いております。

    おそらく簡単な事なのだと思うのですが、
    フォーラム過去ログを見て修正してみても上手く行かなかったため、教えてください。

    サイトタイトルをロゴにしたいと考えています。
    そこで以下2点について分からなかったため教えてください。

    (1)ロゴ位置を Top 0,Left 0, の位置に表示させたいです。
     いろいろ試してみて、左寄せすることは出来たのですが、どうしても上位置を変更できませんでした。
     具体的にCSSの何処を編集すれば変更可能でしょうか?

    (2)PC版のロゴと、スマホ版のロゴを別の画像にしたいです。
     PC版は横長に、スマホ版は横幅300pxに収まるロゴにしたいと思っています。
     PC版とスマホ版のロゴを別の画像に設定することは可能でしょうか?
     簡単に修正できるようであれば教えて頂けると幸いです。

    初心者の質問で大変申し訳ございません。
    何卒よろしくお願いします。

  • #12593
    わいひら
    わいひら
    キーマスター

    とりあえず左上ピッタリにするには、style.cssに以下のように書けばいいかと思います。

    #site-title {
        margin-top: 0;
    }
    
    #header .alignleft {
        margin-left: 0;
    }

    パソコンとモバイルで、画像を入れ替えるには、header-logo.phpの以下の部分を

        $logo_url = ( get_header_logo_url() ? get_header_logo_url() : get_stylesheet_directory_uri().'/images/logo.png' );//ロゴ画像の取得
        $site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" /></a><span class="invisible" style="display:none;">'.get_bloginfo('name').'</span>'; 

    以下のようにすればよいかと思います。(動作未確認)

        $logo_url = ( get_header_logo_url() ? get_header_logo_url() : get_stylesheet_directory_uri().'/images/logo.png' );//ロゴ画像の取得
        if ( wp_is_mobile() ) {
          $logo_url = get_stylesheet_directory_uri().'/images/mobile-logo.png';//モバイルのロゴ画像のパス(子テーマ使用時)
        }
        $site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" /></a><span class="invisible" style="display:none;">'.get_bloginfo('name').'</span>';
  • #12747

    ゆゆ

    わいひら 様

    早急かつ的確なご返信誠にありがとうございました。
    (1)、(2)とも無事できました。
    大変助かりました。

    今後ともよろしくお願いします。

トピック「ロゴ位置の変更とスマホ/PCで別々のロゴにする方法」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)