こんにちは、カヨです。
ワードプレスでブログを立ち上げて5ヶ月
その中で様々な問題が起きています。
《今回の問題はこんな不具合です》
▼▼▼
初心者ブロガー：
「わ！なにこれ携帯で見たときだけこんな風に表示されるんだけど！？」
カテゴリーページの記事画像が重なってしまう
という不具合バグが起きてるらしいです。
今回はこの画像の現象の解決方法を分かりやすくご紹介！
初心者目線で詳しく解決していきます。
✔︎先日こんなツイートをしました
問題：モバイル表示時トップ、カテゴリページ記事重なり
解決：cocoon設定 ≫インデックス≫カードタイプ／タイル2列→縦型2列
残疑問：デフォ（✔︎デフォ＋スマホ〜）ではバグ無しだった。✔︎タイル2列＋スマホ〜は文字部重なり。不納得。
参考：https://t.co/yPDuQdpw0l#まつげブログQA pic.twitter.com/nvecjwZgdd— まつげ きりん (@matuge_kirin) March 22, 2020
解決メモです。
このようになるべく簡潔にツイッターで発信もしていますので
よければフォローもお待ちしています。
ブログ表記をかっこよくしたくて
パソコン表示ばかりに気を取られていて
様々な設定を触り、
最後にモバイル表示を確認した所
画像のように記事一覧がおかしなことになっていました。
「表示の際に記事同士が重なってしまう」時の解決方法の解説です。
早速説明していきますのでお付き合いください。
スマホ・モバイル表示で記事が重なるのを解消する方法
1.ダッシュボード→cocoon設定をクリック
今回はテーマcocoonを使用しています。
ダッシュボードを開き、
左端のメニューからcocoon設定をクリック。
2.インデックスをクリック
cocoon設定をクリックし、
次のページへ移動すると「スキン」が元々選択されています。
なので、「インデックス」をクリックして切り替えます。
3.下にスクロール→カードタイプの項目を「縦型カード2列」に設定
「インデックス」に切り替え後
少し下に画面をスクロール。
カードタイプの項目の中の「縦型カード２列」を選択。
※もしデフォルト（初期設定）に戻したい方は「エントリーカード（デフォルト）」を選択。
4.さらに下へスクロール→「設定をまとめて保存」
カードタイプの選択が終わったら
さらに画面を下にスクロール。
一番下の「変更をまとめて保存」をクリック。
5.作業完了！
記事の画像が重なる現象が直っているか
モバイル、スマホ表示から確認してみてください。
作業は以上です。
次にどの行動から今回の事柄が起こったのか考えてみよう。
これを知ることでより、
ワードプレスをより深く知ることができる。
原因になる行動
①②が原因ではないかと考える。
①タイルカード2列 または カードタイプ3列に設定
特に①が原因でタイルカードという設定が
問題を起こさせるのではないかと筆者は考える。
②「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」に✔︎を入れた
②は関係ないかもしれない。
✔︎を入れない場合、縦型&タイル型設定したもとの設定（デフォルト）は２列表示のようだ。
では、次に何をしようとして
問題が起きたのかを考えてみよう。
筆者がそのようになった経緯
2.cocoonの記事整列画面をカスタムしたかった
何かをする前はデフォルトでこうなってたはず。
問題は変更したからですよね。
（以下の画像はデフォルト、元の状態）
▼パソコン表示▼
▼モバイル、スマホ表示▼
今回の記事にたどり着き、
重なる不具合に困った人の中で
同じことを目的に行動した人いると思うので
記事一覧のカスタム方法も簡単にご紹介します。
✔︎本当にやりたかった設定
・モバイルとパソコン表示を別にしたかった
これらのためにcocoon設定の
インデックスの設定を自分で変更。
そうした経緯でこの記事にたどり着いた方は
この記事で解決したでしょうか。
この問題の過程で学べたこと
この問題の原因の「記事一覧の表示をかえてみたい！」ですが
解決と同時にやりたかったことも学べました。
①パソコン表示での記事の並びを2列や3列に変更すること
②モバイル表示で記事を1列や2列に変更すること
①パソコン表示での記事の並びを2列や3列に変更すること
①にするには、今回の問題解決方法を実践すると
自然となっていると思います。
変更方法は以下です。
▼▼▼
【スマホ・モバイル表示で記事が重なるのを解消する方法】の中の項目【3.下にスクロール→カードタイプの項目を「縦型カード2列」に設定】の設定を参考にして設定を変えてみてください。
②モバイル表示で記事を1列や2列に変更すること
②を設定するには、
今回の問題解決方法を実践すると
モバイル表示では1列になっていると思います。
▼▼▼
①を参考にカードタイプの項目までページを移動して
「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」
この四角の中に✔︎を入れたり外したりして好みに設定してみてください。
まとめ
cocoon設定のインデックス設定の中の
カードタイプを変えたことによって起こった問題
- もとに戻したい方はデフォルト（下のチェック項目）に戻すのがいい。
- 記事一覧の画面を画像のように2列変更するには以下の方法がいい。
▼▼▼
cocoon設定からインデックスを設定する。
しかし、タイル型設定は今回のような不具合を
起こすことが確認されているので「縦型カード」を選択するのがオススメ。
設定に注意すれば、
今回のような件は避けられると思います。
しかし、根本的な原因はわからないので
どういうことなのかはわかっていません。
今回の問題解決の記録を残すことで
お役に立てれば幸いです。
また、何か問題が出てきて解決したことがあれば
記事にしていきます。
では、また次回の記事で！
お時間ありましたら他の記事も読んでみてくださいね。
