【不具合解決】スマホ、モバイル端末表示で記事が重なる!?|WordPress

ブログ作成

こんにちは、カヨです。

 

ワードプレスでブログを立ち上げて5ヶ月
その中で様々な問題が起きています。

 

 

《今回の問題はこんな不具合です》
▼▼▼

 

初心者ブロガー:
「わ!なにこれ携帯で見たときだけこんな風に表示されるんだけど!?」

どうやら一部モバイル端末で記事一覧、
カテゴリーページの記事画像が重なってしまう
という不具合バグが起きてるらしいです。

 

今回はこの画像の現象の解決方法を分かりやすくご紹介!
初心者目線で詳しく解決していきます。

 

✔︎先日こんなツイートをしました

 

解決メモです。
このようになるべく簡潔にツイッターで発信もしていますので
よければフォローもお待ちしています。

 

 

ブログ表記をかっこよくしたくて
パソコン表示ばかりに気を取られていて
様々な設定を触り、
最後にモバイル表示を確認した所
画像のように記事一覧がおかしなことになっていました。

 

 

✔︎【この記事でできること】
今回は画像のように
「表示の際に記事同士が重なってしまう」時の解決方法の解説です。

 

早速説明していきますのでお付き合いください。

 

 

 

 

スマホ・モバイル表示で記事が重なるのを解消する方法

メモ:ワードプレス、テーマcocoonを使用

 

1.ダッシュボード→cocoon設定をクリック

今回はテーマcocoonを使用しています。
ダッシュボードを開き、
左端のメニューからcocoon設定をクリック。

 

 

2.インデックスをクリック

cocoon設定をクリックし、
次のページへ移動すると「スキン」が元々選択されています。
なので、「インデックス」をクリックして切り替えます。

 

 

3.下にスクロール→カードタイプの項目を「縦型カード2列」に設定

「インデックス」に切り替え後
少し下に画面をスクロール。
カードタイプの項目の中の「縦型カード2列」を選択。

※もしデフォルト(初期設定)に戻したい方は「エントリーカード(デフォルト)」を選択。

 

 

4.さらに下へスクロール→「設定をまとめて保存」

カードタイプの選択が終わったら
さらに画面を下にスクロール。
一番下の「変更をまとめて保存」をクリック。

 

 

5.作業完了!

✔︎モバイルから自分のサイトへアクセスして確認

記事の画像が重なる現象が直っているか
モバイル、スマホ表示から確認してみてください。

 

 

作業は以上です。
次にどの行動から今回の事柄が起こったのか考えてみよう。
これを知ることでより、
ワードプレスをより深く知ることができる。

 

 

 

原因になる行動

① cocoon設定→インデックス→カードタイプ→タイルカード2列 または カードタイプ3列に設定
② cocoon設定→インデックス→カードタイプ→「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」に✔︎を入れた。

①②が原因ではないかと考える。

 

 

①タイルカード2列 または カードタイプ3列に設定

特に①が原因でタイルカードという設定が
問題を起こさせるのではないかと筆者は考える。

 

 

②「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」に✔︎を入れた

②は関係ないかもしれない。
✔︎を入れない場合、縦型&タイル型設定したもとの設定(デフォルト)は2列表示のようだ。

 

 

 

では、次に何をしようとして
問題が起きたのかを考えてみよう。

 

 

 

筆者がそのようになった経緯

1.インデックス設定を自分で変更した
2.cocoonの記事整列画面をカスタムしたかった

何かをする前はデフォルトでこうなってたはず。
問題は変更したからですよね。

(以下の画像はデフォルト、元の状態)

▼パソコン表示▼

 

▼モバイル、スマホ表示▼

 

今回の記事にたどり着き、
重なる不具合に困った人の中で
同じことを目的に行動した人いると思うので
記事一覧のカスタム方法も簡単にご紹介します。

 

 

✔︎本当にやりたかった設定

・横長の記事で1列なのを2列で表示したかった
・モバイルとパソコン表示を別にしたかった

これらのためにcocoon設定の
インデックスの設定を自分で変更。
そうした経緯でこの記事にたどり着いた方は
この記事で解決したでしょうか。

 

 

 

この問題の過程で学べたこと

✔︎記事一覧ページの記事の並び方の設定方法

この問題の原因の「記事一覧の表示をかえてみたい!」ですが
解決と同時にやりたかったことも学べました。

①パソコン表示での記事の並びを2列や3列に変更すること
②モバイル表示で記事を1列や2列に変更すること

 

 

①パソコン表示での記事の並びを2列や3列に変更すること

①にするには、今回の問題解決方法を実践すると
自然となっていると思います。
変更方法は以下です。

▼▼▼

今回の記事内で見るところ:
【スマホ・モバイル表示で記事が重なるのを解消する方法】の中の項目【3.下にスクロール→カードタイプの項目を「縦型カード2列」に設定】の設定を参考にして設定を変えてみてください。

 

 

②モバイル表示で記事を1列や2列に変更すること

②を設定するには、
今回の問題解決方法を実践すると
モバイル表示では1列になっていると思います。

▼▼▼

今回の記事内で見るところ:
①を参考にカードタイプの項目までページを移動して
「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」
この四角の中に✔︎を入れたり外したりして好みに設定してみてください。

 

 

 

まとめ

結果:
cocoon設定のインデックス設定の中の
カードタイプを変えたことによって起こった問題

 

  1. もとに戻したい方はデフォルト(下のチェック項目)に戻すのがいい。
  2. 記事一覧の画面を画像のように2列変更するには以下の方法がいい。

▼▼▼

cocoon設定からインデックスを設定する。
しかし、タイル型設定は今回のような不具合を
起こすことが確認されているので「縦型カード」を選択するのがオススメ。

 

設定に注意すれば、
今回のような件は避けられると思います。

しかし、根本的な原因はわからないので
どういうことなのかはわかっていません。

 

 

今回の問題解決の記録を残すことで
お役に立てれば幸いです。

 

また、何か問題が出てきて解決したことがあれば
記事にしていきます。

 

 

 

では、また次回の記事で!

お時間ありましたら他の記事も読んでみてくださいね。

 

コメント

タイトルとURLをコピーしました