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

PR 2014/12/15

このトピックには2件の返信、2人の参加者があり、最後にゆゆにより11年前に更新されました。

2件の返信スレッドを表示中

投稿者

投稿
- 2014年12月14日 1:13 PM #12541
  
  ゆゆ
  ゲスト
  
  はじめまして。WordPress・CSS初心者です。
  Simplicityを発見し、とても気に入ったので使わせて頂いております。
  
  おそらく簡単な事なのだと思うのですが、
  フォーラム過去ログを見て修正してみても上手く行かなかったため、教えてください。
  
  サイトタイトルをロゴにしたいと考えています。
  そこで以下2点について分からなかったため教えてください。
  
  （１）ロゴ位置を　Top 0,Left 0,　の位置に表示させたいです。
  　いろいろ試してみて、左寄せすることは出来たのですが、どうしても上位置を変更できませんでした。
  　具体的にCSSの何処を編集すれば変更可能でしょうか？
  
  （２）PC版のロゴと、スマホ版のロゴを別の画像にしたいです。
  　PC版は横長に、スマホ版は横幅300pxに収まるロゴにしたいと思っています。
  　PC版とスマホ版のロゴを別の画像に設定することは可能でしょうか？
  　簡単に修正できるようであれば教えて頂けると幸いです。
  
  初心者の質問で大変申し訳ございません。
  何卒よろしくお願いします。
- 2014年12月15日 3:46 AM #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>';
```
- 2014年12月15日 9:32 PM #12747
  
  ゆゆ
  ゲスト
  
  わいひら　様
  
  早急かつ的確なご返信誠にありがとうございました。
  （１）、（２）とも無事できました。
  大変助かりました。
  
  今後ともよろしくお願いします。
投稿者

投稿