サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-10-09 00:26
こんばんわ。お世話になります。
(先ほど投稿したのですが上手くいかなかったようですので再度投稿させていただきます)
タイトルが長くなるとモバイル上では目次が２行(英語を使うとたまに３行）に表示されます。右側にはまだ幅を広げる余裕があるので、モバイル上での目次表示幅を広げることは可能でしょうか？ 目次はH4まで表示させています。
例としてURLを２つお送りします。どうぞよろしくお願いします。
https://usualcafe.com/salzburgairportbus/
https://usualcafe.com/bbcproms2019/
Topic starter
2019-10-09 02:38
かうたっくさん、早々にご連絡ありがとうございます。
ということは、このままお待ちしていればいいでしょうか。
わいひらさん、どうぞよろしくお願いします。
2019-10-09 07:00
https://gyazo.com/59a8785d323dfe214b5a7ff0d4d66bc4
上のが下位の広さに変わる感じが、おそらく（：ただ個人的に思っている）要望や調整で親テーマが上書きしてしまった部分です。
https://gyazo.com/095af30ef3e360f5c17b6de118fd7a6d
このイメージよりももっと寄せたい場合
kittenさん
@media screen and (max-width: 834px) {
.toc ol {
padding-left: 5px;
}
.toc {
padding-right: 0.5em;
}
}
https://gyazo.com/2adaa6045cb9a8bbf8ca9952d58dc4ff
- padding-left: 5px;
この数値は小さくすればもう少し左による。 - padding-right: 0.5em;
同様小さくすれば、少し右の余白が狭くなるので、お好みで調整してくださいね。
******************
わいひらさんに
メディアクエリ@media screen and (max-width: 834px) 内の以下部分
.article ul, .article ol {
padding-left: 26px;
}
上がご提示いただいたリンク先で確認したら、8713行目
下が1888行目
.toc ul, .toc ol {
padding-left: 20px;
margin-top: 0.5em;
}
.article ol で .toc ol のスタイルが消えちゃって
もったいないカモです。
あと、.toc ulのほうは
https://gyazo.com/4ceb96ce0d77b6345063f76e3501eb9d
ぶん上記のイメージだと思います。おそらくのたぶん 1892行目のスタイルが以下の通り
.toc ul {
list-style: none;
padding-left: 5px;
}
本来は5pxで
.toc ul {
list-style: none;
padding-left: 5px;
}
https://gyazo.com/e7dd3e461375b39386dc8f65428cbcb3
こんなイメージ
これも何度も上書きされたのに反映されてないので
ちょっと気の毒なスタイルのような気がします❦
This post was modified 5年前 by かうたっく
Topic starter
2019-10-09 14:41
かうたっくさん、詳細ありがとうございます。
アドバイス通りに調整したいのですが、実際の編集方法は
Cocoon Child_ 概観_スタイルシート(style.css)
この最下部に
@media screen and (max-width: 834px) {
.toc ol {
padding-left: 5px;
}
.toc {
padding-right: 0.5em;
}
}
こちらを追加するという理解で正しいでしょうか？
2019-10-09 17:07
外観・テーマエディター・Cocoon Child: スタイルシート (style.css)に追記する感じです。
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 0.0.5
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
この下に
以下のよう追記する感じで大丈夫です。
@media screen and (max-width: 834px) {
.toc ol {
padding-left: 5px;
}
.toc {
padding-right: 0.5em;
}
}
Topic starter
2019-10-09 18:22
ありがとうございます。度々すみません。
「追加CSS」の最下部に
padding-left: 5px;
padding-right: 0.5em;
を追加してみました。
右側にまだ余白があるのですが、これ以上広げることは無理なのでしょうか？
画像1: PC上でモバイルの表示を確認したもの(responsinator.com)
画像2: iphone5.SEのスクリーンショット(幅は狭）
ページURL
https://usualcafe.com/hallstatt/
よろしくお願いいたします。
2019-10-09 21:03
Cocoonデフォルトでは、そういった症状にはならないです。
おそらく、fuwariスキンの仕様ではないかと思います。
https://usualcafe.com/wp-content/themes/cocoon-master/skins/skin-fuwari-mirucha/style.css
Topic starter
2019-10-09 22:55
幅を100%に変更してみたところ、画面一杯まで広げることができました！
助かりました、いろいろとありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。