スマホで見るとツイッターのタイムラインのウィジェットだけ幅が広く表示される

やりたいことは余白が出来てしまうのを防いで
全部の横幅をそろえたいということです。

キャプチャ画像をお付けします。

幅広になっている状態
↓
http://yunikki.com/wp-content/uploads/2015/12/12072.png
http://yunikki.com/wp-content/uploads/2015/12/1207.png
意味が分かりますでしょうか？＞＜

自動投稿されたツイートに乗っているURLが
他の新着記事のURLと違って長くなっている状態
↓
http://yunikki.com/wp-content/uploads/2015/12/12073.png

私のブログのURLは
http://yunikki.com
です。
よろしくお願いいたします。

ツイッタータイムラインってiframeですよね？
で、セレクタを見てみた所、

.timeline {
  max-width: 540px;
}

になってるので、これをmobile.cssあたりで、

#sidebar .timeline {
  max-width: 100%;
}

にしてみてはどうかと思ったりも。そしたら#sidebarの横幅にぴったり合うのではないかと思ったりもします。

あ、mobile.cssではダメかも。header-insert.phpにstyleタグで書くのが良いですかね。

わいひらさん★

いつもお世話になっております。

ご質問にお答えします。

＞スマホでタイムラインを表示する必要
できれば表示させたいです。
もしいろいろ試してダメだったら泣く泣く諦めようと思います。

また次の方法も試してみました。

１、「Revive Old Post」というプラグインを停止させた状態
→変化なしでした。

２、Twitterのタイムラインウィジェットを外した状態
→横幅が正常になりました！

androidは大丈夫なんですね。
私はiPhone6です。
chromeでもsafariでも表示はおかしいです・・・

Hidekichiさん★

いつもお世話になっております。

▼
#sidebar .timeline {
max-width: 100%;
}
▲

をheader-insert.phpに書いてみました。
（styleタグで書く、という意味が分からなかったので、
そのままコピペしました＞＜）

でも何も変わりません・・・

記述の場所も悩んだのですが、
一番下に記述すると
↓

真ん中あたり
↓ここです。

に記述しても特に何も変化はありませんでした。

申し訳ありません。
もう一度ご教示いただけますでしょうか。
よろしくお願いいたします。

「CSS　ヘッダー」などで検索されるとヘッダーへのスタイルシート適用方法がわかるかと思います。

> styleタグで書く

これは、header-insert.phpの中に

[style]
#sidebar .timeline {
//略
}
[/style]

こんな感じに書きますが、PHPの閉じタグをよく確認して、PHPの閉じタグの後に追記します。わからなかったら、一番最初(先頭)に追記したら良いかと思います。また例のごとく上記の[style]の[]は半角の〈〉です。

hidekichiさん★

ありがとうございます。
▼
<style>
#sidebar .timeline {
max-width: 100%;
}
</style>
▲
とheader-insert.phpの先頭に記述しましたが
何も変わりません・・・
↓
記述のキャプチャです。
http://yunikki.com/wp-content/uploads/2015/12/51b6e72b8fedaa64dbea904916317f1a.png

わいひらさん★
失礼いたしました。現象確認でそのまま消した状態にしていました＞＜

また表示させてみましたので、
ご確認いただけますでしょうか。

何卒よろしくお願いいたします。

別のサイトに書いてあったものですが、ゆみさんのサイト用にアドレスを変更しておきました。

サンプル: twitterのtimelineの幅を100%にする | jsFiddle

javascript部分は子テーマjavascript.jsにまんま追記、右上のcss部は、別ファイルで内容を保存後、子テーマにアップロード。

タイムラインが読み込まれたら、iframeの中のheadの中に、子テーマのcssを読み込む記述を追記します。
これで無理だと、手の打ちようが…(笑)

これらに伴い、header-insert.phpの内の追記したstyleタグの記述は削除しておいて下さい。

ただ、僕は思うんですが、twitterにこれほど力を入れるよりも、例えば、サイドバーのwidgetのサイズを50%あたりにして、タブレットの時、2列にしたらどうでしょう？
スマホの時は、最大の横幅が520pxまでなら最大幅で表示されるはずですし、スマホを横向けにした時にどうするかが問題ですが、スマホの時ってサイドバー自体は非表示で、パネルの中に入ったりしてるかと思うのでそのままでも行けそうですし。どうですかね？

サンプル: サイドバーをタブレットの時に2列にしてみるその他 | codepen

例えばのサンプルですけど、こういうの。

家庭の事情で忙しく・・・
ご連絡が遅くなり大変申し訳ございませんでした！！

hidekichiさん★

いつもお世話になっております。
ありがとうございます。

ご指示の通り、
▼
javascript部分は子テーマjavascript.jsにまんま追記、右上のcss部は、別ファイルで内容を保存後、子テーマにアップロード。

header-insert.phpの内の追記したstyleタグの記述は削除しておいて下さい。
▲
→こちらは完成しました。
ただ、

▼
タイムラインが読み込まれたら、iframeの中のheadの中に、子テーマのcssを読み込む記述を追記します。
▲
→こちらはどのようにしたらよろしいでしょうか？

わいひらさん★

いつもお世話になっております。
コメントありがとうございます。

▼
パソコンのChromeでは特に表示は問題ないようです。
▲

→たしかにパソコンのchromeでは問題ありません。
スマホのchromeでだけおかしくなります。

▼
CAP SHAKE
▲
→こちらのサイトは問題なく表示されます。

これほどご指示いただいているのに
改善されないので、とっても申し訳なく思います。

hidekichiさんの
「iframeの中のheadの中に、子テーマのcssを読み込む記述を追記」
のご指示をいただいて何も変わらないようでしたら、

スマホでツイッターを表示させるのをあきらめようと思います。

あまりサイトの下の方まで見られることないですものね＞＜

> こちらはどのようにしたらよろしいでしょうか？
jQueryをまんまjavascript.jsにコピペしたらもうなってるはずですが…
ダメですかね？
twitterもあれやこれやと仕様を変えてくるもんで(笑)

ちなみに子テーマにアップロードは、子テーマcssとかの中にではなく、通常の子テーマstyle.cssとかがあるいわゆる子テーマディレクトリ(/wp-content/themes/simplicity-child/)です。

それから今気がついたんですけれども、子テーマstyle.cssに、

#twitter-widget-0 {
    max-width: 100% !important;
}

これ追記しといて下さい。これでイケるんじゃなかろうかと思ったり。

何がどうなっているのかを書いておくと、

twitterのタイムラインは、挿入コードがある場所に、その本体をtwitterから読み込むようになっています。
おそらくサイトとユーザーを識別するようなアドレスと、外部から本体を読み込むためのスクリプトになっているかと思います。
そのアドレスがある箇所に本体を読み込むのですが、まずiframeでいわゆる本体を入れるための「枠」を作ります。iframeは何かしらのサイトの1ページを読み込めるようなもので、そこには通常のhtmlと同様headタグやbody等があります。

twitterのタイムライン本体はなぜかwidthを520pxに固定していて、それを回避するためにtw.cssをタイムラインが読み込まれたらタイムラインの本体内のheadタグに挿入するスクリプトが今回のものです。
その中には、
max-width: 100% !important;
width: 100%; !important;
とありますので、元々のタイムラインが指定しているwidth: 520px;等を上書きできないように100%で固定します。これは動作してました。

先ほどのレスで、#twitter-widget-0のmax-widthを100%固定にするように書きましたが、タイムラインが入っているその親要素に当たるiframeが520pxの指定になっていたので、これを解除するためのものです。ウィジェットが読み込まれる際に、styleタグ内にwidthで指定されているだけなので子テーマから制御できるかと思います(!importantで上書き拒否仕様)。

タイムライン本体は、iframeの中に、通常のhtmlページとして読み込まれているため、本体はtw.cssでスタイルできますが、iframeはその親になるので、(中のheadタグに読み込ませた)tw.cssからでは制御できないため、子テーマのstyle.cssに上書きできないような指定で100%固定とします。

そうすると、おそらくは、サイドバー(#sidebar-widget)の幅いっぱいに広がるようになるかと思うので、これからはサイドバーの幅をカスタマイズ(#sidebar-widget)していけば、色々と対応できるようになるかと思います。

もしtwitterのタイムラインを取り除きたいという事になった場合は、tw.cssを挿入するためのjQueryのスクリプトとこの#twitter-widget-0の指定をコメントアウトするか、削除なりして対応できるように、各スクリプトあるいは該当部分の先頭にわかるようにコメントで「twitter-timeline関係」などと入れておき、後から見てこれなんだったっけ？とならないようにしておいて下さい。

子テーマstyle.cssに #twitter-widget-0 を作成
子テーマjavascript.jsに タイムライン本体内headタグ内に tw.cssを読み込ませるjQuery
子テーマに タイムライン本体内headタグ内に設定する tw.css

今回必要なものは以上です。

hidekichiさん★

いつもお世話になっております。
お返事ありがとうございます。

＞jQueryをまんまjavascript.jsにコピペしたらもうなってるはずですが…

そうなんですね！変化なしでした・・・
やったことのキャプチャ貼っておきます。
間違っていたらご教示ください。
http://yunikki.com/wp-content/uploads/2015/12/1223.png

＞子テーマにアップロードは、子テーマcssとかの中にではなく、＞通常の子テーマstyle.cssとかがあるいわゆる子テーマディレク＞トリ(/wp-content/themes/simplicity-child/)です。

ここはこのようにしました。
↓
http://yunikki.com/wp-content/uploads/2015/12/12231.png

＞子テーマstyle.cssに、

——————
#twitter-widget-0 {
max-width: 100% !important;
}
——————

も追記しました。
↓
http://yunikki.com/wp-content/uploads/2015/12/12233.png

すみません。
とっても詳しく解説までいただいているのに・・・
ここまでしても
↓
http://yunikki.com/wp-content/uploads/2015/12/12234.png

何も変わりません＞＜

なんだか申し訳なく思ってきました。
改善できなくて本当にすみません。

私のiPhoneだけなのでしょうか・・・

ブラウザをタブレットサイズにリサイズしたら、100%表示はできてるので、スマホ側のキャッシュのせいかも知れません。

しばらく様子を見るか、スマホの違うブラウザで試してみるか、サイトにアクセスされたことがない方のiphoneでアクセスしてみるか等をしてみないと正しく動作しているかは何とも言えません。
ただ今回手を入れた部分は動作はしているので、iphoneあるいは、利用されているブラウザの対応の問題もあるかも知れません。
規制されてたり、ブラウザのバグ、あるいはセキュリティに引っかかるような所は無いかと思うんですけどね。

ブラウザのmax-widthに問題がある可能性は無きにしも非ずですけれども、考えにくいなぁと思ったり。

あ、今最後の画像を見て思ったんですけど、
メディアクエリが効いてないだけとか(笑)

子テーマstyle.cssか、mobile.cssあたりに

@media screen and (max-width: 440px){
  #sidebar {
    position: initial;
    padding: 10px;
    box-sizing: border-box;
  }
  /*必要があれば以下も*/
  #sidebar h4 {
    width: 100%;
    box-sizing: border-box;
  }
}

とか。
これは画面の最大サイズが440pxの時の設定なので、タブレットの時と表示の仕方を分ける場合に。#sidebarのpaddingはお好みで。
タブレットと同じ表示で良いのであればmax-widthの440pxを740pxあたりで入れておけばよいのではないかと思います。あるいは680pxとか。ここらもお好みです。

最後の画像を見るに、twitter部分は100%になっているかと思うので、単純にh4の幅が足りないだけとかのような気がします。

記事本文(#main)と#sidebarの境界辺りの画像が欲しい所です。

mobile.cssに、

#sidebar h4 {
  width: 100%;
  box-sizing: border-box;
}

だけで直ったりして(笑)

ツイッターのタイムラインのコードをこんな感じのコードで囲ってみてはどうですか？

<div class = "twittertimeline" style="max-width: 100% !important;">
/*ツイッターのウィジェットのコード*/
</div>

ご連絡遅くなり申し訳ありません。

hidekichiさん★

＞最後の画像を見るに、twitter部分は100%になっているかと
＞思うので、単純にh4の幅が足りないだけとかのような気がします。

とのことですが、

のキャプチャの一番上のように記事一覧のところにも右に余白が出来てしまいます。

本文とサイドバーあたりのキャプチャ追加しておきます。
↓

やはりこちらでも余白が・・・
違うブラウザで試したりリロードしたり
再起動させてみたりしましたが変わらずです。

また、
———-
@media screen and (max-width: 440px){
#sidebar {
position: initial;
padding: 10px;
box-sizing: border-box;
}
/*必要があれば以下も*/
#sidebar h4 {
width: 100%;
box-sizing: border-box;
}
}
———-
はstyle.cssか、mobile.cssにも入れてみましたが
何も変わりません。

また、mobile.cssに
———-
#sidebar h4 {
width: 100%;
box-sizing: border-box;
}
———-
を記述しましたが何も変わりません。

yokudekiruさん★

コメントありがとうございます。

ご指摘の

———-
<div class = “twittertimeline” style=”max-width: 100% !important;”>
/*ツイッターのウィジェットのコード*/
</div>
———-

をウィジェットに追加しましたが
こちらも何も変わりませんでした・・・

まだ試してみるべきことはございますか？

お手数をおかけし
申し訳ありませんが何かございましたら
コメントお待ちしております。

もしお手上げということでしたら、
諦めてツイッターウィジェットは
スマホのみ非表示にしたいと考えております。
よろしくお願いいたします。

てっきりサイドバーだけが余白があるのかと思ったら全体にアキがありますやん(笑)

twitterの部分が100%なのに間違いないのは画像からも見て取れますが、結局twitterの部分で100%にできたのなら、それは他の部分で記述が足りないんだろうと思います。

Simplicity公式サイト(現在ver2に向けて手が入っているのでちょっと違うかも知れませんが)を利用されているiphoneなどで見てみて、同じように右側に隙間があるのであれば、それはわいひらさんに「どうなってんだい、おい」と、なかやまきんに君みたいに突っ込むべきですが、そうでないのであればメディアクエリを書き換えるか、面倒なら最新版の親テーマをダウンロードして、解凍し、responciveなんちゃら.cssやnarrow.css、mobile.cssあたりと自分のサイトの同ファイルあたりを見比べて足りない部分はないか確認してみるのも方法です。

僕が思うに中身が100%でないからそうなっているのではないかと思うので、

@media screen and(max-width: 740px) {
  #main {
    width: 100%;
  }
}

あたりを子テーマとかに入れてみて、記事部分が幅いっぱいに広がるのであれば、他の部分も足していけば良いかと思います。
後は、#sidebar .widget、ヘッダが狭いままなら#h-topあたりもですかね。
#sidebar h4だけで効かなかったわけですから、#sidebarも100%になっていないのかも。

外からでは、何が足りないのか全部わからないので(PCのデベロッパーツールでは正しく表示されているので、safariとかの挙動かも)順番にやってみて、確かめる他ないかと思います。
けどsafariの挙動なら他の人もそういう報告があるかと思うんですよね。何かしら該当ファイルなどに手を入れられた覚えはありますか？

hidekichiさん★

お世話になっております。

サイドバーだけじゃなく全体的にです。
すみませんでした。

＞twitterの部分が100%なのに間違いないのは画像からも見て取れ
＞ますが、結局twitterの部分で100%にできたのなら、それは他
＞の部分で記述が足りないんだろうと思います。
とのことですが、

「ツイッターの部分で100％にできた」というよりも

↓このトピックの「URLがはみ出る」という事象のように
http://wp-simplicity.com/suport/topic/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%81%ABurl%E3%81%8C%E5%90%AB%E3%81%BE%E3%82%8C%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

ツイッタータイムラインのURLが長いので、
そのせいで勝手にツイッターの枠だけが
広がって、全体的に余白が出来てしまうのかな？

と思っていたのですが。。
↓

なので、一番最初のコメントに

———-
▼
blockquote {
word-wrap: break-word;
}
▲
をスタイルcssに記述しましたが何も変わりませんでした。
———-
と記載させていただいたんですね＞＜

すみません。なんか伝わっていなくて。

なので、ツイッターに合わせて他を広げるというよりも
ツイッターだけを縮める方法はないかな？

と思ったのですが、違うんでしょうか・・・

とりあえず今
hidekichiさんにご教示いただいた
———-

@media screen and(max-width: 740px) {
#main {
width: 100%;
}
}
———-
をstyle.cssに記述したら
特に見た目は変わりませんでしたが、

ツイッタータイムラインの長いURLのものを
削除したら正常に表示されるようになりました！

ひとまずはこれでよさそう？？
です。

あと・・・別件？？で申し訳ないのですが、
こちらで教えていただいたカスタマイズをしたら
私が間違えてしまったみたいで
スマホで見たときのみ、

本文下のSNSマークのところに
灰色の枠で囲われた本文の一部や
関連記事の画像あたりに

白文字でcssのようなhtmlのような記載や
本文の一部などがうっすら出てくるように
なってしまったのですが
なぜだか分かりますか？

↓こんな感じ・・・

一度すべてのカスタマイズをもとに戻したつもりなのですが・・・

すみませんが、ご教示いただけないでしょうか＞＜

これは私のiPhone6だけではなくて、
みなさんのスマホで見たときもそうなっていますか？

ちなみにキャプチャのURLは
http://yunikki.com/312.html

です。

お手数をおかけしますが
よろしくお願いいたします。

> ツイッタータイムラインのURLが長いので、
> そのせいで勝手にツイッターの枠だけが
> 広がって、全体的に余白が出来てしまうのかな？

twitterの長いアドレスは各パーツに分けられて

[a href="アドレス"]
  [span]http://[/span]
  [span]ドメイン[/span]
  [span]クエリ[/span]
[/a]

こんな感じで長くなって枠に入らなかったら省略されると思うんです。しかしそれが原因なのであれば、前にアップロードしてもらったtw.cssに

.timeline a {
  word-wrap: break-word;
}

とでも入れたら行けそうな気はします。
例えば通常のtwitterのtimelineの場合、widthは100%でmax-widthが5いくつか(524でしたっけ？)pxだった場合、スマホ縦の横幅はそれよりも小さいでしょうから100%になるはずです。
僕はむしろ、タブレットサイズで表示した時にtwitterが100%にならないのが問題かと思いましたが、他の部分で100%にならない、#mainが横幅いっぱいにならないのが問題であるわけですから、確かに何かが横に伸びていてtwitterの部分はそれに追従して100%表示になっているというのは考えられます。

ちょっとこの問題の前に、別件の方ですが、SNSのボタンの何かしらが読み込まれてそのhtmlの中身が表示されたような感じになっています。SNSの何かのファイルを最近イジったこととかはありませんか？
pocketのカウントの部分に、数値を拾う前のhtmlあたりが表示されているようです。

※ これは他の方もそうなるようであれば、pocketの仕様が変わったのかも知れません。

メニュータイプをスライドあたりに変えて、シェアボタン(モバイル)のタイプをバイラルあたりに変えて様子を見るのも方法です。

それから、サイドバーにテキストウィジェットを入れて、
[div class=”test1″]テスト[/div]
[div class=”test2″]テスト2[/div]

※[]は半角〈〉に直して下さい。などとし、子テーマsyle.cssに、

#sidebar .test1 {
  width: 320px;
  background-color: #f00;
}
#sidebar .test2 {
  width: 100%;
  background-color: #00f;
}

こんなのを入れて見て下さい。そうしたら、テキストウィジェットの所に、サイドバーがどれぐらいのサイズで表示されているのかがわかるかと思います。赤いのが320pxで青いのが100%です。iphoneは表示について色々とあるんですが、320pxがどのあたりかがわかれば実際にどれぐらいのサイズでサイドバーが表示されているのかがわかるかも知れません。
320pxの倍近くにtwitterの幅がある場合、何かが押し広げていると思います。あまり差がない場合は、twitterの100%が正しいなどと考えられる目安になると思うんです。

まぁ親テーマに何もカスタマイズされていないのであれば、親テーマをサックリ再インストールが早いですけれども。

現在私も同じ状況です。

http://yunikki.com/
現在このサイトをiphone safariで閲覧すると問題なくtwitterが表示されています。

これはどのような対応をしているのでしょうか。

御教示していただければ幸いです。

解決しました！

<!– twitterウィジェット表示調整 –>
<script type=”text/javascript”>
window.onload = function(){
//読み込ませたいcssをここで設定
var cssURL =
　　　　'<link href=”<?php bloginfo(‘template_directory’);?>/tw.css” rel=”stylesheet” type=”text/css” media=”all” />’;
changeWidget();
function changeWidget() {
var twIframe = $(‘iframe.twitter-timeline’);
if (twIframe.length > 0) {
//自作定義したcssを追加
twIframe.contents().find(‘head’).append(cssURL);
}else{
//読み込みできなかった場合は1.5秒後にリトライ
setTimeout(changeWidget, 1500);
}
}
}
</script>

tw.cssの中に

/* タイムライン横幅 */
.timeline {
max-width: 100% !important;
width: 100% !important;
width: 300px !important;
}

を書き込むとtwitterがはみ出なくなりました。
私はサイドバーの幅を300pxにしているので、tiwtter自体の幅も300pxに指定しました。
→width: 300px !important;

> 私はサイドバーの幅を300pxにしているので、tiwtter自体の幅も300pxに指定しました。

そうするとタブレットの時も300pxになってしまう可能性があったりしませんか？
タブレットの時にサイドバーが非表示、あるいは300pxでも良いというのであれば良いですが…。

基本100%にしておく方が良いようにも思います。そうすればどの幅でも対応できますから、336pxとかにしても大丈夫になりますし。
ただ、タブレットの時は、100%にすると広すぎる可能性があるので、メディアクエリとかを入れておくのが良いのかも知れません。

あ、それから市川さんに追記で。

どこにscriptを書かれたかはわかりませんけれども、もし親テーマに書かれておられるのであればアップデートでそのスクリプトが無くなってしまうかも知れないので注意して下さい。
できれば、子テーマjavascript.jsに、bloginfo(‘template_directory’)とこれを囲むphpタグを自身のアドレスに変えて書かれるのが良いかと思います。

それが #34674 で書いてる内容なんですけれども。子テーマにあれば親テーマのアップデートに影響しません。
また子テーマjavascript.jsはjQueryと依存関係があるようにして読み込まれているため、jQueryよりも先にスクリプトを読み込むというようなエラーを回避できます。

hidekichiさん

いつもお世話になっております。
とりあえずツイッターの横幅は正常に戻ったので
解決とさせていただければと思います。

いろいろと申し訳ありませんでした。

そこで、別件でご質問させていただいた
シェアボタン付近の謎の文字の件ですが、
SNSについてはカスタマイズした記憶がないのですが、
きっと私が忘れているだけで何かしたのだと思います…

思い出せないので、

hidekichiさん、わいひらさんのご教示のとおり
親テーマも子テーマもデフォルトのものに戻しました。

でも、謎の文字は消えないままでした。

そこで、

WPダッシュボードの
外観→カスタマイズ

のところのSNSのところをいじってみたところ、

「全シェア数の表示」を有りにすると
謎の文字が出現し、

無しにすると謎の文字が消えました。

これで何が原因か分かりますでしょうか？

もうシェア数の表示はなしにしようかとも思いましたが、
数字が出るべき部分がずっとグルグルしているので、
ちょっと気になります。

またまたお手数をおかけいたしますが、
ご教示いただければ幸いです。

よろしくお願いいたします。

モバイルの時のSNSのタイプは、バイラルとかに変わってますか？
つまりajaxで値を取得する方法のやつです。

以前別のトピックであったんですが、前に使われていた数値を取得するSimplicity独自の関数が、ファイルの整理で使われなくなったりして値が拾えないというのがありました。
それは確かfeedlyだったかと記憶していますが、pocketあたりも同様の現象が起きている可能性があります。

SNSのボタンタイプをバイラルとかに変えてみてはどうかとしつこく言うのは、デフォルトとバイラルなどでは取得方法(関数等)が異なるからです。バイラルで正常に表示できるのであれば、デフォルトのファイルがオカシイとどこを修正すればよいのかの目安になるので。

hidekichiさん

いつもお世話になっております

シェアボタンのタイプをみてみたら
バイラルタイプになっていました。

でもデフォルトに戻しても
文字は依然消えません。

ちなみにモバイルの
「本文下のシェアボタンを表示」のチェックを外すと、
なぞの文字は消えました。

************

わいひらさん

いつもお世話になっております。
親テーマをFTPなどで上書きアップデートを確認した後、一瞬だけでも良いので、「親テーマのみ」を有効化

というのは

私はFFFTPを使っているのですが、
simplicity.zipを解凍して中身の
simplicityを

/yunikki.com/public_html/wp-content/themes
にアップロードするということで間違いないでしょうか？

このようにして親テーマを有効化しましたが、
謎の文字はなくなりません。。。

すみません。
何かほかにするべきことはありますでしょうか？

よろしくお願いいたします。

> バイラルタイプになっていました。
モバイルのSNSのタイプがバイラルになっていましたか？
アレはバイラルではないかと思うんですけれども・・・。

> simplicity.zipを解凍して中身の
> simplicityを

わいひらさんへのレスですが、答えますと、zipは解凍しなくても良いです。
zipのままwordpressのダッシュボード→テーマ→左上の新規アップロード→ファイルのアップロードでzipごとアップロードできます。

ftpのソフトで予め現状のバックアップをとって下さい。この時に、単純にダウンロードすると新しいものは上書きするかも知れませんが、古いものはスキップされる可能性があります(設定によりけり)。なので、全上書きでダウンロードして、完全に現在の状態をバックアップする必要があります。
もちろん親テーマに手を加えていないというのであれば子テーマだけで良いです。その際に、保管しておくべきは、/wp-content/themes/simplicity/と/wp-content/themes/simplicity-child/だけです。他のはまぁ別にどうでも良いといえば良いので。

で、アップロードする時は、一旦wordpressデフォルトの公式テーマを何かしら選んで、有効化した後にsimplicityの子テーマ、親テーマを削除します。これもテーマ画面から行えます。
他のテーマを有効化しないとSimplicityは削除できません。子テーマは親テーマを探すので、削除順は子テーマ→親テーマの方が良いのかも知れませんがどっちでもよいです。

ウィジェットの設定などもたいていはデータベースに入っているので良いかと思うんですけれども、念の為、どのウィジェットがどういう設定であったかを大まかにメモっておくなりして元に戻せるような準備はしておいたほうが良いかと思います。

Simplicity親子テーマが削除できたら、同画面左上から新規アップロードで親→子テーマと言う順でアップロードして、子テーマを有効にすれば良いかと思います。

元に戻せる準備で、現状のテーマファイルを完全バックアップ。ウィジェットの設定をチェック、その後でテーマの削除→新テーマ(zipごと)アップロードで、必要な設定をし直すと言う感じです。

必要な設定とは、バックアップしていた子テーマstyle.cssやjavascript.js、またその他のファイルを新しい子テーマに移す作業です。ファイルをフォルダに入れて上書きでもまぁ大丈夫かと思いますが、今回は何かしらファイルにありそうなので、色々確かめながら徐々に戻していく感じが良いかと思います。

とにかく元に戻せるようにバックアップしてあるわけですから、デフォルトのSimplicityで動作が正しいかどうかを確かめながらやっていくのも良いかも知れません。子テーマの内容を新しい子テーマに移した時に、まだ足りない何かがあれば、それは親テーマにカスタマイズした分かと思います。
それらもできるだけ子テーマに移すせるようにしたほうが良いでしょう。

hidekichiさん

いつもお世話になっております

今ご指示の通り、

>元に戻せる準備で、現状のテーマファイルを完全バックアップ。ウィジェットの設定をチェック、その後でテーマの削除→新テーマ(zipごと)アップロードで、必要な設定をし直す

ということでダウンロードページからデフォルトの
親テーマ子テーマをzipごとアップロード&子テーマを有効にしましたが謎の文字が消えません。

なぜなのでしょうか。。

ちなみに
シェアボタンの
google+1とpocketを非表示にすると謎の文字は消えます

うーむ、どうやらSimplicity側でエラーが出ているようです。
該当htmlは拾えているみたいですが、そこからカウントを取得するのに失敗している模様。

うちのサイトでやってる方法では取得出来てるみたいなので、わいひらさんの修正が入るまではうちのを使うか、カウント部分に手を加えて表示をひとまず、カウントを取得させないようにしておくか、ボタンの表示自体を消しておくかでしょうか。

参考: Simplicityを少し改造してみた part13 シェアボタンのカウントをphpで行う | blazechariot -Xdomain-

twitterと同じように、カウンタが回らないようにするには、
該当部分抜き出し リインデント | jsFiddle
を参考に、sns-buttons-icon.phpの該当部分(googleとpocket)のカウントを表示している、
[span class=social-coubt 名称-count][span class=fa fa-spin][/span][/span]
をコメントアウトすればいけるのではないかと。

オリジナルのファイルはインデントされてないので、fiddleに該当部分を書き出して、インデントを付けておきました。twitter部分と同様にしておけば、スピナーがクルクル回るのは無くなるかと思います。
まぁmobileでもsns-buttons-icon.phpが使われているだろうという想像のもとですけどね。

ただ、僕もgoogle-plusでエラーが出たので上記の内容でイケると踏んだわけですが、カスタマイザーで、色々とPCとモバイルのそれぞれの組み合わせを変えていたらエラーが出なくなったので、上記方法を試す前にカスタマイザーで、設定を変えてみて下さい。

バイラル:バイラル = PC: mobileで問題なければそれを使うのが良いかと思います。完全レスポンシブがonの場合は、モバイルの方が効かなくなるのかも知れません。ひとまず、カスタマイザーの設定を色々変更してそれでも解決しない場合は上記の方法という方向で。

※プラグインやサーバー側でキャッシュがある場合は削除を忘れずに

あ、それからトピックが長くなってきたので、問題が引き続き出るようなら、新しいトピックを立てて(件名は現在の状態のもので)、続きとわかるように(このトピックからの流れでこうなったと言う感じで)し、このトピックへのリンクを入れる方向でやるのが良いかも知れません。
元々の内容とは変わってきているので。

Hidekichiさん

いつもいつも本当にありがとうございます！
Simplicity側でエラーのようなんですね。

私が変なことをしてしまったと思い焦ってしまいました。

本当に長々とお付き合いくださりありがとうございました。

ひとまず改善がされることを祈って
非表示にしておきたいと思います>_<

(まだアクセスもほとんどないので(苦笑)

何か問題が起こったら別とぴに立てようと思います。

なんか解決になりそうでならなくて済みませんでした。
でもここまで私にお付き合いくださったhidekichiさんや
みなさんに心から感謝申し上げます。

また何かあったら聞くかと思いますが、
その時はどうぞよろしくお願いいたします。