サポート » テーマ » Twenty Seventeenのsite-titleの英単語の幅について

  • 解決済 weson12

    (@yoshi00)



    お世話になっています。

    例えば「ja.wordpress.orgja.wordpress」というサイトタイトルがあって「h1 class=”site-title”」に表示されていたら、スマホサイズになった時、2行にならず、レイアウトが崩れてしまう、という事で良いのでしょうか。

    インストールして、すぐに管理画面内でテーマを10種類ほどインストールして、2種類のテーマを有効化して試した後で、スマホサイズの幅で、はみ出していることに気が付きました。

    対処方法はスマホサイズの幅が400px以下になったらsite-titleのフォントサイズを縮小させました。

    Twenty Seventeenのデフォルトの状態で、長い英単語はスマホサイズでレイアウトを崩してしまうのでしたら問題ないのですが。

    もしかしたらインストール時に何か失敗したのか、インストールしたテーマの影響か等と思ってしまったものですから。

    ご回答どうぞよろしくお願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • CG

    (@du-bist-der-lenz)

    word-wrapで単語が長い場合、width値を超える部分を折り返しているからでしょう

    早速のご対応ありがとうございます。

    CSSは

    #page {
        position: relative;
        word-wrap: break-word;

    ってなってるので、例えば「ja.wordpress.orgja.wordpress」が途中で折り返してくれればスマホサイズの全体のレイアウトが崩れる事はないのですが。

    サイトタイトルは折り返してくれないのでレイアウトが崩れてしまうという悩みです。

    私の書き方がわかりにくくて済みません。

    WordPressをインストールした時、私の何かのミスでレイアウトが崩れたのではなく、Twenty Seventeenが最初からの仕様ならしょうがないという事なのですが。

    Twenty Seventeenが最初からの仕様ですよね。

    CG

    (@du-bist-der-lenz)

    表示を確認したブラウザに依存する部分で、word-wrapは難しいところではなかったでしょうか。閲覧者の環境をすべて賄うのは大変ですね。また長いサイト名である必要が大切なこともあるでしょうが、スタイルシートで調整できるのなら良いと思います。そしてインストール時に何か失敗したのか、インストールした後に追加したテーマの影響か、プラグインのスタイルシートが影響することはあります。

    word-break もいいかもです。

    .site-title { word-break: break-word; }

    ご対応いただきありがとうございます。

    という事はこの現象はTwenty Seventeenが最初からの仕様ではなく、「プラグインのスタイルシートが影響することはあります。」の可能性もあるという事ですか。
    管理画面からなら安心だと思っていましたが、テーマやプラグインをインストールするというのはやはり怖いという事ですね。

    .site-title { word-break: break-word; }

    このCSSでもうまくカバーできますね。
    ありがとうございます。

    CG

    (@du-bist-der-lenz)

    問題のなかった状態に戻すことは簡単なので、怖いことはないです。テーマやプラグインを追加して、不具合を感じたら追加以前に戻せばいいことですからね。

    色々丁寧にご対応いただきありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。