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

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

  • このトピックには2件の返信、2人の参加者があり、最後にゆゆにより5年、 2ヶ月前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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)とも無事できました。
      大変助かりました。

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

2件の返信スレッドを表示中
  • トピック「ロゴ位置の変更とスマホ/PCで別々のロゴにする方法」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)