• ベストアンサー

ワードプレスでの改行について質問です。

ワードプレスでの改行について質問です。 pcで改行をしてスマホで改行を無視するようにするためcssに以下のように追加しました。 @media only screen and (max-width: 767px) { br { display: none; } } このようにした場合、スマホから見た個別ページに部分的に強制改行を加えたいと思った場合、どのようにしたらよいのでしょうか? よろしくお願いいたします。

  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

Pかなw ただ、WordPressって、勝手に改行を加える所が確かにあり プラグインなどで、あのうっとうしい自動Pを削除するツールすら ありますが、この習性を利用して、逆にPを使ってしまうという手は ありますね。もし、今現在Pを使っていて独自のCSSがあるなら、 classわけして、、<p class=p_br>なんたら なんてな使い方もありますが。 要するにPじゃなくても、ブロック系タグ要素を使えば確実に 改行されることを利用すればOKではないでしょうか? あまり、SPで改行削除を考えたことがなかったので、 取り急ぎこんな感じになりましたが。どうでしょうか? 後は、最後の手段? :html PC <div class=PCSP>改行あり</div> SP <div class=PCSP>改行なし<div>改行あり</div></div> -- :css div.PCSP div 改行ありのCSS <- DIV 内のDIVは別モードとして定義                PC/SPともにDIV内DIVは改行ありにするため。 div.PCSP 改行{ありなし}のCSS <-  メディアクエリでは、ここだけを書き換える って感じで、メディアクエリで部分的なCSSの切り替えに使うのもありかもです。 スコア的に、class書いた方が上位なので、素直に<br class=xxxx>してもいいんですがね。 (ごめんなさい、最後の1つが一番効率良いかもw)

関連するQ&A

  • ワードプレス max-width100%が効かない

    ワードプレスでレスポンシブデザインを作ろうと思っているのですが、 画像の大きさを変えるために、cssに img{max-width:100%;} を指定しているのですが、ウィンドウサイズを変えても画像の大きさが変わらず困っています。 cssの指定は効いています。max-widthの部分だけ効いていません。 何が原因なのでしょうか?よろしくお願いします。

    • 締切済み
    • CSS
  • widthでcss,js切換可能でしょうか。

    【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。

  • ワードプレスのwelcartカートボタン

    こんにちは ワードプレスにwelcartを設置しています。 カートボタンをカスタマイズしたいと考えています。 CSSに @charset "utf-8"; /* CSS Document */ .skubutton{ background-image:"http:/画像" background-repeat: no-repeat; width: 443px; height: 108px; padding: 0px; margin: 0px; border:none; cursor:pointer; overflow:hidden; display: block; } を記述しました。 画像のようなカートの状態になっています。 カートのサイズは変更されましたが、画像が表示されません。 画像を表示するにはどのように記述を変更すればよいでしょうか?

    • 締切済み
    • CSS
  • PCとスマホでの解像度でのCSS振り分け

    現在以下の方法でスマホ表示へ振り分けています。 <meta name = "viewport" content = "width = 501" /> <link href="/styel.css" rel="stylesheet" type="text/css" /> <link media="only screen and (max-device-width:410px)" href="/smart.css" type="text/css" rel="stylesheet" /> <link media="screen and (min-device-width:481px)" href="/styel.css" type="text/css" rel="stylesheet" /> 疑問なのですがこのコーディングでiphone4ではsmart.cssで表示されます しかしiphone4は620pxなのに何故最大解像度で振り分けられるのでしょう? styel.cssで表示されると思うのですが。 またドコモの最新のスマホではstyel.cssで表示されます、それは720pxなのですが 上記の指定でmax-device-width:720pxとかすればいいのでしょうか? よく分からなくなって来ました。解像度での振り分けは不確定なのでしょうか UAで行うにしても機種は膨大にあるので容易ではないと思うのですが スマホでの振り分け方法についていい方法があれば教えていただきたいのですが よろしくお願いします。

    • 締切済み
    • CSS
  • webレスポンシブ 

    新たに問題が出てきまして、 iphoneの表示で確認した所、 footerの画像が消えてくれません。 [問題の箇所] Media QueriesにてCSS /*=============================================== 画面の横幅が320pxまで ===============================================*/ @media screen and (max-width:320px){ footer{ background-image: url(images/footer/footer_wood.jpg); display:none; } どうぞ宜しくお願いします。

  • back-ground:noneが効かない

    レスポンシブのページを作成中で、PCではback-groundを表示、 スマホ版ではimgで表示を、メディアクエリで切りわけたいのですが スマホ版でPC用のback-groundを消すための back-ground:none;が効いてくれません。 http://www.miimeow.com/?tid=3&mode=f1 上記のページの「購入はこちら」「定期購入はこちら」のボタンがある部分をスマホで非表示にしたいのです。 原因は何なのでしょうか。。 恐縮ですがご教授頂ければ幸いです。 こちらがCSSです。 PC @media screen and (min-width:481px) { .cam_kounyu { background: url(http://www.ustyle-japan.com/miimeow/images/cam-img.jpg) no-repeat; width: 1000px; height: 412px; position: relative; margin: 0 auto; } .cam_kounyu a { position: absolute; width: 372px; height: 80px; right: 24px; bottom:18px; } /*定期便*/ .teiki_kounyu { background: url(http://www.ustyle-japan.com/miimeow/images/teiki_img.png) no-repeat; width: 1000px; height: 188px; position: relative; margin: 0 auto; } .teiki_kounyu a { position: absolute; width: 372px; height: 80px; right: 24px; bottom:47px; } } スマホ @media screen and (max-width : 480px) { .cam_kounyu{ display: none!important; background : none; } .teiki_kounyu{ display: none!important; background : none;} }

  • レスポンシブデザイン

    スマホとPCで同一URLにして レスポンシブデザインでcssを変えたいのですが それぞれどのサイズにすればいいのでしょうか? 現在は @media screen and (max-width: 499px) { * { font-size: 1.0em; } } @media screen and (min-width: 500px) { * { font-size: 2.0em; } } の様にしていて 500以上だと大きく表示されるようにしています。 私のスマホ(アンドロイド)・PCなら問題ないのですが 一般的な幅を教えてください。

    • ベストアンサー
    • CSS
  • HTML5とCSS3のレスポンシブデザインについて

    今、wordpressでHTML5とCSS3のレスポンシブデザインに独学で、挑戦しています。 タグを手書きで書いているのですが、分からない点があります。 ▼MENU▼というメニューバーは、PCでは見えない状態にしたいのですが、なかなか上手く行かず、PCで見えてしまいます。 display:none;にしたりして。ブラウザで確認したりしましたが、ずっと見える状態になってしまいます。 どこか間違いのタグがあるのでしょうか?? 教えていただけると嬉しいです(●^o^●) ↓ナビゲーションバーのタグ↓(PC) #menu ul{ width:100%; margin:0; padding:0; color:#000; background:#000; } #menu li{ list-style:none; border-top:2px solid #FFF; } #menu li a{ padding:16px 20px; display:block; text-decoration:none; background:#000; color:#FFF; } .togmenu{ padding:16px 20px; } ↓PCでは非表示になるはずのMENU↓(PC) .menubtn{ display:block; background:#000; color:#FFF; } ↓スマホで表示されるタグ↓ @media only screen and(min-width:500px){ .menubtn{ } .togmenu{ display:none; background:#000; } #menu li{ display:inline-block; border:none; } } ★上記のレスポンシブデザインで制作中のサイトURL★ http://fashioncode.jp/

    • ベストアンサー
    • HTML
  • レスポンシブWeb 右側の表示が切れてます

     レスポンシブWebデザインのサイトを作っています。  スマホの画面では右側の表示がきれてしまいます。 marginとpaddingは左に効いても、右には効きません。  PCの画面では想定どおりに表示します。 <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/common-l.css"> <link rel="stylesheet" href="css/common-s.css" media="only screen and (max-width:599px)">  PC用のcommon-l.cssを使わずスマホ用のcommon-s.cssだけを使うと表示は正常 でmarginとpaddingも効きます。common-l.cssが影響しているのはわかりました。 ためしにPC用のwidthを削るとスマホ画面の表示は正常になりました。当然PC用 画面の表示はおかしくなりますが。  なお「width: 650px;」を「width: 72.22%;」にしても結果は同じです、 //// PC用 common-l.css ////////////////// #content{ float: left; width: 650px;  ←この行を削るとうまくいきます background-color: #FFFFFF; } //// スマホ用 common-s.css ////////////////// p{width: 100%;} #content{ width: 100%; background-color: #FFFFFF; margin: 10px 50px 10px 10px; }  原因まではわかりましたが、対策がわかりません。PC用とスマホ用の両方の表示を まともにするにはどうすればいいでしょうか? 心当たりがあればお答えください。

    • ベストアンサー
    • CSS
  • HTMLで改行されません

    下記のように書いた場合、2バイト文字(たたたたたたたたたたた~)は200pxの幅で改行して表示されますが、 1バイト文字(aaaaaaaaaaaaaaaaaaaa~)は改行されず200pxの幅を越えて表示されます。 1バイト文字も改行されるようにするにはどうしたらいいんでしょうか? HTML------------------------- <div id="div1"> <p>たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> css--------------------------- #div1 { width: 200px; height: 300px; background: #00ffff; }

    • ベストアンサー
    • CSS