サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年7月10日 02:02
以下の不具合が見つかりました。
----------------------------------------------
テーマ名：Cocoon
バージョン：2.4.6.2
カテゴリ数：20
タグ数：140
ユーザー数：1
----------------------------------------------
●手順
[Cocoon設定]→[ボタン]
→トップへ戻るボタンの表示「トップへ戻るボタンを表示する」をチェック
→ボタン画像(例：100×100px画像)
●現象
表示されるボタン画像が小さい。
●原因
ボタン画像の時、ボタン(.go-to-top-button)に、ボタン画像(.go-to-top-button-image)が付加される。
図示のように、ボタン画像の最大幅max-width:120pxとなる。
しかし、ボタン(.go-to-top-button)がアイコンフォントのまま幅40pxの為、ボタン画像も40pxと小さく表示される。
●対策
.go-to-top-button-imageの定義に以下を追加する。
.go-to-top-button-image {
width: auto;
height: auto;
}
わいひら reacted
2022年7月10日 17:34
同様の環境にしてソースコードを確認してみました。
僕が想定している仕様としては、max-width:120pxの方が間違っている感じです。
120pxの方にしてみると、個人的には大きくて邪魔な感じです。
何か「トップへ戻る」ボタンを利用するときは、大きな画像を使いたいみたいな需要はありますでしょうか。
また大きな画像を使いたい場合は、どういった意図で使用するのかを教えていただければ、再検討いたします。
Topic starter
2022年7月10日 18:02
大小どちらが良いか判断に悩みます。
max-widthが無効となっていたので、記述しました。
Topic starter
2022年7月10日 21:17
何か「トップへ戻る」ボタンを利用するときは、大きな画像を使いたいみたいな需要はありますでしょうか。
また大きな画像を使いたい場合は、どういった意図で使用するのかを教えていただければ、再検討いたします。
●発見の経緯
トップに戻るボタンを画像にし、クリックした時、その画像を変化させる事を考え。
その時、画像が指定できる事に気づき。
試しに画像を設定したら、小さく、.go-to-top-button-imageのmax-widthの指定されているのに、なぜ？
.go-to-top-buttonとの矛盾を感じた次第です。
●用途
図のようにトップに戻るボタンを画像「例：ロケット」にする。
クリックした時、画像を変え、飛んでるように演出を考えました。
●回答
わいひらさんの言う通り、max-widthの削除で十分です。
作り手が必要に応じ、大きさを指定すれば、いいだけの話なので。
わいひら reacted
2022年7月11日 19:03
わいひらさんの言う通り、max-widthの削除で十分です。
承知いたしました。
CSSでそういったカスタマイズを加えられる方は、大きさの変更など容易いと思うので、初心者向けにサイズを固定する設定のままにしておこうと思います。
max-widthを削除しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2022年7月11日 19:22
ご確認いただきありがとうございます！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。