サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年3月25日 16:22
今回は目次についてお聞きしたいことがあり、トピックをたてさせていただきました。
現在、様々な人の目次cssを参考にさせてアレンジし、
/*目次*/
.toc {
border: 1px solid #c0c0c0;
font-size: 0.92em;
line-height: 1.5;
padding: 0;
margin-bottom: 1em;
display: table;
margin-left: auto;
margin-right: auto;
}
.toc-title {
background:white ; /*目次タイトルの背景色#f5f5f5*/
color: #000000; /*目次タイトルの文字色*/
font-size: 1.1em;
text-align: center;
padding: 8px 16px 0px;
}
.toc-title::before {
font-family: FontAwesome;
content: '\f0ca'; /*目次タイトルのアイコン*/
margin-right: 0.5em;
}
.toc-content {
padding: 8px;
}
toc ul li a, .toc ol li a {
display: block;
border-bottom: 1px dashed #666; /*h3以下の下側ボーダー*/
margin-left: -20px;
padding-left: 20px;
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
margin-top: 1em;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
border-bottom: 1px solid #666; /*h2の下側ボーダー*/
font-weight: normal;
color:#000000
}
/*目次、黒丸の指定*/
.toc ul li, .toc ol li { /*h3以下の指定*/
list-style-type: none; /*discは黒丸の指定*/
}
.toc ul.toc-list>li, .toc ol.toc-list>li { /*h2の指定*/
list-style-type:decimal; /*decimalは数字の指定*/
}
このようにしています。
ここで、２点ほど質問があります。
①今、ｈ2の手前に番号がつくようになっています。これを以下のフォントオウサムの記号に変えたいです。
https://fontawesome.com/v4.7.0/icon/caret-right
そのようなカスタマイズは可能でしょうか？
②記事によって目次を最初から閉じている状態、開いている状態にしたいです。
現在、wordpress→投稿ページ→右にある文書欄→ページ設定で『記事によって目次を表示するか否か』を選べますが、
自分は、『記事によって目次を最初から開いた状態にするか、閉じた状態にするか』を選びたいです。
「cocoon設定」→「目次」→「最初から目次内容を表示する」にチェックを入れ、デフォルトは開いた状態設定にする。→閉じた状態にしたい記事は投稿ページのカスタムcssで指示?する。
という風にすればできると思うのですが、カスタムcssにはどのようなcssを書けばよいのでしょうか？
いつまでも初歩的な質問をしてすみません。よろしくお願いいたします。
2019年3月25日 19:42
出来れば、②は技術的に別のものになるので、新しくトピックを立てていただいてよろしいでしょうか。
当トピック（①）はこのままで、②に関して新しくトピックが立てられた際に、それぞれのトピックに答えられればと思います。
Topic starter
2019年3月26日 16:13
わいひらさん
お返事ありがとうございます。②のトピックもたてさせていただきました。
お手数おかけしますが、よろしくお願いいたします。
2019年3月26日 19:53
？ですが、多分こんな感じで追記すればできるかと思います。
.toc ul.toc-list > li,
.toc ol.toc-list > li {
list-style-type: none;
}
.toc ul.toc-list > li > a::before,
.toc ol.toc-list > li > a::before {
content: "\f0da";
font-family: Fontawesome;
margin-right: 3px;
}
Topic starter
2019年3月27日 16:23
わいひらさんありがとうございます。
若干アレンジして、以下のようなcssを追加しました。
.toc ul.toc-list > li,
.toc ol.toc-list > li {
list-style-type: none;
}
.toc ul.toc-list > li > a::before,
.toc ol.toc-list > li > a::before {
content: "\f0da";
font-family: Fontawesome;
font-size:1.2em;
margin-right: 5px;
}
希望通り、数字がアイコンになりました。ありがとうございます。
ですが、少し不具合がでてきました。
カーソルをh2にもっていくとアンダーラインがでるようになっているのですが、アイコンの少し右のほうのアンダーラインがきれてしまうようになっています。（画像参照）
これはどうにかできませんか？
お時間のあるときに、アドバイスをいただけると嬉しいです。
よろしくお願いいたします。
2019年3月27日 17:17
.toc ul.toc-list > li,
.toc ol.toc-list > li {
list-style-type: none;
}
.toc ul.toc-list > li > a::before,
.toc ol.toc-list > li > a::before {
content: "\f0da";
font-family: Fontawesome;
font-size:1.2em;
margin-right: 5px;
display: inline-block;
}
ご希望に添えるか分かりませんが、最後の行に『display: inline-block;』を追加すると三角の下のアンダーラインは消えるはずです。
ご参考までに。
Topic starter
2019年3月28日 14:18
Thanks!さん、ありがとうございます。
消えた線の部分を埋めるのが理想でしたが、before下のアンダーラインを消すカタチもいいと思ったのでこれでいこうと思います。
また、参考になるURLも提示していただきありがとうございます。
わいひら reacted
2019年3月28日 16:18
サイトの目次部分、拝見させていただきました。私の回答を参考にしていただきありがとうございます。
消えた線の部分を埋めるのが理想でしたが、
kumaさんの仰る通り、本来希望されていたことではないため、わいひらさんや、私より詳しい方の回答をお待ちいただく方が良いかもしれません。お力になれず申し訳ありません。
ですが、もしかするとカスタマイズ対象外の可能性もあるかもしれません。ご了承のほどお願い申し上げます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。