【Cocoon】これで解決！　文字段ズレの直すCSSと対処法の見つけ方

皆さんこんにちは！

ブログを始めて約５ヶ月

マイペースに更新し続けて記事も増えてきたこともあり
トップページを綺麗にしようとネットで
いろんなカスタマイズを調べてみました。

その中に
【衝撃】Cocoonトップページがボタン1つでサイト型にできるようになった（参考ブログ　峠の雑記ブログさん）

の記事を見つけ、変更しました。

しかし、ここで大きな問題が発生！

今回はその問題を解決するために１週間も
費やし見つけた対処法と原因の見つけ方を紹介します！

Rinkerの外部リンクアイコンの削除に困っている方はこちらをチェック！

では、スタート

cocoonのトップページサイト型とは？

サイト型のトップページが作れるようになったのが
２０２０年５月からです。（cocoon限定で作れるのでご注意を）

今までは固定ページを使い1つ1つ設定して
作っていましたがこの機能のおかげで
大分サイトがスッキリしました

◊サイト型のGoodポイント◊

どんな種類のサイト型がある？

サイト型のページタイプは
フロントページタイプとカードタイプがあります。

フロントページタイプ

カードタイプ

どこから設定できる？

まずwordpressのcocoon設定を開き
cocoon設定のインデックスを選択

インデックスのフロントページタイプとカードタイプから好みの形式を選択

以上です！

より詳しく書いてくれている記事があります

詳しくはこちらをチェック→【衝撃】Cocoonトップページがボタン1つでサイト型にできるようになった（参考ブログ　峠の雑記ブログさん）

新着記事の段ずれとは一体どういう現象？

設定を保存し、サイトを確認したらこんな現象が起きていました。

新着記事以外、カテゴリー表示はしっかりしているのに
なぜ肝心の新着記事が変になっているのかと不思議でした。

色々なカスタマイズCSSを更新してみたが反映されない

はじめはすぐに修正できると思い
いろんなキーワードで調べ
たくさんのCSSを消して貼り付け。消して貼り付けを繰り返しました

しかし、全く反映されず全然ピンポイントの対処法が見つかりませんでした。

Yahoo知恵袋やcocoo公式サイトの問い合わせでもヒットしない　　

困った時には知恵袋！

ということで

私と同じ悩みを持っている人はいないか
徹底的に調べた

結果全くヒットしない　泣

「cocoon サイト型　段ずれ」
「ブログ　新着記事のサイズ調整」など

引っかかりそうなキーワードで試しましたが
これといった改善策が見つからなかったです。

原因の調べ方　

ネットで解決策が見つからず
色々とcocoonをいじったら下記の方法を見つけました。

まずwordpressからサイト表示を選択

新着記事をドラッグして右クリック
そして要素の詳細表示を選択

画像２の下にある要素からどこに原因があるか確認できます

右にあるスタイルから色々と変更や調整ができますが

注意点：ここでの変更は反映せれません。あくまで開いているページ内だけ映され、変更されているか確認できるだけです。を入力してください。

良い視点で言えば変更を間違えても
反映されないから色々と
いじり放題ってことですね笑
しかし、良いことだけではないのが、現状です　泣

こんなところが大変だった　

CSSの作成方法

1. 要素詳細では変更できないから一旦CSSを開いてコピーする
2. 原因の調べ方で説明したスタイルからCSSコピーします
   （Style.cssを開いても変更できます）
3. 　実際にCssをスタイルシートに貼って変更してプレビューで確認
4. 　コピーしたCSSカスタマイズの追加CSSにペースト

コピペCSS

こちらが変更したCSSです！これで新着記事の段ズレが直ります。

（文字の大きさはお好きなサイズに調整お願いします！）

まとめ

今回は文字（新着記事）の段ズレ修正方法を紹介しました！

この方法を覚えておけば
文字ずれ、カスタマイズCSSが反映されていないなどの
問題の原因を見つける事ができ、対処法も見つける事ができます。

もちろんネットで調べたり、コメントなどで問い合わせて
対処できるのが一番時間がかからずベストですが

もし、対処法が見つからない時には
ぜひ参考に試してみてください！

最後まで読んでいただきありがとうございました！