何をしてあげられるという訳じゃないBlog微かな戸惑いをそっと吐きだすまりーのブログ。itこのサイトで使用しているTCDテンプレート「AN」では、ヘッダーロゴの画像はスマホだと非表示になっていて、ただのテキストでサイトタイトルが表示されるようになっています。スマホから見たときもサイトタイトルを画像で表示させたい場合には「style_sp.css」を直す必要があります。バックアップを取って自己責任でお願いします。何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。}という記述によって、サイトタイトルがテキストで表示されるようになっているからです。}を削除あるいはコメントアウトすることで、ロゴ画像が表示されるようになります。}も削除あるいはコメントアウトするといいと思います。以上の変更でヘッダーにもロゴ画像が表示されるようになりますが、多くの場合、ロゴ画像が途中で切れたりしてちゃんと表示されないと思います。そのような場合には、ロゴが表示される領域の幅(width)なども一緒に修正する必要があります。ヘッダーロゴが表示される領域を広げるロゴ画像が途中で切れてしまうのは、「overflow:hidden;」によってロゴ画像の領域を超えた部分が表示されないようになっていること、そもそものロゴを表示する領域の横幅(width)が狭いことのふたつが原因です。書かれている「overflow:hidden;」を削除するだけでもきれいに表示されることがあると思います。このサイトのようにロゴ画像の横幅が大きかったりすると、画像がスマホの横幅を超えてしまって、今度はスマホの横幅を超えた部分が表示されないことになったりするので、そのようなときには、#logoのwidthの値も変えるといいです。ロゴ画像の右側にはグローバルメニューのメニューボタンが入りますので、#logoのwidthの値は最大でも80%程度にとどめるのがいいと思います。指定することで、画像が表示される領域の横幅に対してロゴ画像の幅が100%で表示されるようにしています。このようにすることで、サイトを閲覧する端末によって、最大でロゴ画像のサイズまで、自動的に拡大・縮小されるようになります。一緒に書いておかないと、画像の縦横比がおかしくなってしまいますので気をつけくださいね。関連記事AN(tcd014)の記事本文で使うリストマークをカスタマイズするプラグインを使わずにSNSボタンを好きな場所に表示させるAN(tcd014)で投稿ページを左サイドバーから右サイドバーに変更する方法AN(tcd014)のfont-familyを変更する~TCD~投稿ページ・固定ページの記事タイトルやページ内で使うhタグをデザインするAN(tcd014)での投稿記事下のページ送り(ページャー)をカテゴリ別にする方法コメントトラックバックは利用できません。引用あなたのサイトとっても役に立ってます。初心者の私でもTCDカスタマイズできました。今回は、スマホのロゴ画像表示で助けてもらいました。ありがとうございます。TCD18ですが、同じようにできました。TCD14も持っていて運営しています。これから参考にしようと思います。引用ishikawaさん、こんにちは。コメントありがとうございます。tcd018でも同じように出来たのですね。参考にさせていただいています。ここを参考に二つのサイトのスマホ用ロゴを設置できました。http://spotnote.yokohamahttp://jazzy-navelこちらのサイトではもともと設置したロゴの幅が320以下だったためすんなりできたのですが、350にしてしまったこちらのサイトでは参考にしたコードを書き換えてもはみ出てしまいました。}はデバイスの幅100パーセントに広がるということですよね?念のため小さくしてみたりしてもうまくいきませんでした。}こちらも念のため80%とかにしたのですがうまくいきませんでした。キャッシュは削除して再表示させているので読み込みミスなどではないと思います。引用http://jazzy-navel.comでした。引用ちなみに編集前のロゴあたりのコードはこんな感じでした。引用masakiさん、こんばんは。コメントありがとうございます。CSSのコードもありがとうございます。いうのは、デバイスの幅100%に広がるのではなく、h1の領域(width:40%)の中で、100%に広がるということです。h1の領域を40%から100%(または90%)にします。書き足してみてください。}これで、どうでしょうか。↑この1行は、ANでの話なので、書き足さないでくださいね。引用ご教授ありがとうございます!無事設置できました!しかしなぜかiPhone6で記事ページをみたときのみ右側に数pxの空白ができてしまいました。アドセンスのズレが原因でもないみたいで(iPhone5だと大丈夫でした。)ロゴを元に戻しても空白ができっぱなしでテーマをいじると他のなにかがくずれたりするケースをしっていたら教えてくれますでしょうか?http://spotnote.jp/wp-content/uploads/2015/02/image.jpg変更した箇所を元に戻しても空白があいてしまいます。私は、iPhoneを持っていないので、はっきりとはわからないのですが、iPhone5とiPhone6では、画面のサイズが違いますよね?調べてみたところ、それぞれの画面の横幅は、iPhone5が320px、iPhone6が375pxのようです。↓参考サイトhttp://webskillup.com/ety/20140919180945/masakiさんのサイトは、ロゴ画像のサイズが350pxなので、iPhone6の横幅より小さいですよね。そのため、iPhone6で見たときのみ、右に余白が出来てしまうのだと思います。面倒だと思いますが、一度ロゴ画像を400pxぐらいの幅にしてアップロードしなおしてみてはどうでしょうか。引用ぶろうさん、こんばんは。コメントありがとうございます。Gorgeousでも出来たのですね。ホームページを作りはじめて6ヶ月になりますが無料のテーマではなかなか上手く作れず最近TCDのANのテーマを購入しました。htmlやcssの知識は全くの素人なので、まりーさんのブログが、と〜〜っても参考になり本当に助かっています。引用komugi0421さん、はじめまして。困った時は良く拝見させていただいております。コメントありがとうございます。以下の部分を探してください。いうのが、表示される秒数です。5000は、5秒です。いうように変更してください。TCD019でスマホにもロゴを表示させたくいろいろ探していたところこちらに辿り着きました。記事を参考にさせていただき、下記のようなコードで目的が達成出来ましたのでご報告させてください。クライアントの方にもきっと喜んで貰えるはず・・・と勝手に思っております。引用やみねこさん、こんばんは。コメントありがとうございます♪TCD019でも上手くできたようで、よかったです。引用まりーさんこんにちは。この記事を参照に、編集させていただきました。記事のページやアーカイブや、カテゴリの表示はバッチリできるのですが、トップだけ、アドセンスと重なってしまいます。引用kojimaさん、コメントありがとうございます。サイト拝見させていただきました。スマホで表示した場合、トップページだけが、ヘッダーロゴ画像とAdSenseが重なってしまうということでしょうか。テーマが違うので、まったくわからないですが、AdSenseコードを張っている場所はどうでしょうか?テーマオプション内に、ヘッダーの広告、トップページの広告、スマホ用の広告などいくつかあると思います。今一度、確認してみてはどうでしょう。答えになっていなくて、申し訳ありません。引用とても参考になりました。tcdのNEXTAGEというテーマを使っていたのですが、スマホをロゴにすることができず、3日間悩んでいたことがたまたま拝見したこのブログであっさり解決できました。感謝致します!これからも応援しております。引用ゆーつーさん、こんにちは。コメントありがとうございます♪あっさり解決できたとの事、よかったです。引用このページを参考に修正完了しましたありがとうございました!そこそこ長いサイトタイトルだったのでテキスト表示だとブサイクだったんですがスッキリしました!ファーストビューは重要ですからね。直帰率やら訪問者ページ閲覧数が改善すると思います。ありがとうございました。引用kengoさん、こんばんは。コメントありがとうございます。うまくいってよかったです♪また何かあればいつでもお声かけください。昨日はありがとうございました!スマホ時のヘッダーロゴ表示もこのページで助かりました^^ただ、該当コードの削除でロゴ表示はできるのですが、PC表示ではあるリンクが消えてしまうと思います。スマホのロゴにもリンクを有効にする方法はありますか?お忙しい中、申し訳ありませんがご教授ください。竹下さん、おはようございます。指定されているからです。考えられないのですが...。ロゴは、テーマオプションからアップロードしているのでしょうか?メールでもいいので、詳しい状況をご連絡いただけますでしょうか。引用まりーさんご回答ありがとうございました。詳細をメールでお送りしましたので、お時間のございます時にでも拝見ください。返信をキャンセルする。-URLトップページに戻るサイト内検索おすすめ記事2015.2.12AN(tcd014)の関連記事を横2記事×縦3記事で6記事表示にするAN(tcd014)では、PCで表示したとき、投稿ページに表示される関連記事は5...2015.1.21AN(tcd014)の固定ページにアイキャッチを入れる方法AN(tcd014)では、投稿ページにのみアイキャッチを設定できます。固定ページ...2014.5.12TCDテンプレート「AN」をカスタマイズして内部SEOを行うTCDテンプレート「AN」での、見出しタグの使い方が気になったので、カスタマイズして使っています。2015.3.9AN(tcd014)のグローバルメニューやスライダーの背景などをカスタマイズするAN(tcd014)で、グローバルメニューやスライダーなど、ヘッダー付近の背景を...2014.8.18TCDテンプレートでヘッダーロゴの画像をスマホでも表示させるこのサイトで使用しているTCDテンプレート「AN」では、ヘッダーロゴの画像はスマ...ページ上部へ戻る当サイトについてこのサイトは、私が興味を持っている事、学んだ事、またオススメしたいものなどを書いています。「ちゃんと覚えてるんだ」と言えるように、備忘録的なことも書いていきます。更新スピードはトボトボです。プロフィールHN:まりーコーヒーを相棒にしてアフィリエイトをしています。お世辞にも面白いとは言えないブログですが、書かせてちょうだいよ、いいね。