「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

文字のレイアウトが崩壊して理由が分から...
 
共有:
通知
すべてクリア

[解決済] 文字のレイアウトが崩壊して理由が分からず修正できない

14 投稿
3 ユーザー
9 Reactions
340 表示
(@kayo_ruhe)
Eminent Member Registered
結合: 2年前
投稿: 25
Topic starter  

不具合・カスタマイズ対象ページのURL:  https://kayo-ruhe.com/2023%e5%b9%b44%e6%9c%88-%e6%9d%b1%e4%ba%ac%e5%af%be%e9%9d%a2%e9%91%91%e5%ae%9a%e3%81%8a%e7%94%b3%e3%81%97%e8%be%bc%e3%81%bf%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0

 

相談内容:目次の四角の幅を記事の文字が乗るスペース(白いところ)の半分くらいにしたい。もしくは自動的に文字量に合わせて幅を狭めるようにしたい。同時に目次の箇条書き項目頭にマークを出していたのに消えていたり、枠線が反映されていなかったり、一気に色々崩壊してしまっています。

 

不具合の発生手順: 別の問題を解決すべくCSSを触っていたら、目次全般の設定がこうなってしまったような気がします。

 

解決のために試したこと: CSSを一つずつ見直してみましたが原因分からず。もしかすると

外観 → カスタマイズ → 追加CSS に書かれている内容とぶつかったりしているのでしょうか?当方全く無知なもので、サイトの部分ごとにカスタマイズしたい時は、ネットで拾ったCSSをどんどん(分かっていないまま)追加していっているので、内容が矛盾していたり重なっているようなところがあるかも知れません。

 

文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。OK

高速化設定をしている場合は無効にしてください。OK

環境情報:Cocoon環境に関する情報です。 の欄。

----------------------------------------------

サイト名:算命学を使った人生戦略作戦会議

サイトURL https://kayo-ruhe.com

ホームURL https://kayo-ruhe.com

コンテンツURL/wp-content

インクルードURL/wp-includes/

テンプレートURL/wp-content/themes/cocoon-master

スタイルシートURL/wp-content/themes/cocoon-child-master

親テーマスタイル:/wp-content/themes/cocoon-master/style.css

子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css

WordPressバージョン:6.1.1

PHPバージョン:7.4.33

ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

サーバーソフト:Apache

サーバープロトコル:HTTP/1.1

言語:de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7,ja;q=0.6

----------------------------------------------

テーマ名:Cocoon

バージョン:2.5.6.2

カテゴリー数:20

タグ数:0

ユーザー数:1

----------------------------------------------

子テーマ名:Cocoon Child

バージョン:1.0.8

style.cssサイズ:8603バイト

functions.phpサイズ:203バイト

----------------------------------------------

Gutenberg0

AMP1

PWA0

Font Awesome5

Auto Post Thumbnail1

Retina1

ホームイメージ:/wp-content/uploads/2020/03/Top画像表題入りPNG1.jpg

----------------------------------------------

ブラウザキャッシュ有効化:1

HTML縮小化:0

CSS縮小化:0

JavaScript縮小化:0

Lazy Load1

----------------------------------------------

利用中のプラグイン:

Ad Invalid Click Protector 1.2.7

Akismet Anti-Spam 5.0.2

BackWPup 4.0.0

Booking Package SAASPROJECT 1.5.77

Category Order and Taxonomy Terms Order 1.7.4

Contact Form 7 5.7.3

Converter for Media 5.7.1

Google XML Sitemaps 4.1.7

Jetpack 11.8.3

Regenerate Thumbnails 3.1.5

WordPress Ping Optimizer 2.35.1.3.0

WP ULike 4.6.5

----------------------------------------------

 

 

不具合報告の際には以下の情報を添えてもらうと助かります。 の欄。

----------------------------------------------

サイト名:算命学を使った人生戦略作戦会議

サイトURL https://kayo-ruhe.com

ホームURL https://kayo-ruhe.com

コンテンツURL/wp-content

インクルードURL/wp-includes/

テンプレートURL/wp-content/themes/cocoon-master

スタイルシートURL/wp-content/themes/cocoon-child-master

親テーマスタイル:/wp-content/themes/cocoon-master/style.css

子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css

WordPressバージョン:6.1.1

PHPバージョン:7.4.33

ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

サーバーソフト:Apache

サーバープロトコル:HTTP/1.1

言語:de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7,ja;q=0.6

----------------------------------------------

テーマ名:Cocoon

バージョン:2.5.6.2

カテゴリー数:20

タグ数:0

ユーザー数:1

----------------------------------------------

子テーマ名:Cocoon Child

バージョン:1.0.8

style.cssサイズ:8603バイト

functions.phpサイズ:203バイト

----------------------------------------------

Gutenberg0

AMP1

PWA0

Font Awesome5

Auto Post Thumbnail1

Retina1

ホームイメージ:/wp-content/uploads/2020/03/Top画像表題入りPNG1.jpg

----------------------------------------------

ブラウザキャッシュ有効化:1

HTML縮小化:0

CSS縮小化:0

JavaScript縮小化:0

Lazy Load1

----------------------------------------------

利用中のプラグイン:

Ad Invalid Click Protector 1.2.7

Akismet Anti-Spam 5.0.2

BackWPup 4.0.0

Booking Package SAASPROJECT 1.5.77

Category Order and Taxonomy Terms Order 1.7.4

Contact Form 7 5.7.3

Converter for Media 5.7.1

Google XML Sitemaps 4.1.7

Jetpack 11.8.3

Regenerate Thumbnails 3.1.5

WordPress Ping Optimizer 2.35.1.3.0

WP ULike 4.6.5

----------------------------------------------


   
トピックタグ
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7301
 

kayo_ruheさん

投稿者:: @kayo_ruhe

目次の四角の幅を記事の文字が乗るスペース(白いところ)の半分くらいにしたい。もしくは自動的に文字量に合わせて幅を狭めるようにしたい。同時に目次の箇条書き項目頭にマークを出していたのに消えていたり、枠線が反映されていなかったり、一気に色々崩壊してしまっています。

ちょっとたくさんあって分からない部分もあります。

とりあえず、以下の部分。

/* 目次全体デザイン */
.toc{
 background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
 display:block; 
 width 50%;
 border-top:5px solid; color:#FFC679;
 padding: 20px 15px;
 margin-bottom: 50px;
}

上記の「display:block;」を削除してみてはどうでしょうか。

「width 50%;」はエラーになっていますし、「margin-bottom: 50px;」も効いていませんので、削除した方が良いと思われます。

上記対応で、以下のようにはなると思います。

 
 
すみませんが、そろそろ私はタイムアウトです。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7301
 

リストマーカーに関しては、以下のようにお書きになっていて、ご自分で消去なさっています。

.toc-content ol li {
 line-height: 1.5;
 padding: 0.5em 0 0.5em 1.4em;
 border-bottom: dashed 1px silver;
 list-style-type: none!important;
}

「list-style-type: none!important;」の部分です。

 

例えば「list-style-type」で検索いただくと、仕様詳細の書かれたサイトはいくつか見つかると思います。

細かい仕様であれば以下。
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

分かり易くまとめてくださっている解説サイトであれば、以下。

【CSS】list-style-typeの使い方:箇条書きのマーカー種類を変える
https://saruwakakun.com/html-css/reference/list-style-type

上記はいずれも「list-style-type」で検索して、ヒットしたサイトです。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7301
 

目次のカスタマイズ、以下のようにお書きなっていますが、無効な部分もあるように思います。

/************************************
/* 目次のカスタマイズ
/************************************
/* 目次全体デザイン */
.toc{
 background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
 display:block; 
 width 50%;
 border-top:5px solid; color:#FFC679;
 padding: 20px 15px;
 margin-bottom: 50px;
}

/* 目次の文字指定 */
.toc-title {
 text-align:left;
 margin: 0 90px 20px -10px;
 padding-left: -20px;
 font-size: 21px;
 font-weight: 600;
 color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}


/* 目次のアイコン設定 */
.toc-title:before {
 top: 0;
 left: -45px;
 width: 20px;
 height: 20px;
 font-family: "Font Awesome 5 Free";
 content : "\f03a"; /* アイコンを変える場合はここを変更 */
 font-size:20px;
 margin-right:20px;  /* 円の大きさはここで調節 */
 padding:9px;
 color:#FFF; /* アイコンの色を変える場合はここを変更 */
 background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
 border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

/* 目次のデザインカスタマイズ */
.toc-content ol {
 padding: 0 0.5em;
 position: relative;
}
.toc-content ol li {
 line-height: 1.5;
 padding: 0.5em 0 0.5em 1.4em;
 border-bottom: dashed 1px silver;
 list-style-type: none!important;
}

 

これらの目次の部分のカスタマイズを一度全部削除なさって、1つ1つがどういう意味があるのか、ご確認いただきながら、再度カスタマイズをなさった方が良いのかもしれないです。

すみません、それではタイムアウトのため、フォーラムからは離れます。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2474
 

子テーマCSSに他にも文法エラーがあります。
★border-style:solid;で実線にし、border-width:1px;で線幅を定義したかった?

#commentform #submit{
font-size:15px; /*送信ボタン文字の大きさ*/
background-color: #fff; /* 送信ボタンの背景色 */
color: #4f463c; /*送信ボタンの文字色*/
border-radius: 5px; /*送信ボタンの角の丸さ*/
height: 50px; /*送信ボタンの縦幅*/
border-style: solid; 1px;★
margin-top:15px; /*送信ボタンとコメント欄の隙間(縦幅)*/
}

   
わいひら reacted
(@kayo_ruhe)
Eminent Member Registered
結合: 2年前
投稿: 25
Topic starter  

@mk2_mk2 さま

ありがとうございます。列挙して下さった3点を削除してみたところ、仰る通りの形になりました!

 


   
(@kayo_ruhe)
Eminent Member Registered
結合: 2年前
投稿: 25
Topic starter  

@mk2_mk2 さま

自分で書いて自分で消しているのですね!?おお、なんと・・・(全然分からん)

分からないのでこういうカスタマイズは色々なサイトの『これをコピペするだけでこれが再現できるよ!』みたいなのをコピペしているだけなので、用語というか意味が全然分かっていませんでした(現在進行形)。

カスタマイズを一度全部削除なさって、1つ1つがどういう意味があるのか、ご確認いただきながら、再度カスタマイズをなさった方が良いのかもしれないです。

おお、やはりそこですか、そこなのか・・・

沢山お時間を頂きまして本当にありがとうございます。


   
(@kayo_ruhe)
Eminent Member Registered
結合: 2年前
投稿: 25
Topic starter  

@chu-ya さま

これは多分コメント欄の話ですよね?コメント欄も以前カスタマイズに挑戦したのですが全く『こう変えたい』が実現できず諦めてすっかり放置していたところです。デザイン変やけどまあ動くしいいか・・・的に。

これは挙げて頂いた『以下のエラーが見つかりました』のところを削除すべきなのでしょうか?削除するとまた関係ないところが崩れたりするのでしょうか?


   
(@kayo_ruhe)
Eminent Member Registered
結合: 2年前
投稿: 25
Topic starter  

@chu-ya さま

★border-style:solid;で実線にし、border-width:1px;で線幅を定義したかった?

だと思います!つまり

border-style: solid; 1px;★

border-style:solid; 

border-width:1px;

と縦に並べて書き込むと正しい書き方になるということでしょうか。

いずれにせよご助言ありがとうございます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7301
 

kayo_ruheさん

すみませんが、時間がありません。

投稿者:: @kayo_ruhe

自分で書いて自分で消しているのですね!?おお、なんと・・・(全然分からん)

はい、先に書いた通りです。(以下のことです)

投稿者:: @mk2_mk2

リストマーカーに関しては、以下のようにお書きになっていて、ご自分で消去なさっています。

.toc-content ol li {
 line-height: 1.5;
 padding: 0.5em 0 0.5em 1.4em;
 border-bottom: dashed 1px silver;
 list-style-type: none!important;
}

「list-style-type: none!important;」の部分です。

先にリンクした解説サイトをご参考にするとお分かりいただけると思います。

投稿者:: @mk2_mk2

【CSS】list-style-typeの使い方:箇条書きのマーカー種類を変える
https://saruwakakun.com/html-css/reference/list-style-type

上記の「1. 箇条書きのマーカーや数字を消す」をご覧いただくと解説されています。

番号やマーカーを消したいときはlist-style-type: noneを指定します。これはolでもulでも同じです。

「list-style-type: none!important;」を指定して消しているので、これを消せば復活するということなのですが・・・。

とはいえ、ここまではすでに昨日書いたりリンクしたことです。
それを丁寧に1つ1つご覧いただくしかないのですけれど。

 

投稿者:: @kayo_ruhe

分からないのでこういうカスタマイズは色々なサイトの『これをコピペするだけでこれが再現できるよ!』みたいなのをコピペしているだけなので、

はい、ですので、本来必要なさそうなもの、意味のないものなども、どんどん貼り付けなさっているかと思います。

そのため、エラーになったり、エラーにはなっていないけれど、不整合になっていたり、何の効果のないものをお書きになっていたり。
かなりごちゃごちゃしていて、これを整理するだけで、手間がかかるかと思います。

そうであれば、いったん全部消去して、具体的にここをこうしたいとお問い合わせいただいた方が手っ取り早いのかなという気はします。
まずは、ご自分で1つ1つ試してみると良さそうには思いますけれど。
(お問い合わせいただく際は、曖昧に仰られても対応は難しいですので、具体的に図などで伝わるようなご指示が必要かとは思います)

「崩壊している」では、ではどうすれば良いのかいうところは伝わらないかと思います。
(ご本人の主観的には「崩壊している」のだと思いますが、第三者が客観的に見て、どこが崩壊しているのかは分からないです)

私は察しが悪いもので、申し訳ないです。
察しの良い方をお待ちいただくのが良いのかもしれないです。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2474
 

投稿者:: @kayo_ruhe

削除するとまた関係ないところが崩れたりするのでしょうか?


「文字のレイアウトが崩壊して理由が分からず修正できない」ではなく、この書き込みを見て、そもそもCSSを理解していないように思えます。
それでは修正でません。
それに、CSSの技術以前に、人に物事を伝える文章力・技術が足りておらず、何をしたいのか第三者には伝わりません。
mk2さんが書かれていますが、ご自分でコピペしたCSSを削除して下さい。


   
わいひら reacted
(@kayo_ruhe)
Eminent Member Registered
結合: 2年前
投稿: 25
Topic starter  

@mk2_mk2 さま

「list-style-type: none!important;」を指定して消しているので、これを消せば復活するということなのですが・・・。

なるほどと思い今やってみましたところ、直りました!たったこれだけで直るとは・・・パッとご覧になってすぐお分かりになるのが凄いです。

大変助かりました、お時間も頂き丁寧に説明して頂きましてどうもありがとうございます!


   
わいひら reacted
(@kayo_ruhe)
Eminent Member Registered
結合: 2年前
投稿: 25
Topic starter  

@chu-ya さま

そうです、CSSは外国語のように全く理解しておりません。

なので該当部分を削除すると今ある形から全然別の個所(例えばサイドバーとかコメント欄とか)まで影響が出て崩れたりするのかしら?と思っていました。

しかし当初の目的の目次レイアウト修正が出来ましたので感謝です!どうもありがとうございました。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7301
 

kayo_ruheさん

ひとつだけ。

投稿者:: @kayo_ruhe

これは挙げて頂いた『以下のエラーが見つかりました』のところを削除すべきなのでしょうか?削除するとまた関係ないところが崩れたりするのでしょうか?

投稿者:: @kayo_ruhe

なので該当部分を削除すると今ある形から全然別の個所(例えばサイドバーとかコメント欄とか)まで影響が出て崩れたりするのかしら?と思っていました。

エラーを解消したから「崩壊」した訳ではないということはご理解ください。
(結果的にそう見えるのでしょうけれど)

そもそも、kayo_ruheさんが「崩壊」するようなCSSを、ご自身でお書きになっているということです。
(そういう状態でも、今回はエラーのおかげで、たまたま反映されていなかったということかと)

エラーは解消すべきです。
(文法的に誤っているのですから)


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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