ソーシャルウォール 
フィード分析 
昨日はフィードにあなたの投稿が正常に表示されていました。今日は何かおかしいようです。
カラムが1つに潰れてしまっているかもしれません。画像が押しつぶされたり、引き伸ばされたりして見えるかもしれません。行間がなくなっていたり、全体が1秒ほどスタイルが適用されていない状態でちらつき、その後ようやく所定の位置に収まったりすることもあるでしょう。コンテンツ自体は表示されています。ただ、見た目がおかしいだけです。特にモバイルではその傾向が顕著です。
もしこの問題に遭遇しても、心配する必要はありません。これはほとんどの場合、本当のバグではありません。設定の問題であり、開発者でなくても、コードを1行も触らずに修正できます。
症状に当てはまる原因が分かれば、解決にはたいていワンクリックで済みます。
それでは、表示されている状態と、それを修正するための設定を照らし合わせていきましょう。列、余白、モバイル表示の順に整理していきますので、まず設定を修正し、おそらく必要のないCSSは飛ばしてください。
- フィードが表示が崩れていたり、スタイルが適用されていないのはなぜですか？（簡単な回答）
- 症状と原因を照らし合わせてみましょう（ここから始めましょう）
- 列数と間隔を調整する
- モバイル端末特有のレイアウトの問題を修正する
- テーマがフィードのスタイルを上書きしている場合
- 「AJAXテーマ読み込みの修正」で問題を解決する
- テーマを壊さない、安全なカスタムCSSのオーバーライド
- あなたのサイトに本当に合ったフィード
フィードが表示が崩れていたり、スタイルが適用されていないのはなぜですか？（簡単な回答）
フィードに不具合があるわけではありません。ほとんどの場合、以下の3つの設定上の問題のいずれかです。
- レイアウトはスペースに合わせて調整されていません。列数や間隔は依然としてデフォルトのままなので、投稿がぎゅうぎゅうに詰め込まれたり、表示が崩れたりしています。
- お使いのテーマがフィードのスタイルを上書きしています。テーマのCSSが優先されるため、フィードは本来あるべき外観を失ってしまいます。
- テーマの読み込み競合により、読み込み時にスタイルが適用されません。これが、「一瞬スタイルが適用されない状態になり、その後すぐに正常な状態に戻る」という現象の原因です。
ここで安心できる点があります。これらはフィード自体の設定内で修正できるため、ほとんどの人はスタイルシートに触れる必要がまったくありません。コーディングも不要です。
症状と原因を照らし合わせてみましょう（ここから始めましょう）
何かを変える前に、自分の目に映っているものを言葉にしてみてください。
レイアウトに関する問題には、それぞれ最も可能性の高い原因があります。現れている症状と原因を照らし合わせれば、最も効果的な解決策にすぐにたどり着くことができます。
以下に、最も一般的な原因を、確認すべき優先順位の高い順に挙げます。
| 目に見えるもの | 最も可能性の高い原因 | どこへ行こうか |
|---|---|---|
| 列が多すぎる、あるいは少なすぎる、間隔が狭すぎる | レイアウト設定が調整されていない | 列数と間隔を調整する |
| デスクトップでは正常に表示されるが、モバイルでは正しく表示されない | 「モバイル用カラム」の設定は変更なし | モバイル端末特有のレイアウトの問題を修正する |
| フィードのスタイルが上書きされているか、ブランドイメージと合っていないように見えます | テーマのCSSの特異性の競合 | テーマがフィードのスタイルを上書きしている場合 |
| 最初はスタイルが適用されていない状態で点滅し、その後、所定の位置に収まる | テーマの読み込みまたはJavaScriptの競合 | 「AJAXテーマ読み込みの修正」で問題を解決する |
さて、注文です。
まずは設定を確認してください。設定画面の上から2行です。「デスクトップの列」と「モバイル表示」は、どちらも設定画面内にあります。次に、テーマ間の競合を確認し、その次に読み込み時の競合を確認します。カスタムCSSは、もし関係があるとしても、最後に確認する項目です。
この順序はランダムではありません。最も多くのケースを解決する修正から、最も少ないケースしか解決しない修正へと並んでいます。
多くの人が間違えがちなのはここです。表示が崩れているのを見て、すぐにカスタムコードに頼ってしまいがちです。レイアウトを無理やり整えるためにCSSを書き始めてしまうのです。
まだその操作はしないでください。ほとんどの場合、組み込みの設定やチェックボックスを1つオンにするだけで、まったく同じ問題が解決します。この順序で確認すれば、不要なCSSを書く手間が省けます。
では、表から自分の症状を探してください。その項目に進んで、そこで対処してください。
列数と間隔を調整する
コラムの数が多すぎますか？それとも少なすぎますか？投稿がぎゅうぎゅうに詰め込まれていて、余白が全くありませんか？
ほとんどの場合、列数や間隔がデフォルト設定のままになっているだけであり、Smash Balloonのすべてのプラグインに付属しているライブカスタマイザーを使えば、かなり簡単に修正できます。
行と列を設定し、ライブプレビューでフィードの更新状況を確認してから、変更内容を保存します。
列や間隔の設定方法は以下の通りです。
- WordPressのダッシュボードで、フィードを開き、「カスタマイズ」をクリックします。
- [レイアウト] タブをクリックします。
- 「列数」コントロールを見つけてください。デスクトップ、タブレット、モバイルそれぞれの列数を設定してください。画面サイズごとに個別の設定があります。
- Instagramのフィードでは、「Padding」の値を設定して、投稿間の間隔を変更します。
- 「保存」をクリックしてください。
デスクトップ上で3列のすっきりとしたグリッドにしたいですか？ デスクトップの列数を3に設定してください。これで解決です。
「レイアウト」タブでは、画像の形状も設定できます。投稿の画像を、1:1の正方形、4:5の縦長、または3:4のアスペクト比に設定できます。画像が潰れて見えたり、引き伸ばされて見えたりする場合、適切なアスペクト比に合わせることで、きれいにトリミングできるので便利です。
モバイル端末特有のレイアウトの問題を修正する
デスクトップではフィードが完璧に見えるかもしれませんが、スマホでは見づらくなってしまうかもしれません。
その理由はこうです。モバイル版の列設定はデスクトップ版とは別になっています。デスクトップ版の列設定を変更しても、モバイル版には影響しません。
つまり、デスクトップで4列に設定されたフィードが、狭いスマホの画面に4列すべてを無理やり詰め込もうとするわけです。その結果、各画像はごく細い帯状になってしまいます。全体が窮屈で、ぎゅうぎゅうに詰め込まれたような印象を受けます。
この問題を解決するには、モバイル用の列を個別に設定する必要があります。先ほど使用したのと同じ「レイアウト」タブに移動してください。
- フィードを開き、「カスタマイズ」をクリックしてから、「レイアウト」タブをクリックしてください。
- タブレットおよびモバイル用の列コントロールを見つけてください。これらはデスクトップ用コントロールのすぐ隣にあります。
- デスクトップよりも低い値に設定し、「保存」をクリックしてください。
スマートフォンの画面は幅が狭いので、列数を減らした方がほぼ間違いなく見栄えが良くなります。デスクトップ版が4列の場合は、モバイル版は4列ではなく、1列か2列に減らしてください。
その変更一つで、モバイル版のレイアウトに関する問題のほとんどが即座に解決されます。
テーマがフィードのスタイルを上書きしている場合
列の設定をしたり、間隔を調整したりしても、それでも「カスタマイザー」のプレビュー画面に表示されている内容と一致しないことがあります。
状況はこうです。テーマには独自のCSS（見た目を制御するコード）があり、フィードにも独自のCSSがあります。両方が同じ要素のスタイルを設定しようとすると、どちらか一方が優先されることになります。
もしテーマのCSSがその「争い」に勝ってしまった場合、フィードの外観が崩れてしまいます。
テーマが原因である可能性を示す兆候は以下の通りです。
- カスタマイザーのプレビューは正しく表示されていますが、ライブフィードでは正しく表示されていません。
- フォント、色、または枠線が、設定した内容と一致していません。
- 設定を調整して保存しても、問題は解消されません。
もしそれがあなたに当てはまるなら、まだコードを書き始めないでください。カスタムCSSは最初の手順ではなく、最後の手順です。
まずは設定を試してみて、次に次のセクションにあるAJAXテーマ読み込みの修正方法を試してみてください。ほとんどのテーマの競合は、これで解決します。これら両方がうまくいかない場合にのみ、カスタムCSSが必要になります。
そして、実際に必要になったときは、適切な場所に配置してください。テーマファイルではなく、「外観」＞「カスタマイズ」＞「追加のCSS」に追加してください。
ブロックテーマを使用している場合は、「外観」→「エディタ」→「スタイル」に移動し、 3つのドットのメニュー（⋮）をクリックして、「追加のCSS 」を選択し、コードを貼り付けてください 。
これにより、修正内容が安全に保持されるため、テーマの更新によって上書きされることはありません。
後ほど、安全な上書き方法をいくつか紹介します。とりあえず今は、CSSは手元に置いておいてください。これは、より簡単な修正が終わった後に、微調整を行うためのものです。
「AJAXテーマ読み込みの修正」で問題を解決する
フィードがほんの一瞬、スタイルが適用されていない状態で表示され、その後すぐに正常な状態に戻る？
これはテーマ間の競合です。これを解決するワンクリックの切り替え機能があります。コードの記述は不要です。
状況はこうです。ページが開くと、テーマとフィードの両方がそれぞれのスタイルを読み込みます。時折、テーマの読み込み処理が干渉してしまうことがあります。そのため、スタイルが反映されるまでの間、フィードが一時的に未加工の状態で表示されてしまいます。
これに対処するには、2つの方法があります。
手動で行う場合は、テーマのスクリプトをくまなく調べる必要があります。競合しているコードを見つけ出し、その読み込み方法を修正しなければなりません。これには時間と忍耐力、そしてコードに対する習熟度が必要ですが、こうした能力を備えている人はほとんどいません。
最も簡単な方法は、「AJAXテーマ読み込みの修正」という組み込み設定を利用することです。この設定では、テーマの切り替えに伴う競合を回避する形でフィードを読み込むため、最初の描画時にスタイルが正しく適用されます。チェックボックスを1つオンにするだけで設定完了です。
こちらがその場所です。
- Instagramフィード » 設定 » 詳細設定（またはFacebookフィード » 設定 » 詳細設定）を開きます。
- AJAXテーマ読み込みの修正機能を有効にしてください。
- 「変更を保存」をクリックしてください。
これで、ほとんどの人にとってはその疑問が解消されるでしょう。
画像のサイズが変だったり、間違っていたりしませんか？この修正方法には、さらに詳しいバージョンがあります。
同じ「設定」»「詳細設定」画面で、3つの設定をまとめて有効にしてください。
- AJAXテーマの読み込みに関する修正
- headタグ内にJavaScriptをエンキューする
- JavaScriptによる画像の読み込み
「変更を保存」をクリックします。その後、「フィード」タブで「すべてのキャッシュをクリア」を選択し、プラグインのキャッシュをクリアしてください。
これにより、フィードは新しい設定に基づいて画像をきれいに再読み込みします。
レイジーローディングに関する注意点です。レイジーローディングの競合によって画像が表示されなくなっている場合は、解決策は逆の操作になります。「設定」＞「詳細設定」に移動し、「JavaScriptによる画像読み込み」をオフにしてください。
つまり、この2つは正反対の機能です。「JavaScriptによる画像読み込み」を有効にすると、ある種の問題が解決されます。無効にすると、別の問題が解決されます。1つずつ試してみて、変更のたびにフィードを確認し、自分のサイトにどちらの設定が必要かを確認してください。
テーマを壊さない、安全なカスタムCSSのオーバーライド
あれだけやってもまだうまくいかない？ それでは、少しCSSを使ってみましょう。
まずは朗報からお伝えしましょう。ここまで読み進める人はめったにいません。ほとんどの場合、設定の変更やAJAXの修正で問題は解決します。もしあなたがこれを読んでいるなら、あなたは「例外」であり、「一般的」なケースではありません。
また、これらのスニペットはテーマと競合することはありません。サイズが小さく、目的が明確で、安全です。
こちらは手動での操作となるため、少し手間がかかります。値を変更するのではなく、コードを貼り付ける必要があります。ただし、以下の各スニペットはそれぞれ1つの単純な処理を行うものなので、そのままコピーして貼り付けることができます。
ここでは、試してみる価値のあるリスクの低い4つのオーバーライドを紹介します。
- 支柱間の間隔を狭くしてください。 使用方法
#sb_instagram .sbi_photo { padding: 4px; }隙間を狭くするには。数値を下げると隙間が狭くなり、上げると隙間が広がります。 - 画像の高さを一律に設定する。 使用方法
#sb_instagram .sbi_photo { height: 200px; }これにより、すべての投稿が揃います。これで、不揃いだったり、間隔がバラバラに見えたりしていた行が修正されます。 - 画像の形状を統一してください。 追加
#sb_instagram .sbi_photo { background-size: cover; }そうすれば、写真が引き伸ばされることなく、きれいにトリミングされます。 - モバイルでの列の間隔を調整してください。 スペースのルールを
@media (max-width: 480px) { ... }デスクトップではなく、スマホ表示のみを変更するため。
「外観」→「カスタマイズ」→「追加のCSS」 を開き、 使用したいCSSを入力して、 フィードがどのように表示されるか確認してみてください。
ブロックテーマを使用している場合は、代わりに「外観」»「エディタ」»「スタイル」を開き、3つのドットのメニュー（⋮）をクリックして、「追加のCSS」をクリックしてください。
最後に一つ。保存した後、「フィード」タブにあるプラグインのキャッシュを「すべてのキャッシュをクリア」で消去してください。これにより、新しいスタイルがすぐに反映されます。
以上です。スニペットを1つ調整して、保存し、フィードを確認してください。必要であれば、この手順を繰り返してください。
よくある質問
モバイル版でフィードの列数が正しく表示されないのはなぜですか？
モバイル版の列設定は、デスクトップ版とは別になっています。「カスタマイズ」＞「レイアウト」に移動し、モバイルのブレイクポイント用の列を個別に設定してください。画面幅の狭いスマートフォンでは、1または2に設定してください。
CSSを使ってフィードのデザインを完全にカスタマイズすることはできますか？
はい、可能です。ただし、通常はその必要はありません。Smash Balloonに組み込まれているライブエディタで、ほとんどの場合に対応できます。ライブエディタで必要な設定ができない場合は、最後の微調整としてCSSを活用してください。
ページが読み込まれるとき、フィードがほんの一瞬、スタイルが適用されていないように見えるのはなぜですか？
そのフラッシュはバグではなく、テーマの読み込みに関する競合です。「設定」＞「詳細設定」で「AJAXによるテーマ読み込みの修正」を有効にし、「変更を保存」をクリックしてください。これで、ほとんどの場合、そのフラッシュは解消されます。
テーマを変更すると、フィードのレイアウト設定はリセットされますか？
いいえ、テーマを切り替えてもフィードの設定は保存されたままです。ただし、新しいテーマのCSSによってフィードの表示が上書きされる可能性があります。特異性の競合がないか再度確認し、必要に応じてAJAXによるテーマ読み込みの修正を再度適用してください。
レイアウトの問題を修正するには、コーディングの知識が必要ですか？
いいえ、そんな必要はありません。レイアウトに関する問題のほとんどは、フィードカスタマイザーの切り替えスイッチやスライダーで解決できます。技術に詳しくなくても、コードを書く必要は一切ありません。
あなたのサイトに本当に合ったフィード
見た目が崩れているフィードが、実際に機能していないことはめったにありません。ほとんどの場合、設定の問題です。
まずは症状と原因を照らし合わせてみてください。スタイルシートを編集する前に、設定を修正しましょう。そして、ほとんどの場合、修正はコードを1行も書く必要はなく、クリック1回で済みます。
列や余白を調整するための組み込みのレイアウト制御機能が用意されています。スマートフォン画面用に個別のモバイル設定も用意されています。また、画面が一瞬点滅してしまう問題に対するAJAXテーマ読み込みの修正も施されています。カスタムCSSも利用可能ですが、これはごく稀な最終調整にのみ使用されます。
サイト内の他の場所でも、埋め込みコンテンツを同じように鮮明に表示させたいですか？以下のガイドでは、その手順を段階的に解説しています：
今すぐフィードのレイアウトを修正しましょう
「Instagram Feed Pro」または「Facebook Feed Pro」を導入して、あらゆる画面サイズでサイトに最適なフィードを表示しましょう。
