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; を一緒に書いておかないと、画像の縦横比がおかしくなってしまいますので気をつけくださいね。
関連記事
コメント
- トラックバックは利用できません。
- コメント (25)
あなたのサイトとっても役に立ってます。初心者の私でもTCDカスタマイズできました。今回は、スマホのロゴ画像表示で助けてもらいました。ありがとうございます。TCD18ですが、同じようにできました。TCD14も持っていて運営しています。これから参考にしようと思います。感謝
ishikawaさん、こんにちは。
コメントありがとうございます。
tcd018でも同じように出来たのですね。
ishikawaさんのお役に立ててよかったです♪
参考にさせていただいています。
ここを参考に二つのサイトのスマホ用ロゴを設置できました。
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なのですが、アドバイスいただけませんでしょうか？
http://jazzy-navel.comでした。
ちなみに編集前のロゴあたりのコードはこんな感じでした。
#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; }
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
変更した箇所を元に戻しても空白があいてしまいます。
質問と離れてしまっているのですがよろしければヒントをいただけませんでしょうか？
masakiさん、無事に設置できたようでよかったです♪
私は、iPhoneを持っていないので、はっきりとはわからないのですが、
iPhone5とiPhone6では、画面のサイズが違いますよね？
調べてみたところ、それぞれの画面の横幅は、
iPhone5が320px、iPhone6が375pxのようです。
↓参考サイト
http://webskillup.com/ety/20140919180945/
masakiさんのサイトは、ロゴ画像のサイズが350pxなので、
iPhone6の横幅より小さいですよね。
そのため、iPhone6で見たときのみ、右に余白が出来てしまうのだと思います。
面倒だと思いますが、一度ロゴ画像を400pxぐらいの幅にして
アップロードしなおしてみてはどうでしょうか。
TCD013でも出来ました＾＾
こんなに簡単にできるとは思ってませんでした
説明もわかり易くて助かりました＾＾
ぶろうさん、こんばんは。
コメントありがとうございます。
Gorgeousでも出来たのですね。
お役に立ててよかったです♪
はじめまして。ホームページを作りはじめて６ヶ月になりますが
無料のテーマではなかなか上手く作れず最近TCDのANのテーマを
購入しました。htmlやcssの知識は全くの素人なので、まりーさんの
ブログが、と〜〜っても参考になり本当に助かっています。
今は本を読みながら勉強中ですがなかなか理解が出来ずにいるので
これからも参考にさせていただきたいと思います！ありがとうございます！
komugi0421さん、はじめまして。
コメントありがとうございます♪
htmlやcssなどは、私も独学で、
まだまだ勉強中です(´∀｀*)ゞ
記事内でわかりにくいところなどあれば
またいつでもおっしゃってくださいね♪
困った時は良く拝見させていただいております。
わかりましたら教えていただきたいことがあります
TCDでスライドショーのスライド表示秒数等の設定はテーマ編集どこからおこなえば良いか教えてください！
こんにちは。
コメントありがとうございます。
スライダーの表示秒数は、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 というように変更してください。
また何かあればいつでもおっしゃってくださいね♪
はじめまして。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; }
やみねこさん、こんばんは。
コメントありがとうございます♪
TCD019でも上手くできたようで、よかったです。
自分の説明の仕方に自信がないので、
上手くできたよーという報告は、大変嬉しいです♪
まりーさんこんにちは。
この記事を参照に、編集させていただきました。
記事のページやアーカイブや、カテゴリの表示はバッチリできるのですが、トップだけ、アドセンスと重なってしまいます。何か対処法はご存じではないでしょうか？？
お手すきの際に、コメントいただければ幸いです！
kojimaさん、コメントありがとうございます。
サイト拝見させていただきました。
スマホで表示した場合、トップページだけが、
ヘッダーロゴ画像とAdSenseが重なってしまうということでしょうか。
テーマが違うので、まったくわからないですが、
AdSenseコードを張っている場所はどうでしょうか？
テーマオプション内に、ヘッダーの広告、トップページの広告、
スマホ用の広告などいくつかあると思います。
どこにコードを張ったら、どこに広告が表示されるのか、
今一度、確認してみてはどうでしょう。
答えになっていなくて、申し訳ありません。
とても参考になりました。
tcdのNEXTAGEというテーマを使っていたのですが、スマホをロゴにすることができず、3日間悩んでいたことがたまたま拝見したこのブログであっさり解決できました。
感謝致します！
これからも応援しております。
ゆーつーさん、こんにちは。
コメントありがとうございます♪
あっさり解決できたとの事、よかったです。
AN以外のTCDテーマでも上手くできたよー、というコメントは、
他の方の参考にもなると思うので助かります♪
このページを参考に修正完了しました
ありがとうございました！
そこそこ長いサイトタイトルだったのでテキスト表示だとブサイクだったんですがスッキリしました！
ファーストビューは重要ですからね。直帰率やら訪問者ページ閲覧数が改善すると思います。
ありがとうございました。
kengoさん、こんばんは。
コメントありがとうございます。
うまくいってよかったです♪
また何かあればいつでもお声かけください。
昨日はありがとうございました！
スマホ時のヘッダーロゴ表示もこのページで助かりました＾＾
ただ、該当コードの削除でロゴ表示はできるのですが、
PC表示ではあるリンクが消えてしまうと思います。
スマホのロゴにもリンクを有効にする方法はありますか？
お忙しい中、申し訳ありませんがご教授ください。
竹下さん、おはようございます。
ヘッダーロゴがリンクになっているのは、
header-logo.php で指定されているからです。
なので、PC表示でリンクが張られているのに、
スマホ表示の時だけリンクが消えてしまうというのは、
考えられないのですが…。
ロゴは、テーマオプションからアップロードしているのでしょうか？
メールでもいいので、詳しい状況をご連絡いただけますでしょうか。
よろしくお願いします。
まりーさん
ご回答ありがとうございました。
詳細をメールでお送りしましたので、
お時間のございます時にでも拝見ください。
よろしくお願いいたします。