サポート » 使い方全般 » 長いURLのはみ出し

  • 解決済 thirdeyeblind

    (@thirdeyeblind)


    マテリアルというテーマを使っているんですが
    スマホ画面で見た時に引用(blockquote)箇所に書いた
    長いURLがはみ出してしまいます
    WORDPRESS初心者でカスタムのやり方がまったくわかりません

    bodyなど任意のcssを効かせたい場所に下記をいれるだけで

    body{
      word-wrap: break-word;
    }

    改行できるという記事を見たんですが
    具体的にどの箇所に入れればいいのでしょうか?
    よろしくお願いします

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • このテーマ、何も自分で設定してないのにカテゴリがいくつか出てきたり、ソーシャルカウントがそれっぽく配置されたり、豪華ですね!

    さて。

    「/wp-content/themes/wp_material」ディレクトリにある「style.css」の、699行目辺りから、記事中のblockquoteの設定があります。

    .content blockquote{
    width: 90%;
    margin: 0 auto 2em;
    font-size: 0.9em;
    line-height:1.5;
    background-image: url(images/blockquote.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #eef;
    padding: 30px 20px 1px;
    }

    「{」がある行から「}」がある行までのどこかに、

    word-wrap: break-word;

    を1行、追加してみてはいかがでしょうか。

    突き抜けてるのが気になるのであれば、「はみ出した部分は表示しない」方法もあります。

    overflow: hidden;

    PCでしか確認していませんが、スマホも共通だと思います。

    特定の「テーマ」については、「テーマ」のフォーラムが良かったかも知れません。

    あと、「カスタマイズ用子テーマ」が用意されているので、そちらをインストールした上で、「/wp-content/themes/wp_material_child」の「style.css」を開いて、18~27行目くらいの余白のところに、

    .content blockquote {
    word-wrap: break-word;
    }

    という行を追加するのが良いと思いました。

    トピック投稿者 thirdeyeblind

    (@thirdeyeblind)

    回答ありがとうございます
    どちらも試したんですが、変化ないみたいです・・・

    こんにちは、

    body{
      	word-wrap: break-word!important;
     	word-break: break-all!important;
    }

    でテストして、OKなら

    body{
      	word-wrap: break-word;
     	word-break: break-all;
    }

    再テスト、これでうまくいかなければ、スタイルシートで、word-wrap、word-break

    が使われていないかチェックしてみるといいと思います。

    トピック投稿者 thirdeyeblind

    (@thirdeyeblind)

    nobitaさん、このbodyっていうのはスタイルシートの
    どの辺りに入れればいいですか?

    サイトURLが分かれば、適用されていそうかどうか分かると思いますが、ノーヒントだとこれ以上はボクではちょっと厳しいかも知れません。

    PCで見ても同じように幅を縮めてもはみだして、上記の対応をしても変わらない感じでしょうか。
    こちらのテスト環境でテーマをいれたところ上手くいっているように見えました。

    そもそもおっしゃってる「マテリアル」というテーマがボクが見ているのと同じなのかな…。

    最後でいいです

    おまけ

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;

    も、追加しておくといいかも

    ブラウザサポート

    http://caniuse.com/#search=hyphens

    もし、うまく適用できないときには、

    長いリンクテキストに &shy;(&は、半角に読み替え ソフトハイフンと一般に呼ばれています)又は、<wbr />を挟んでおくと、その部分で改行されます

    トピック投稿者 thirdeyeblind

    (@thirdeyeblind)

    poporonさん
    nobitaさんありがとうございます

    PCで見ると改行出来ました!!
    ただスマホで見るとまだはみ出しているみたいです
    見ている環境のせいかもしれません

    サイトURLは「http://jet-news.com/」の
    「2万年に一人の美少女」という記事の引用箇所に
    書いたURLがはみ出しています

    「Android 4.2」の「Chrome 45.0.2454.94」および「ブラウザ」で見たところ、ちゃんと改行されていました。

    参考までに。

    トピック投稿者 thirdeyeblind

    (@thirdeyeblind)

    ありがとうございます

    この度は大変お世話になりました

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「長いURLのはみ出し」には新たに返信することはできません。