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カスタマイズ依頼

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

目次の枠を縮小して目次全体を中央に置き...
 
共有:
通知
すべてクリア

目次の枠を縮小して目次全体を中央に置きたい

21 投稿
4 ユーザー
16 Reactions
4,549 表示
 toto
(@toto)
New Member Registered
結合: 4年前
投稿: 2
Topic starter  

目次の設定について質問です

枠を縮小して目次全体を中央に置きたいのですが、

 

サイト https://totobahamas.com/life/

目次の枠が大き過ぎ、

全体的に左に寄りすぎ

見た目のバランスが悪い

 


   
引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

んー、正解かどうかわからないですが・・

#toc, .toc {
margin: 0 auto;
width: 60%;
}

@media screen and (max-width:480px) {
#toc, .toc {
width: 80%;
}
}

こんなCSSじゃ、いかかでしょうか?


   
返信引用
 toto
(@toto)
New Member Registered
結合: 4年前
投稿: 2
Topic starter  

ありがとうございます サイト https://totobahamas.com/life/

解決しました...がCSSを貼り付けないとCocoonの目次機能の

デフォルトだとこのような問題が普通起こるのでしょうかね???

 

また、文字を少し右よりに微調整する方法も教えていただけるでしょうか?

ちなみに添付画像どうり目次設定は中央寄せにチェックを入れていますが、、

よろしくお願いします。

 

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

Cocoonの高速化設定を有効にしていると、詳しいことが、わからないのですが、おそらく、ご利用のスキンのCSSでデザインを指定してあるのではないかと思います。

文字左側を空けるのは以下で可能かと思います。

数値は適宜調整ください。

#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}

   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@toto さん

目次は本文中で「h2」を見出しタグを使うと、自動的にに作成されるのですが、さらに、「h2」の章の中に「h3」という小見出しを作る場合もあろうかと思います。

また、さらに「h3」の章の中に「h4」の小々見出しを設定することもできます。

そうすると、目次では、章の階層構造がわかりやすく、インデントされて表示されるかと思われます。

「h2」しか見出しは使わない、というのであれば、「h2」だけを考えれば良いのですが、今後「h3」や「h4」も使うかもしれない、というのであれば、それも含めて見栄えをテストした方がいいのかもしれません。

あ、いけない、画像を拝見しますと、「h3」までに設定されているようですね。


   
わいひら reacted
返信引用
 too
(@too)
Active Member
結合: 4年前
投稿: 18
 

@leafytreeさん

ご丁寧なアドバイス本当に感謝しています。

サイトを立ち上げたばかりの初心者なので6日間かかってできななかった事が解決できました。

数値を30%に変更して使用させていただきます。見出しの使い方についても、今後ご意見参考にさせていただきます

他のユーザーの方はデフォルトで利用されているようなので、なぜこうなるのか?気になる所ですが...


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@too さん

なぜこうなるのか、につきましては、フォーラムご利用の案内の冒頭にありますとおり、高速化設定をOFFにして、環境情報を添えていただきますと、理由が判明する場合が多いです。

高速化設定がONの状態で、かつ、環境情報もわかりませんと、外部からは、調べる手立てがない状態です。

これは、推測ですが、tooさんが、当初使われていたであろう、スキンを、私のローカル環境のテストサイトで、適用してみました。

https://notepad.pw/share/u72dn1byd

すると、やはり、横幅いっぱいに目次が表示されたので、おそらくは、スキンの作者様のデザインだろうという推測になります。

 

 
スキンを変えたり、スキンの適用を外してみたりすれば、わかりやすいかもしれません。

ちなみに、スキンは、外部の有志の方が無償でご提供くださっているものも多いです。

   
わいひら reacted
返信引用
 too
(@too)
Active Member
結合: 4年前
投稿: 18
 

@leafytreeさん

ご返信ありがとうございます

お忙し中いろいろとアドバイス本当に感謝です

一応、ご指定の高速化設定をオフにした、環境情報を添付いたします。

 

 

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@too さん

私の説明が下手で、わかりにくかったため、もう少し説明を加えますと、このフォーラムで質問が解決するまでは、Cocoonの高速化設定をOFFにしままにしておいてください、という意味です。

そうしませんと、外部の者がtooさんのサイトのソースコードをチェックすることができないためです。

また、環境情報については、下の方が画像に写っていないので、半分ぐらいしか情報が読めません。

画像ではなく、フォーラムの入力欄に直接貼り付けていただいてもかまいません。

 

今回の目次が幅いっぱいになる、というのは、Cocoon設定で選択されたスキン(veilnui-simplog-bule)の仕様です。

Cocoon設定は、多機能なので、スキンを使わなくても、全体のカラーを統一させることもできるようですし、別のスキンを試してみるのも良いですし、このまま使われるのも良いと思います。

ただ、目次で、左側の空きを30%にされているようですが、スマホですと、右に寄りすぎてしまいます。

以下のCSSを一番下に追記いただくと、スマホでは左側10%の空きになります。

@media screen and (max-width:480px) {
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

話は、変わりまして、高速化設定がOFFになっていないため、良くわからないのですが、tooさんは、子テーマをお使いになっていらっしゃいますか?

WordPressの場合は、親テーマはどんどんアップデートしていくので、子テーマの使用は必須です。


   
わいひら reacted
返信引用
 too
(@too)
Active Member
結合: 4年前
投稿: 18
 

ご返信ありがとうございます。

Cocoonの高速化設定をOFFの状態で設定しました

親テーマと子テーマともインストール後子テーマを有効化して使っています。

以下、ご確認おねがいします

 

サイト名:バハマの歩き方
サイトURL: https://totobahamas.com
ホームURL: https://totobahamas.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/veilnui-simplog-blue/style.css
WordPressバージョン:5.4
PHPバージョン:7.3.14
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:en-US,en;q=0.5
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.4.1
カテゴリ数:10
タグ数:1
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.1
style.cssサイズ:719バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:0
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.4
Contact Form 7 5.1.7
TinyMCE Advanced 5.4.0
WP Multibyte Patch 2.8.4
----------------------------------------------


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@too さん

カスタマイズするCSSのコードを書く場所なのですが、投稿ページにあるカスタムCSSの欄ですと、そのページだけしか適用されません。

WordPressのダッシュボードで「外観」→「テーマエディター」とたどると、「テーマの編集ページ」が開きます。

そこに以下のような記載がありますので、

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}

以下のコードを書き込みますと、

#toc, .toc {
margin: 0 auto;
width: 60%;
}

#toc .toc-content, .toc .toc-content {
padding-left: 30%;
}

@media screen and (max-width:480px) {
#toc, .toc {
width: 80%;
}
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

以下のようになります。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

*目次のデザインを修正*/
#toc, .toc {
margin: 0 auto;
width: 60%;
}

#toc .toc-content, .toc .toc-content {
padding-left: 30%;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

/*目次のデザインを修正*/
#toc, .toc {
width: 80%;
}
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

書き込みが終わった、「ファイルの更新」のボタンをクリックします。

ボタンをクリックしたとき、エラーが出なければ、たぶん成功しているかと思います。

投稿ページのカスタムCSSに追記したコードは削除してください。

わかりにくかったら、

以下のコードを一番下にコピペでも、イケるかと思います。

/*目次のデザインを修正*/
#toc, .toc {
margin: 0 auto;
width: 60%;
}

#toc .toc-content, .toc .toc-content {
padding-left: 30%;
}

@media screen and (max-width:480px) {
#toc, .toc {
width: 80%;
}
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

 

 


   
わいひら reacted
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
#toc .toc-content, .toc .toc-content {
	padding-left: 0;
}
#toc, .toc {
	width: auto;
}

これでいい気もします

https://gyazo.com/6db96aeb055ad93fec0edeae519daedb

 

お試しください❦


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

あら、かうたっくさん

ありがとうございます。 ? 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@too さん

かうたっくさんのコードの場合は、目次は左寄せになるみたいです。

その場合でも、

#toc .toc-content, .toc .toc-content {
padding-left: 0;
}

では、左側の目次の枠線と文字が近づきすぎてしまうので、これは、要らないみたいです。

かうたっくさんの案を採用される場合は、

#toc, .toc {
width: auto;
}

これだけの方がいいかもしれません。

 

 

 
左寄せでも、全然おかしくは、ないですね。
 
実は、私のサイトも左寄せだったりします。

   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

中央配置にする方法もあるみたい・・

#toc, .toc {
margin: 0 auto;
width: auto;
display: table;
}

これは、私も知らなかった。

以下、参考にしたベージ。

可変幅の要素を中央寄せするCSS

 

かうたっくさん、

さては、知ってて、書かなかった?

ヤですねぇ・・


   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

PC表示

 

 
 
スマホ表示
 
 
 
 
これの方がいいかな?

   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

スマホ表示の画像間違えてました。

width:80%;取るの忘れてました。

本当はこっち。

 


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
投稿者:: @leafytree

かうたっくさん、

さては、知ってて、書かなかった?

もうなってるんで、あえてかいてませんでした ? 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

あら~ッ!デベロッパーツールの下の方、見落としてましたぁ~ ? 

#toc, .toc {
margin: 0 auto;
width: auto;
}

これだけで、よさそうですね。

いつもながら、参りました。 ? 


   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@too さん

#toc, .toc {
margin: 0 auto;
width: auto;
}

私の無知から、案内が長くなってしまいましたが、上記のコードを「テーマの編集ページ」の下記の画像の位置にコピペしてみてください。

 

 

それと、セキュリティ対策のプラグインをインストールされていないようですので、入れておいた方がいいと思いました。

私は、SiteGuard WP Plugin を使っています。日本語なので、わかりやすいです。

セキュリティ対策のプラグインについては、ググれば、情報は見つかると思います。


   
わいひら reacted
返信引用
 too
(@too)
Active Member
結合: 4年前
投稿: 18
 

@leafytreeさん、かうたっくさん

ご丁寧にいろいろありがとうございました。

本当に感謝です、

改めて結果を報告します。

取り急ぎ連絡まで


   
返信引用
共有:

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

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

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

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

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

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

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

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