1ヶ月前に更新されました。Snippets」を利用して下のスクリプトにて他サイト様のRSSをテキスト形式で出力しています。?>最初の<?phpは不要とどこかで見たのでその通りにしてショートコードを作成しているのですが、記事本文に上記にてRSSを表示するとテキストが大きく右にはみ出して画面が右寄りになってしまいます。divでwidthを使って幅を100%で指定しているのですがスマホの横幅に収まってくれません。class="blog-title"><span>この部分は、<span>がいらないと思います。いるのであるとしたら「閉じspan」が足りません。ここらはcssがどうなっているかにもよります。大きく右にはみ出して画面が右寄りになってしまいます。simplicityに限らずたいていのテーマではliに対して何かしらのスタイルがしてあります。質問のスクリプトのような場合、liの中に.blog-titleが入っており(この.blog-titleも何かしらと干渉してしまうかもしれないクラス名ですが)、.blog-titleにスタイルがあるとして、このliにどのようなスタイルができるかを考えると、おそらく何かしらスタイルがあるとしてもそれらはSimplicityのli等に上書きされたり、あるいはプロパティを継承したりして表示されているかと思います。target="_blank">何かしらのタイトル</a></li>こうなるようにすればよいわけです。.blog-title部分は他と干渉しないように、違う名称をつけるか頭に何かしら付け加えて、.ex-blog-titleにするとかなんとか色々する必要があるかもしれません。foreachの前後にulを入れてそこにclassで.blog-titleとすれば、liの中の要素のclassはいりません。ulなどはデフォルトでmargin、paddingがあるので、それらを0にしておく必要があります。ulはデフォルトでリストの構造を持っているので、仮に中身の横幅が大きくなってしまった場合は折り返してくれるだろうと思います。これが折り返せないとすれば、a要素に対してword-break:break-allが入ってないとかそんな感じで折り返しが解除されているのではなかろうかと。line-break等があります。スクリプトがこれで全部かどうかと、その出力されたhtmlがどうなっているか、またそこにあてられているcssはどんなものかがわからないと問題の特定はコレだと即答はできません。#45262まさおゲストご指摘の</span>を追加しました。target="_blank">タイトル</a></span></span></li>このようになっています。class="randomlink"><ul>[スクリプトのショートコード]</ul></div>と記載してあります。break-all;}このようになっています。#45264hidekichiゲスト特別コレと言うのはないと思います。不要かなと思うのもあるので、要らないものも含めて例えばのサンプルを作ってみました。サンプルはscssで書いてます。compiledでcssに変換したものをコピペして、不要部分は削除してください。line-heightで、1.7emとありますが、基本的に1.7と書くだけで問題ありません。line-heightが広くなると文字の上はリンクが反応しますが、行間は反応しないデッドスペースが生まれます。そのため、できるだけ固める方が良いかと思います。ulは何もしなくても幅100%になります。そのままでもよいですが、タイトルが短いものが続くと右側があまりにも空きすぎるので、calcを使って100%-100pxと言う値をmax-widthに入れてます。メディアクエリでスマホの時は100%になるようにしています。aタグに対してtext-overflowやら、overflowを設定してもその親に当たるliにサイズ固定部分がないとはみ出すことがないので意味がないかもしれません。高さを2em等にした場合、長いタイトルははみ出すのでこれらは効果が出るだろうと思いますが、他の短いタイトルの場合も2emなので、無駄な高さが生まれます。これらにもあわせて、例えばliのborder-bottomに設定をすると文字とボーダーをpaddingでしか設定できなくなってあまりうまくレイアウトができないかもしれません。今回の場合は、liの中にspanがあるため、このspanをdisplay:blockにして、marginを上下に入れればアイテムの上下に同じだけスペースができます。これで均等に配置することができます。元々のスタイルだとちょっと隙間が狭すぎて窮屈な感じがしたので、少し上下のスペースを開けて余裕を持たせてます。borderでラインをつけないと言うことで、代わりに、afterを使って背景にストライプを作り、それを任意のサイズでグレー・白と並べることでドットのラインを作ってます。コレの利点は、高さを1px以上にしてもドットがストライプになるだけで、レイアウトを崩さないので、面倒くさいですけれどもこういった方法でやるのが良いのかもしれません。最後のliにあるafterはdisplay:noneで消すことでどんなブロックの中に入れたとしてもアイテムの間にあるストライプはそのままにうまく収まると思います。#45265まさおゲスト素晴らしいサンプル感謝いたします。ありがたいのですが、出力はシンプルに文章と行間の点線だけを左寄りに標示させたいと考えております。その場合はどれを削除すればよろしいでしょうか?また、PCとスマホともに、はみ出した文字は折り返し改行せずに1行表示で最後を・・・にすることは可能でしょうか?PCは問題なくできるのですが、スマホ表示の際にそれをやろうとすると横幅の調整が効かなくなりまして。してもスマホ表示は改行をしないと右に大きくはみ出した状態になってしまうのが直せませんでした。#45266hidekichiゲストサンプルをアップデートしました。左寄りに標示させたいと考えております。ulの幅を決めたらセンタリングするようにしてあります。これはmarginでそうなってます。PC時100pxほど幅を狭くしていたのは他の文章との差別化とメリハリです。折り返し改行せずに1行表示で最後を・・・PCもスマホも基本同じです。はみ出したら...表示すると言う機能のはみ出したらがうまく動作してなかったのではなかろうかと思います。僕は逆に折り返らないのが問題と思ってました。この「最後...」は複数行でやるほうが圧倒的に難しいんです。1行ではみ出てたら普通はoverflow効くはずですが、単純に文字が折り返さなかった事ではみ出しがなかったんじゃなかろうかと思います。子が親を押し広げている状態だったのかと。後はブラウザの挙動の違いとかですかね。#45267まさおゲストなるほど。#45268hidekichiゲストサンプル(full表示)見てもらえたらわかると思いますが、できてませんかね?サンプルでできてると言うことになれば、他のスタイルのプロパティが邪魔してるんだと思います。それを解除したらよいかと思いますが、それが何かは実際にサイトを見てみないと何とも言えません。#45278まさおゲスト何も手を加えていないsimplicity2を使用しているサイトではスクリプトの横幅表示がしっかりと反映されていました!横幅が問題となっているサイトは諸事情によりここにURLを記載することは出来ませんが、http://wp-simplicity.com/suport/topic/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E4%B8%80%E8%A6%A7%E3%83%AA%E3%82%B9%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB/#post-33793上記のカスタムをさせていただいております。試しにスタイルシートの内容をすべて削除し真っさらな状態にして、その後hidekichi様のご提案頂いたサンプルCSSのみを記載してみたのですが、それでも横幅がはみ出してしまいました。テーマは最新のものを使用しているので、もう何が原因なのか全くわからない状態となってしまいました。hidekichi様に長々とお付き合いをさせてしまい大変申し訳ございませんでした。#45279hidekichiゲストひとつ考えられるのは、今回の質問の部分がおかしかったのではなく、他の要素がはみ出していてそれに今回の要素が追従しており、本来ははみ出す幅の所がはみ出せない状態になっているのではなかろうかと。それが何かはサイトを見てみないとわかりませんが、よくあるのはh2のネガティブマージン、absolutで配置している横幅とかですかね。ひとつひとつ調べていけばわかると思いますが、h2ぐらいの微妙なものだとわかりにくいかもしれません。だいたいそういう場合は、横スクロールが発生していたりするので、htmlやbodyにoverflo-x:hiddenが入っていなければわかるかと思います。それでも横幅がはみ出してしまいました。通常cssを子テーマに書かずに、例えば今回のサンプルのcssだけを書いた場合は、その殆どが親テーマのcssになります。その殆どの親テーマのcssをサンプルのcss部分だけが上書きされると言う具合です。新規simplicityに設定された場合問題ないと言うことから考えると、記事中にレスポンシブになっていない何かしらの要素があると思います。新規のsimplicityと現在利用されているsimplicityの違いを確認しつつ、原因を特定されていくとどこに問題があったのかがなんとなしにわかってくるかもしれません。だいたいそのような場合は、pxでサイズ指定してあって、メディアクエリ等でスマホのサイズのときなどに画面幅に合わないような仕組みになっていることが大半です。タグの中に直接style属性でcssを書いているものが原因かもしれません。カスタマイズする場合はできるだけどんなサイズでも合うようにモバイルファーストで設計していくのが良いのかもしれませんね。それをすると面倒なこともあるので僕はあんまり気にしてませんけれども。#45281まさおゲストcss以外にカスタムを加えているところがなく、タグの中に直接styleで幅指定などをしている箇所もないので全く検討がつかないので、諦めようと思います。🔴サイトに丸写ししておいたプログラム等を★サイトに戻して挙動を確認すると、やはり右に大きくはみ出しています。無事に標示される🔴サイトとデザインが崩れる★サイトではサーバーが異なるため、サーバーによってCSSのやプログラムのデザインが崩れることがあるのか気になりました。#45296hidekichiゲストcss自体はテスト環境が同じならどれも同じかと思いますが、PHPの場合は、phpの設定によって若干挙動が異なる場合もあります。見た目に違うほどの挙動が出るのはそうそうないと思うので、テスト環境が違うとかが怪しいですけども。確かめるとすればphpのバージョンとその設定を見るしか無いですね。削除して新たにダウンロードしてアップをした後、このダウンロードしてアップする間にキャッシュの削除等はされましたか?テーマを入れ替えてもデータはブラウザのキャッシュが有効ならブラウザにも残りますし、サーバーにも残ります。アクセスするアドレスが同じであればキャッシュが返される可能性は無きにしもあらず。キャッシュが問題なら、.randomlinkを.randomlink2などにしてクラス名を変えてみると言うのも一つの方法です。1度もそのサイトにアクセスしていない端末からアクセスしてみて確かめるとか。プライベートウィンドウとかシークレットウィンドウでいいんですけどね。firefoxで動作するのにIEで動作しないと言う場合は、まぁIEだからとすぐに原因がわかります。chromeで動作してfirefoxで動作しないと言うような場合は、ベンダープレフィックスの有無や挙動の違い等をスクリプト側でなんとか吸収するしか無いのですが、今回のものにそういったものはないので、このcssなりは正常に動作していると僕は思います。動くサーバーとそうでないサーバーがあると言う状況なので、原因が何かは実際の状態を見ていないので僕もエスパーではないためわかりませんが、コピペと言うワードがでてくる以上キャッシュは疑うべきかと思います。実際の所、動作しなかったサーバーでのcssをもう一方に移したら動作すると言うことは、それは本来は動作すると言う事だと思います。確かにサーバーが違うと言うのが最初に思いつきますが、サーバーが異なれば出力されるhtml自体が変わると言うことはなく、cssはブラウザが処理しているのでサーバーとはほぼ関係ないわけです。読み込めているcssの有無や、一方にあるプラグインが入っていて、もう一方にはないとか、どこかでエラーがでて処理が止まっているとかそういった致命的なものがない限り、どちらも同じように表示されるのが本来の状態かと思うんですけどね。環境が同じであればcssは同じように表示されると思います。この環境が同じかどうかとキャッシュの有無が一番気になるところです。可能であればwordpress自体も再インストールして、プライベートウィンドウとかシークレットウィンドウで作業しつつサーバー側もキャッシュはさせない設定をして再テストしてみるべきかと思います。#45299まさおゲスト原因が判明いたしました!🔴カスタマイズ→レイアウト(全体・リスト)→サイドバーを左側に表示この設定をしていると右側に大きくはみ出してしまうようです。}こういうのがhead内にstyleタグで入ります。この#sidebarの値は何かと問題が出る可能性があるので、カスタマイザーから行わず、自分でスタイルすればよいのではなかろうかと。一応サンプルを左サイドバーにしておきました。paddingやら、margin等細かな調整は独自にしてもらうことになります。本来ならflexでorder変えるだけにしたいところですが、そうするとスクロール追従でちょっと問題が出ることがありまして、ひとまずfloatのままです。id="sidebar"></div></div>こうなので、上記理屈から言えば#mainにだけfloatがあれば良いことになります。サイドバーを左にしたい場合は、サイドバーはfloatさせず、#mainを右に回り込ませると言うことです。デフォルトでは#mainも#sidebarもfloatで回り込ませているので、回り込ませないといけない何かしらがあったのかもしれません。ここらの理由はわかりませんが、まぁ子テーマで全部いじればほぼ思い通りにできると言うことです。投稿15件の返信スレッドを表示中トピック「プログラムを使用した他サイトRSS取得とスマホ表示時の横幅について」には新しい返信をつけることはできません。スポンサーリンクアドセンス(大)アドセンス(大)Simplicity後継テーマ現在Simplicityの後継テーマであるCocoonが公開されています。これからサイト始めるのであれば、Cocoonの利用をおすすめします。Googleサイト内検索Simplicityのダウンロードダウンロードはこちらから。