Simplicityヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など Simplicityヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法

このトピックには9件の返信が含まれ、1人の参加者がいます。1 週前 kazu さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #61020

    kazu

    https://wp-simplicity.com/header-logo/
    ⇒こちらを拝見いたしまして以下2つご質問になります。

    ①子テーマを使用している場合は、オリジナルのheader-logo.phpを子テーマ内のフォルダ内にコピーして編集する
    ⇒子テーマ内のフォルダとは、どのテーマファイルになりますでしょうか。

    ②まずはエディターの検索機能なのでheade-logor.php内の以下の部分を見つけてください。

    <?php $site_title = '<a href="'.home_url('/').'">'.get_bloginfo('name').'</a>' ?>

    ⇒以下の様に<?php if 内に似たような書式は見つかりましたが、こちらを変更することで間違いないでしょうか。

     `<?php if ( get_header_logo_url() )://ヘッダーロゴを画像が設定されている場合
    $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>’;
    else://ロゴがテキストの場合(デフォルト)
    $site_title = ‘<a href=”‘.home_url(‘/’).'”>’.get_bloginfo(‘name’).'</a>’;
    endif;
    ?>`
     

  • #61028

    Akira

    ロゴ画像は、テーマ設定で設定できます。

    WordPress 管理画面 → 外観 → カスタマイズ → ヘッダーより、「ロゴ画像」に画像を設定し、「ロゴを画像にする」にチェックを入れます。

  • #61029

    kazu

    有難うございます。

    ちなみに、このロゴ画像の設定後、レスポンシブに表示した際に画像サイズが変わらないのですが、
    ロゴ画像のサイズ比率をブラウザごとに変更するCSSの記述はどのようなものでしょうか。

  • #61031

    Akira

    画面幅に応じて変更するには、メディアクエリを使います。

    画面幅 480px 以下(おおむねスマホ)でロゴ画像のサイズを変更されたい場合には、このように書きます。

    @media screen and (max-width: 480px) {
      
      .site-title-img {
        width: 100px;
      }
    }
  • #61032

    かうたっく

    Akiraさんのstyleを試してみましたか?その意図ではない場合ですが。

    ちなみに、このロゴ画像の設定後、レスポンシブに表示した際に画像サイズが変わらないのですが、

    レスポンシブにした際とはどのようにされた場合でしょうか?Simplicityの設定で試した。もしくはブラウザの左右横幅を狭くした際でしょうか?

    設定によっては、再読み込みが必要になります。

    ロゴ画像のサイズ比率をブラウザごとに変更するCSSの記述はどのようなものでしょうか。

    ロゴの比率がブラウザによって、おかしくなるということでしょうか??

    詳細が不明なので、URLを置いていただけたらと思います。

    もしくは以下CSSで試してみると、どうなりますか?

    div, img {
    	max-width: 100%;
    	height: auto;
    }
    iframe {
    	max-width: 100%;
    }

    https://bibabosi-rizumu.com/simplicity-img-iframe-table-width/

    この意図でもない場合、詳細を書いていただけますか?

    一番早いのはURLを提示して、回答者さんに設定の全確認してもらい状況を把握できるよう確認してもらう事も手かと思います。

    時間とらせて気を遣うところかも知れませんが…。

  • #61033

    kazu

    Akiraさん
    かうたっくさん

    お付き合い有難うございます。
    また、言葉足らずですみません。。

    レスポンシブにした際とはどのようにされた場合でしょうか?Simplicityの設定で試した。もしくはブラウザの左右横幅を狭くした際でしょうか?

    ⇒Simplicityのカスタマイザー設定で『完全レスポンシブ表示を有効』にチェックを入れているだけです。

    ロゴの比率がブラウザによって、おかしくなるということでしょうか??
    詳細が不明なので、URLを置いていただけたらと思います。

    ⇒chromeの検証ツールでiphone5・SEなどで見ると少し画像が大きく縮小率を高く設定できないかと思いまして。
    URLはこちらです。
    https://xn--88jyb7au1w3dtbc1i7r935ym56h5wk.com

    ロゴ自体の元画像やヘッダー画像のそのものの問題でしょうか。

  • #61034

    Akira

    画面幅 360px だとちょうどいい感じ。それ以下の画面幅だと、ヘッダー画像のテキスト部分とかぶりますね。

    それならば、こんな感じの CSS でいいと思います。

    @media screen and (max-width: 359px) {
      
      .site-title-img {
        width: 47%;
      }
    }

    もしくは、ロゴ画像の幅を固定するのもありです。

    @media screen and (max-width: 359px) {
      
      .site-title-img {
        width: 140px;
      }
    }
  • #61035

    かうたっく
    @media screen and (max-width: 480px) {
    	.site-title-img {
    		width: 130px;
    		height: auto;
    	}
    }

    スマホビューではロゴを小さくするCSSです。Chromeではheight: auto;は要らないみたいですが、念のため。

    数値は任意の大きさでご確認いただけますか?

  • #61036

    かうたっく

    Akiraさんとかぶった^^;

    お疲れ様です!

  • #61037

    kazu

    Akiraさん
    かうたっくさん

    解決しました!
    本当にありがとうございます。

トピック「Simplicityヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法」への新規返信追加は締め切られています。

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