サポート » 使い方全般 » TwentyThirteen|レスポンシブ化されない

  • こんばんは。
    TwentyThirteenで下記サイトを作ったのですが、
    なぜかヘッダー画像だけレスポンシブ化されません..

    http://digience.co.jp/

    こちら、もし原因がお分かりの方がいらっしゃいましたら、
    ご助言よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • こんにちは、

    TwentyThirteen|レスポンシブ化されない

    サイズの指定がうまくいっていないようですが、一応レスポンシブには動作しているように見えますが、

    レスポンシブ化 とはどのような動作であるべきだと考えているのか具体的に書いていただけますか?

    トピック投稿者 tskmyd

    (@tskmyd)

    > nobita様
    ご連絡ありがとうございます!!

    PCだとブラウザの縮小ボタンで小さくした場合、
    またSPだとブラウザから普通に見た場合、
    それぞれ横幅に合わせて調整されると思うのですが、
    ヘッダー画像だけは、PCだと見えなくなってしまい、
    SPだとそのまま全体が表示され、かなり小さく表示されてしまいます..

    説明がわかりにくかったら申し訳ございません。

    こちらわかりましたら、アドバイス頂けると助かります。

    このテーマの場合

    ブラウザのサイズの変化に伴ってヘッダー画像がスムーズに変化するのではなく

    例えば、767px になったら ヘッダー画像を 小さく 文字も 小さくするといった 制御が行われています

    サイトタイトルのサイズ指定が影響したりして、ある一定の幅の間は、タイトルが下側に潜り込んでしまう。という事が起きているのだと思います。

    この変化に呼応して、サイトタイトル等のスタイルを調整してやる必要があります。

    連続的にヘッダー画像サイズを変化させ、サイトタイトルも、ブラウザサイズに呼応して、ダイナミックに変更するためには、テーマのスタイルを書き換えてやる必要があります。

    例えば、

    サイトタイトルを、ブラウザ幅に応じて、フォントサイズを動的に変更仕様とするなら、

    ビュー幅との相対的な値で動作するフォントサイズに変更することが必要になります。

    .site-title{
        font-size:3vw;
    }

    上の、vwという単位は、ブラウザ幅に対するパーセント幅になります。(上の例は、ビュー幅の3%のフォントサイズ)

    試してみると、よくわかると思います。

    実際のカスタマイズの要領ですが、今日たまたま、自分のテーマの変更の予告のために書いたコードが以下でみれますので、header画像を連続的に変化させる必要がある場合は、みてみてください

    http://www.tenman.info/wp3/raindrops/2015/07/13/%E4%BA%88%E5%91%8A%EF%BC%9Araindrops1-306%E3%80%80%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AE%E5%A4%89%E6%9B%B4/

    トピック投稿者 tskmyd

    (@tskmyd)

    ご丁寧に本当にありがとうございます。
    ただまだ解決できておらず..私の無知のせいなのですが、
    もう少しだけお付き合いいただけますでしょうか..
    (まだPCではヘッダー画像が潜り込んでしまっており、
    SPではかなり小さく表示されてしまっております)

    site-titleのfont-size部分の変更をしてみたのですが変化がなく..
    また、頂いたリンク先も拝見させていただいたのですが、
    恥ずかしながらcssの知識が無く、どの部分を参考にさせて
    いただいたらいいのかがわからず..すみません><

    site-titleのfont-size部分の変更をしてみたのですが変化がなく..

    ごめんなさい、ソースをもう一度確認してみました。

    タイトルやキャッチフレーズが空なんですね

    空なら、何にも変わりません。

    header 要素のタイトルも空ですが、これは、ちょっとという感じがします。

    CSSがあまり得意ではなく、複雑なカスタマイズをする時間的な余裕もない という事でしたら、

    現在、header画像の digience の部分を 削除して、サイトタイトルに digience と記述してただくと、概ね 問題は解決すると思います。

    タイトルの位置を中央に持ってくるなどといったCSSの指定方法は、検索するとたくさん出てくるので、頑張って調べてみてください。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「TwentyThirteen|レスポンシブ化されない」には新たに返信することはできません。