" />

cocoon 米軍基地

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

皆さんこんにちは!

ブログを始めて約5ヶ月

 

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

 

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

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

 

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

 

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

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

では、スタート

 

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

サイト型のトップページが作れるようになったのが
2020年5月からです。
(cocoon限定で作れるのでご注意を)

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

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

・タブの切り替えが可能
・カテゴリーごと表示されるのでより見やすくわかりやすい
・管理がしやすい

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

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

フロントページタイプ

・一覧(デフォルト)
・タブ一覧

・カテゴリごと
・カテゴリごと(2カラム)
・カテゴリごと(3カラム)
※サイドバーを表示しないレイアウト向け。表示数は3の倍数推奨。

 

カードタイプ

・エントリーカード(デフォルト)
・大きなカード(先頭のみ)
・大きなカード 
・縦型カード2列 
・縦型カード3列 
・タイルカード2列
・タイルカード3列

どこから設定できる?

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


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

以上です!

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

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

 

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

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

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

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

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

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

     

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

困った時には知恵袋!

ということで

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

結果全くヒットしない 泣

 

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

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

原因の調べ方 

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

いじっていたら見つかったので本当に正しいかどうかはわかりません。
なので、参考にする際は間違えても大丈夫なように
バックアップを取ることをおすすめします。

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

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

  

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

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

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

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

    

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

・要素詳細でいろんなCSSが表示されるから
どこの場所のCSSかを確認するのに時間がかかった
・下手に変更できないからメモに一旦変更前のCSSをバックアップを取っ      て確認しながら何が変更されたのか確認するのがかなり面倒
・仮に変更した後でも他も変わってしまっているんのではないかと不安で
プレビューを何回も確認して操作するのが手間

CSSの作成方法

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

テーマエディターのスタイルシートでも大丈夫かと思いますが
私の場合、反映されなかったため、このような方法になりました

コピペCSS

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

コピペCSS
.list-title-in {
position: relative;
display: inline;
padding: 0 75px;
}

 

(文字の大きさはお好きなサイズに調整お願いします!)

まとめ

原因の見つけ方
1.トップページや記事でも文字ずれはその文字をドラッグ!
2.右クリックから要素の詳細を表示を選択
対処法
ドラックしたCSSが表示されるのでそこで試しサイズ調整をする
サイズ数が決まったら変更したCSSをコピー
あとはカスタマイズの追加CSSにペースト

 

今回は文字(新着記事)の段ズレ修正方法を紹介しました!

 

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

 

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

 

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

 

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

  • この記事を書いた人

cosmo

軍雇用員×農家 米軍基地で働く方法や英会話の学習方法 野菜•果物の育て方などの情報を発信してます。 オーガニック野菜•果物を無人販売で提供中! ※基本的、不定期でやっております。ごめんなさい

-cocoon, 米軍基地