プログラムを使用した他サイトRSS取得とスマホ表示時の横幅について

これでスクリプト全部ですか？

コピペして整形しましたが、

<li>
  <span class="blog-title">
    <span>
      <a href='<?php echo $item->get_permalink(); ?>' target="_blank">
        <?php echo $item->get_title(); ?>
      </a>
    </span>
  //ここに</span>が本来は必要
</li>

上記の<span class="blog-title"><span>この部分は、<span>がいらないと思います。いるのであるとしたら「閉じspan」が足りません。ここらはcssがどうなっているかにもよります。

サンプル: cssによって色々と変わってしまう例(htmlは修正済み) | jsFiddle

> 記事本文に上記にてRSSを表示するとテキストが
> 大きく右にはみ出して画面が右寄りになってしまいます。

simplicityに限らずたいていのテーマではliに対して何かしらのスタイルがしてあります。
質問のスクリプトのような場合、liの中に.blog-titleが入っており(この.blog-titleも何かしらと干渉してしまうかもしれないクラス名ですが)、.blog-titleにスタイルがあるとして、このliにどのようなスタイルができるかを考えると、おそらく何かしらスタイルがあるとしてもそれらはSimplicityのli等に上書きされたり、あるいはプロパティを継承したりして表示されているかと思います。
これを防ぐためには、とても簡単で、

<li class="blog-title">
    <a href='#' 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が入ってないとかそんな感じで折り返しが解除されているのではなかろうかと。
同じようなものにword-wrap, line-break等があります。

ひとまず、スクリプトがこれで全部かどうかと、その出力されたhtmlがどうなっているか、またそこにあてられているcssはどんなものかがわからないと問題の特定はコレだと即答はできません。

ご指摘の</span>を追加しました。

出力は

<li>
<span class="blog-title">
<span>
<a href="🔴🔴🔴" target="_blank">タイトル</a>
</span>
</span>
</li>

このようになっています。

ウィジェットにはプラグインの「Post Snippets」のショートコードを使用して

<div class="randomlink">
<ul>
[スクリプトのショートコード]
</ul>
</div>

と記載してあります。

CSSは

.randomlink {
     width: 100%;
}

.randomlink ul {
     list-style-type:none;
     padding: 0;
     width: 100%;
}

.randomlink li {
	line-height:1.7em;
	border-bottom: #CCCCCC dotted 1px;
	list-style-position: inside;
        font-size: 14px;
}

.randomlink li a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;

}

このようになっています。

記述の間違い、またはsimplicity2と相性が悪い記述等は存在しますでしょうか？

特別コレと言うのはないと思います。
ただ不要かなと思うのもあるので、要らないものも含めて例えばのサンプルを作ってみました。

サンプル: rssのやつ | codepen
※ サンプルはscssで書いてます。css欄の下向き三角からview 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で消すことでどんなブロックの中に入れたとしてもアイテムの間にあるストライプはそのままにうまく収まると思います。

素晴らしいサンプル感謝いたします。

大変ありがたいのですが、出力はシンプルに文章と行間の点線だけを左寄りに標示させたいと考えております。

その場合はどれを削除すればよろしいでしょうか？

また、PCとスマホともに、はみ出した文字は折り返し改行せずに１行表示で最後を・・・にすることは可能でしょうか？

PCは問題なくできるのですが、スマホ表示の際にそれをやろうとすると横幅の調整が効かなくなりまして。

どうしてもスマホ表示は改行をしないと右に大きくはみ出した状態になってしまうのが直せませんでした。

サンプルをアップデートしました。

> 出力はシンプルに文章と行間の点線だけを
> 左寄りに標示させたいと考えております。

ulの幅を決めたらセンタリングするようにしてあります。これはmarginでそうなってます。
PC時100pxほど幅を狭くしていたのは他の文章との差別化とメリハリです。

> PCとスマホともに、はみ出した文字は
> 折り返し改行せずに１行表示で最後を・・・

PCもスマホも基本同じです。はみ出したら…表示すると言う機能のはみ出したらがうまく動作してなかったのではなかろうかと思います。

僕は逆に折り返らないのが問題と思ってました。この「最後…」は複数行でやるほうが圧倒的に難しいんです。1行ではみ出てたら普通はoverflow効くはずですが、単純に文字が折り返さなかった事ではみ出しがなかったんじゃなかろうかと思います。つまり子が親を押し広げている状態だったのかと。
後はブラウザの挙動の違いとかですかね。

なるほど。
となりますと、このようなスクリプトではスマホ表示の際には、

・出力されるテキストを改行・折り返しをせずに１行表示
・右にはみ出した部分を「・・・」にしてスマホの横幅内に収める

上記は難しいでしょうか？

PCでは出来てスマホでは出来ない原因がわからなくて・・・

サンプル(full表示)見てもらえたらわかると思いますが、できてませんかね？

サンプルでできてると言うことになれば、他のスタイルのプロパティが邪魔してるんだと思います。
それを解除したらよいかと思いますが、それが何かは実際にサイトを見てみないと何とも言えません。

何も手を加えていない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様に長々とお付き合いをさせてしまい大変申し訳ございませんでした。

ひとつ考えられるのは、今回の質問の部分がおかしかったのではなく、他の要素がはみ出していてそれに今回の要素が追従しており、本来ははみ出す幅の所がはみ出せない状態になっているのではなかろうかと。

それが何かはサイトを見てみないとわかりませんが、よくあるのはh2のネガティブマージン、absolutで配置している横幅とかですかね。
ひとつひとつ調べていけばわかると思いますが、h2ぐらいの微妙なものだとわかりにくいかもしれません。だいたいそういう場合は、横スクロールが発生していたりするので、htmlやbodyにoverflo-x:hiddenが入っていなければわかるかと思います。

> サンプルCSSのみを記載してみたのですが、
> それでも横幅がはみ出してしまいました。

通常cssを子テーマに書かずに、例えば今回のサンプルのcssだけを書いた場合は、その殆どが親テーマのcssになります。でその殆どの親テーマのcssをサンプルのcss部分だけが上書きされると言う具合です。

新規simplicityに設定された場合問題ないと言うことから考えると、記事中にレスポンシブになっていない何かしらの要素があると思います。新規のsimplicityと現在利用されているsimplicityの違いを確認しつつ、原因を特定されていくとどこに問題があったのかがなんとなしにわかってくるかもしれません。

だいたいそのような場合は、pxでサイズ指定してあって、メディアクエリ等でスマホのサイズのときなどに画面幅に合わないような仕組みになっていることが大半です。タグの中に直接style属性でcssを書いているものが原因かもしれません。

カスタマイズする場合はできるだけどんなサイズでも合うようにモバイルファーストで設計していくのが良いのかもしれませんね。それをすると面倒なこともあるので僕はあんまり気にしてませんけれども。

css以外にカスタムを加えているところがなく、タグの中に直接styleで幅指定などをしている箇所もないので全く検討がつかないので、諦めようと思います。

この度は本当に有難うございました！
とても良い勉強になりました！

最後に質問をさせて頂きたいのですが、サーバーによってプログラムやCSSの相性や挙動の変化はあったりするのでしょうか？

・先のプログラムが問題なく表示されたのサイト
🔴サイト
Aサーバー

・プログラムがうまく表示されない問題のサイト
★サイト
Bサーバー

先に★サイトのCSSを🔴サイトに丸写ししてプログラムの挙動を無事に確認できたので、

★サイトのテーマ(Simplicity2＆子テーマ)を削除して新たにダウンロードしてアップをした後、

🔴サイトに丸写ししておいたプログラム等を★サイトに戻して挙動を確認すると、

やはり右に大きくはみ出しています。

無事に標示される🔴サイトとデザインが崩れる★サイトではサーバーが異なるため、サーバーによってCSSのやプログラムのデザインが崩れることがあるのか気になりました。

css自体はテスト環境が同じならどれも同じかと思いますが、PHPの場合は、phpの設定によって若干挙動が異なる場合もあります。
ただ見た目に違うほどの挙動が出るのはそうそうないと思うので、テスト環境が違うとかが怪しいですけども。確かめるとすればphpのバージョンとその設定を見るしか無いですね。

入っているプラグイン、キャッシュの有無、カスタマイザーの設定、見るブラウザは完璧に同じですか？

> ★サイトのテーマ(Simplicity2＆子テーマ)を
> 削除して新たにダウンロードしてアップをした後、

このダウンロードしてアップする間にキャッシュの削除等はされましたか？
テーマを入れ替えてもデータはブラウザのキャッシュが有効ならブラウザにも残りますし、サーバーにも残ります。アクセスするアドレスが同じであればキャッシュが返される可能性は無きにしもあらず。

キャッシュが問題なら、.randomlinkを.randomlink2などにしてクラス名を変えてみると言うのも一つの方法です。
あるいは、1度もそのサイトにアクセスしていない端末からアクセスしてみて確かめるとか。まぁプライベートウィンドウとかシークレットウィンドウでいいんですけどね。

firefoxで動作するのにIEで動作しないと言う場合は、まぁIEだからとすぐに原因がわかります。chromeで動作してfirefoxで動作しないと言うような場合は、ベンダープレフィックスの有無や挙動の違い等をスクリプト側でなんとか吸収するしか無いのですが、今回のものにそういったものはないので、このcssなりは正常に動作していると僕は思います。

ただ動くサーバーとそうでないサーバーがあると言う状況なので、原因が何かは実際の状態を見ていないので僕もエスパーではないためわかりませんが、コピペと言うワードがでてくる以上キャッシュは疑うべきかと思います。

実際の所、動作しなかったサーバーでのcssをもう一方に移したら動作すると言うことは、それは本来は動作すると言う事だと思います。確かにサーバーが違うと言うのが最初に思いつきますが、サーバーが異なれば出力されるhtml自体が変わると言うことはなく、cssはブラウザが処理しているのでサーバーとはほぼ関係ないわけです。
読み込めているcssの有無や、一方にあるプラグインが入っていて、もう一方にはないとか、どこかでエラーがでて処理が止まっているとかそういった致命的なものがない限り、どちらも同じように表示されるのが本来の状態かと思うんですけどね。

環境が同じであればcssは同じように表示されると思います。この環境が同じかどうかとキャッシュの有無が一番気になるところです。
可能であればwordpress自体も再インストールして、プライベートウィンドウとかシークレットウィンドウで作業しつつサーバー側もキャッシュはさせない設定をして再テストしてみるべきかと思います。

原因が判明いたしました！

🔴カスタマイズ→レイアウト(全体・リスト)→サイドバーを左側に表示

この設定をしていると右側に大きくはみ出してしまうようです。

サイドバーを右側に表示したところ無事にhidekichi様のデザインどおりに表示されました！

これは、サイドバーを左側に設定すると、右側には表示されていない隠れたスペースが存在するということですか？

これはコチラがCSSなどでは調整は難しいでしょうか？

やはりテーマ自体を細かく修正しないと調整できないような内容でしょうか？

カスタマイザーで、サイドバーを左にすると

#main{
  float:right;
}

#sidebar{
  float:left;
}

#sharebar{
    margin-left:700px;
  }

こういうのがhead内にstyleタグで入ります。この#sidebarの値は何かと問題が出る可能性があるので、カスタマイザーから行わず、自分でスタイルすればよいのではなかろうかと。
一応サンプルを左サイドバーにしておきました。paddingやら、margin等細かな調整は独自にしてもらうことになります。

本来ならflexでorder変えるだけにしたいところですが、そうするとスクロール追従でちょっと問題が出ることがありまして、ひとまずfloatのままです。

一番良い方法は、#mainと#sidebarの関係が、

<div id="body-in>
  <div id="sidebar"></div>
  <div id="main"></div>
</div>

このようになっていればサイドバーはデフォルトで左、必要な時はfloatで右に回り込ませれば良いだけになるんですが、現状は

<div id="body-in>
  <div id="main"></div>
  <div id="sidebar"></div>
</div>

こうなので、上記理屈から言えば#mainにだけfloatがあれば良いことになります。つまりサイドバーを左にしたい場合は、サイドバーはfloatさせず、#mainを右に回り込ませると言うことです。が、デフォルトでは#mainも#sidebarもfloatで回り込ませているので、回り込ませないといけない何かしらがあったのかもしれません。ここらの理由はわかりませんが、まぁ子テーマで全部いじればほぼ思い通りにできると言うことです。

こんなに簡単なことでスペースが出来たり出来なかったりするんですね！
無事に表示されるようになりました！
この度は本当にありがとうございました！