WordPressテーマ「AN (tcd014)」

TCDテンプレートでヘッダーロゴの画像をスマホでも表示させる

ヘッダーロゴをスマホでも表示させる

このサイトで使用しているTCDテンプレート「AN」では、ヘッダーロゴの画像はスマホだと非表示になっていて、ただのテキストでサイトタイトルが表示されるようになっています。

スマホから見たときもサイトタイトルを画像で表示させたい場合には「style_sp.css」を直す必要があります。

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

display:none;を削除する

スマホで見たときにヘッダーロゴの画像がテキストで表示されるのは、スマホ用のCSSではロゴ画像に「display:none;」が設定されていて、#logo a:before { content:attr(data-label); }という記述によって、サイトタイトルがテキストで表示されるようになっているからです。

変更後

/* logo */
#logo_text, #logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:40%; overflow:hidden; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img {  }

#logo img { display:none; }を削除あるいはコメントアウトすることで、ロゴ画像が表示されるようになります。

ロゴ画像が表示されれば、テキストで表示されるサイトタイトルは必要なくなりますので、#logo a:before { content:attr(data-label); }も削除あるいはコメントアウトするといいと思います。

以上の変更でヘッダーにもロゴ画像が表示されるようになりますが、多くの場合、ロゴ画像が途中で切れたりしてちゃんと表示されないと思います。

そのような場合には、ロゴが表示される領域の幅(width)なども一緒に修正する必要があります。

ヘッダーロゴが表示される領域を広げる

ロゴ画像が途中で切れてしまうのは、「overflow:hidden;」によってロゴ画像の領域を超えた部分が表示されないようになっていること、そもそものロゴを表示する領域の横幅(width)が狭いことのふたつが原因です。

変更後

/* logo */
#logo_text, #logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:80%; }
#logo_text a, #logo a { color:#333; text-decoration:none; display:block; }
#logo_text a:hover, #logo a:hover { text-decoration:underline; }
#logo img { max-width:100%; height:auto; }

#logo_text, #logo に書かれている「overflow:hidden;」を削除するだけでもきれいに表示されることがあると思います。

ですが、このサイトのようにロゴ画像の横幅が大きかったりすると、画像がスマホの横幅を超えてしまって、今度はスマホの横幅を超えた部分が表示されないことになったりするので、そのようなときには、#logoのwidthの値も変えるといいです。

ロゴ画像の右側にはグローバルメニューのメニューボタンが入りますので、#logoのwidthの値は最大でも80%程度にとどめるのがいいと思います。

また、ロゴ画像(#logo img)の幅に、max-width:100%; と指定することで、画像が表示される領域の横幅に対してロゴ画像の幅が100%で表示されるようにしています。このようにすることで、サイトを閲覧する端末によって、最大でロゴ画像のサイズまで、自動的に拡大・縮小されるようになります。

このとき、height:auto; を一緒に書いておかないと、画像の縦横比がおかしくなってしまいますので気をつけくださいね。

ロゴマルシェ - LogoMarche

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (25)
    • ishikawa
    • 2015年 2月 13日

    あなたのサイトとっても役に立ってます。初心者の私でもTCDカスタマイズできました。今回は、スマホのロゴ画像表示で助けてもらいました。ありがとうございます。TCD18ですが、同じようにできました。TCD14も持っていて運営しています。これから参考にしようと思います。感謝

      • まりー
      • 2015年 2月 13日

      ishikawaさん、こんにちは。
      コメントありがとうございます。

      tcd018でも同じように出来たのですね。
      ishikawaさんのお役に立ててよかったです♪

  1. 参考にさせていただいています。
    ここを参考に二つのサイトのスマホ用ロゴを設置できました。

    http://spotnote.yokohama
    http://jazzy-navel

    こちらのサイトではもともと設置したロゴの幅が320以下だったためすんなりできたのですが、
    350にしてしまったこちらのサイトでは参考にしたコードを書き換えてもはみ出てしまいました。

    http://spotnote.jp/

    #logo img { max-width:100%; height:auto; }
    はデバイスの幅100パーセントに広がるということですよね?
    念のため小さくしてみたりしてもうまくいきませんでした。

    #logo_text, #logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:90%; overflow:hidden; }

    こちらも念のため80%とかにしたのですがうまくいきませんでした。

    キャッシュは削除して再表示させているので読み込みミスなどではないと思います。

    テーマはblogpressなのですが、アドバイスいただけませんでしょうか?

  2. http://jazzy-navel.comでした。

  3. ちなみに編集前のロゴあたりのコードはこんな感じでした。

    #header { position:relative; background:#333; z-index:9; margin:0 0 20px 0; position:relative; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); padding:12px 0; }

    /* logo */
    #logo_area h1 { margin:0 0 0 10px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:40%; overflow:hidden; padding:0; }
    #logo_area a { color:#fff; text-decoration:none; display:block; }
    #logo_area a:hover { }
    #logo_image img { display:none; }
    #logo_image a:before { content:attr(title); }
    #description { display:none; }
    *:first-child+html #logo_image img { display:block; height:25px; width:auto; }
    *:first-child+html #logo_image { margin-top:4px; }

      • まりー
      • 2015年 2月 13日

      masakiさん、こんばんは。
      コメントありがとうございます。

      CSSのコードもありがとうございます。

      まず、max-width:100%; というのは、デバイスの幅100%に広がるのではなく、
      h1の領域(width:40%)の中で、100%に広がるということです。

      ですので、まずh1の領域を40%から100%(または90%)にします。

      #logo_area h1 { margin:0 0 0 10px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:100%; overflow:hidden; padding:0; }

      そして、#logo_image img に max-width:100%; height:auto; を書き足してみてください。

      #logo_image img { max-width:100%; height:auto; }

      これで、どうでしょうか。
      私はBlogPressを持っていないので、
      これで出来なかったら、あとは分かりかねます(>_<) 申し訳ありません。 ちなみに #logo_text, #logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:18px; font-weight:normal; width:90%; overflow:hidden; } ↑この1行は、ANでの話なので、書き足さないでくださいね。

      • ご教授ありがとうございます!
        無事設置できました!

        しかしなぜかiPhone6で記事ページをみたときのみ右側に数pxの空白ができてしまいました。
        アドセンスのズレが原因でもないみたいで(iPhone5だと大丈夫でした。)ロゴを元に戻しても空白ができっぱなしでテーマをいじると他のなにかがくずれたりするケースをしっていたら教えてくれますでしょうか?

        http://spotnote.jp/wp-content/uploads/2015/02/image.jpg

        変更した箇所を元に戻しても空白があいてしまいます。

        質問と離れてしまっているのですがよろしければヒントをいただけませんでしょうか?

          • まりー
          • 2015年 2月 14日

          masakiさん、無事に設置できたようでよかったです♪

          私は、iPhoneを持っていないので、はっきりとはわからないのですが、
          iPhone5とiPhone6では、画面のサイズが違いますよね?

          調べてみたところ、それぞれの画面の横幅は、
          iPhone5が320px、iPhone6が375pxのようです。
          ↓参考サイト
          http://webskillup.com/ety/20140919180945/

          masakiさんのサイトは、ロゴ画像のサイズが350pxなので、
          iPhone6の横幅より小さいですよね。
          そのため、iPhone6で見たときのみ、右に余白が出来てしまうのだと思います。

          面倒だと思いますが、一度ロゴ画像を400pxぐらいの幅にして
          アップロードしなおしてみてはどうでしょうか。

    • ぶろう
    • 2015年 2月 13日

    TCD013でも出来ました^^
    こんなに簡単にできるとは思ってませんでした

    説明もわかり易くて助かりました^^

      • まりー
      • 2015年 2月 13日

      ぶろうさん、こんばんは。
      コメントありがとうございます。

      Gorgeousでも出来たのですね。
      お役に立ててよかったです♪

    • komugi0421
    • 2015年 2月 23日

    はじめまして。ホームページを作りはじめて6ヶ月になりますが
    無料のテーマではなかなか上手く作れず最近TCDのANのテーマを
    購入しました。htmlやcssの知識は全くの素人なので、まりーさんの
    ブログが、と〜〜っても参考になり本当に助かっています。
    今は本を読みながら勉強中ですがなかなか理解が出来ずにいるので
    これからも参考にさせていただきたいと思います!ありがとうございます!

      • まりー
      • 2015年 2月 23日

      komugi0421さん、はじめまして。
      コメントありがとうございます♪

      htmlやcssなどは、私も独学で、
      まだまだ勉強中です(´∀`*)ゞ

      記事内でわかりにくいところなどあれば
      またいつでもおっしゃってくださいね♪

    • 始めまして
    • 2015年 3月 20日

    困った時は良く拝見させていただいております。
    わかりましたら教えていただきたいことがあります
    TCDでスライドショーのスライド表示秒数等の設定はテーマ編集どこからおこなえば良いか教えてください!

      • まりー
      • 2015年 3月 20日

      こんにちは。
      コメントありがとうございます。

      スライダーの表示秒数は、header.php で変更できます。
      以下の部分を探してください。

      jQuery(window).on(‘load’,function() {
      jQuery(‘#slider’).nivoSlider({
      effect: ‘sliceDown’,
      manualAdvance: false,
      directionNav: true,
      controlNav: false,
      controlNavThumbs: false,
      pauseTime: 5000
      });
      });

      pauseTime: 5000 というのが、表示される秒数です。
      5000は、5秒です。3秒にするなら3000、7秒にするなら7000 というように変更してください。

      また何かあればいつでもおっしゃってくださいね♪

    • やみねこ
    • 2015年 7月 05日

    はじめまして。TCD019でスマホにもロゴを表示させたくいろいろ探していたところこちらに辿り着きました。
    記事を参考にさせていただき、下記のようなコードで目的が達成出来ましたのでご報告させてください。
    クライアントの方にもきっと喜んで貰えるはず・・・と勝手に思っております。
    ありがとうございました!m(_ _)m

    /* logo */
    #logo_text, #logo_image { margin:7px 5px 0; line-height:120%; float:left; font-size:18px; font-weight:normal; width:90%; overflow:hidden; }
    #logo_text a, #logo_image a { color:#333; text-decoration:none; display:block; }
    #logo_text a:hover, #logo_image a:hover { }
    #logo_image img { display:block; max-width:100%; width:auto; height:auto; }

      • まりー
      • 2015年 7月 05日

      やみねこさん、こんばんは。
      コメントありがとうございます♪

      TCD019でも上手くできたようで、よかったです。
      自分の説明の仕方に自信がないので、
      上手くできたよーという報告は、大変嬉しいです♪

  4. まりーさんこんにちは。
    この記事を参照に、編集させていただきました。
    記事のページやアーカイブや、カテゴリの表示はバッチリできるのですが、トップだけ、アドセンスと重なってしまいます。何か対処法はご存じではないでしょうか??

    お手すきの際に、コメントいただければ幸いです!

      • まりー
      • 2015年 8月 05日

      kojimaさん、コメントありがとうございます。
      サイト拝見させていただきました。

      スマホで表示した場合、トップページだけが、
      ヘッダーロゴ画像とAdSenseが重なってしまうということでしょうか。

      テーマが違うので、まったくわからないですが、
      AdSenseコードを張っている場所はどうでしょうか?

      テーマオプション内に、ヘッダーの広告、トップページの広告、
      スマホ用の広告などいくつかあると思います。
      どこにコードを張ったら、どこに広告が表示されるのか、
      今一度、確認してみてはどうでしょう。

      答えになっていなくて、申し訳ありません。

    • ゆーつー
    • 2015年 8月 19日

    とても参考になりました。

    tcdのNEXTAGEというテーマを使っていたのですが、スマホをロゴにすることができず、3日間悩んでいたことがたまたま拝見したこのブログであっさり解決できました。

    感謝致します!
    これからも応援しております。

      • まりー
      • 2015年 8月 20日

      ゆーつーさん、こんにちは。
      コメントありがとうございます♪

      あっさり解決できたとの事、よかったです。
      AN以外のTCDテーマでも上手くできたよー、というコメントは、
      他の方の参考にもなると思うので助かります♪

    • kengo
    • 2015年 10月 05日

    このページを参考に修正完了しました
    ありがとうございました!

    そこそこ長いサイトタイトルだったのでテキスト表示だとブサイクだったんですがスッキリしました!
    ファーストビューは重要ですからね。直帰率やら訪問者ページ閲覧数が改善すると思います。

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

      • まりー
      • 2015年 10月 05日

      kengoさん、こんばんは。
      コメントありがとうございます。

      うまくいってよかったです♪

      また何かあればいつでもお声かけください。

    • 竹下
    • 2016年 9月 24日

    昨日はありがとうございました!

    スマホ時のヘッダーロゴ表示もこのページで助かりました^^
    ただ、該当コードの削除でロゴ表示はできるのですが、
    PC表示ではあるリンクが消えてしまうと思います。

    スマホのロゴにもリンクを有効にする方法はありますか?
    お忙しい中、申し訳ありませんがご教授ください。

      • まりー
      • 2016年 9月 24日

      竹下さん、おはようございます。

      ヘッダーロゴがリンクになっているのは、
      header-logo.php で指定されているからです。

      なので、PC表示でリンクが張られているのに、
      スマホ表示の時だけリンクが消えてしまうというのは、
      考えられないのですが…。

      ロゴは、テーマオプションからアップロードしているのでしょうか?

      メールでもいいので、詳しい状況をご連絡いただけますでしょうか。
      よろしくお願いします。

        • 竹下
        • 2016年 9月 25日

        まりーさん

        ご回答ありがとうございました。
        詳細をメールでお送りしましたので、
        お時間のございます時にでも拝見ください。

        よろしくお願いいたします。

サイト内検索

おすすめ記事

Tweet

ページ上部へ戻る