サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年1月5日 01:43
初めまして。泥歩（でいほ）と申します。
検索してもヒットしないので、不具合ではなく私だけの設定か環境の問題だと思い、不具合報告ではなくこちらに投稿させていただきました。
画像の囲み効果と拡大効果で「なし」以外を選択しているのですが、記事内の画像に囲み効果は反映されず、画像もクリックできず拡大されない状態なので、有効になっていないように感じます。
例えばこちらのページで画像を使っています。
https://dayhome.work/kawagoe-sports-tennis-rental/
しかし、プレビューにあるサボテンと木の画像では、選択した効果が正しく反映されており、拡大も可能です。
何か他にも必要な設定がありますでしょうか？
以下にテーマ情報を添付いたします。
いくつかプラグインが利用中になっていますが、全て停止して試しても変わりませんでした。
以上、よろしくお願いいたします。
----------------------------------------------
サイト名：DayHomework
サイトURL： https://dayhome.work
ホームURL： https://dayhome.work
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
使用スキンURL：/wp-content/themes/cocoon-master/skins/skin-colors-black/style.css
Wordpressバージョン：5.0.2
PHPバージョン：5.6.39
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8,zh;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：1.4.7
カテゴリ数：5
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
----------------------------------------------
利用中のプラグイン：
Contact Form 7 5.1.1
Google XML Sitemaps 4.1.0
Limit Login Attempts Reloaded 2.7.1
PS Auto Sitemap 1.1.9
WP Word Count 3.0.1
----------------------------------------------
2019年1月5日 22:15
画像の囲み効果と拡大効果で「なし」以外を選択しているのですが、
これだと、設定状態が曖昧です。「なし」以外はいろいろあるので。
できれば画像設定の該当部分の設定部分のキャプチャをアップしていただければと思います。
2019年1月5日 22:16
https://dayhome.work/kawagoe-sports-tennis-rental/
しかし、プレビューにあるサボテンと木の画像では、選択した効果が正しく反映されており、拡大も可能です。
上記のURLからは、サボテン部分というのがどこのことかわかりません。
プレビュー画面はこちら側から見ることができないので、これもキャプチャをお願いします。
Topic starter
2019年1月6日 03:47
説明不足すみません。
「なし」以外について。
囲み効果では、以下の4つどれを選択しても記事内の画像には変化がありません。
- 薄い枠線
- 薄い太線
- 薄い影
- ペーパー
拡大効果では、以下の3つどれを選択しても記事内の画像には変化がありません。
- baguetteBox
- Lity
- Lightbox
プレビューについて。
cocoonの画像設定にあるプレビュー欄に、私の場合は左にサボテン、右に木の画像が表示されています。
このプレビュー欄では囲み効果、拡大効果のいづれも選択した設定通りに表示されます。
2019年1月6日 11:16
囲み効果が反映されるのは冒頭文から文末までにあるコンテンツ：記事部分にある画像のみentry-contentの部分に iwe-shadow としていがあるのにCSSのボーダーが0になってる状態です。
HTMLにはキチンと表示されているのに（このスタイルを表示させるための指定）.iwe-shadow img{ここにシャドーのスタイル} これが反映されていません。
カラフルボックスにはキャッシュ機能はありますか？ログインユーザーには表示されているのであれば、設定があるのかも知れませんが、心当たりはありますか？（サーバーのキャッシュ・プラグインのキャッシュ）
もう1つ。Cocoon高速化のブラウザキャッシュの可能性ですが、イロイロ改善されてると思います。
テーマ名：Cocoon
バージョン：1.4.7
このようにあるので、Cocoonバージョンを最新版にしてご確認ください。
他気になる点はPHPバージョン：5.6.39。だめであれば最新版にしていただけますか。
https://wp-cocoon.com/downloads/
Cocoonの推奨環境はこちら。
- WordPress4.7以上
- PHP7以上（5.6でも動作するとは思います）
- Google Chrome
- Firefox
- Microsoft Edge
- Internet Explorer 11以上
- Safari
わいひら reacted
2019年1月6日 11:24
このプレビュー欄では囲み効果、拡大効果のいづれも選択した設定通りに表示されます。
Cocoon設定・画像にあるデモでのプレビューを確認したところ画像にリンクが付いてます。
ですが、ご指定いただいたリンク先の画像にはリンクaタグに囲まれていないので、拡大効果は表示されないと思います。
https://gyazo.com/55ebdf054ac26d0800dfe2087ef5559e
クラシックエディタ・Gutenbergのどちらもエディタでも画像にリンクを入れれば拡大効果は適応されると思います。
- 投稿編集画面で画像をクリック
- 画像詳細
- 設定を表示
- リンク先
- 画像のURLに指定
わいひら reacted
Topic starter
2019年1月6日 17:33
カラフルボックスではLiteSpeedのキャッシュプラグインを別途インストールする必要があるようですが、まだ未インストールなので無効なのだと思います。
cocoonの高速化設定では１つもチェックが入っていなかったのでこちらも無効だと思います。
cocoonのバージョンを更新して1.5.1.1にしましたが、変化は見られませんでした。
カラフルボックスのマニュアルに従いphpのバージョンを7.2にしました。
cPanel→MultiPHPマネージャー（phpの管理ソフト？）で変更し、確かにMultiPHPマネージャー上は7.2になったのですが、サイトでphp情報（ https://dayhome.work/phpinfo.php ）を見ると5.6のままになっており、cocoonのテーマ情報でも5.6のまま変化がありませんでした。
phpバージョンは変更できていないようなので、カラフルボックスのサポートに問い合わせてみます。
進展がありましたら改めてご報告いたします。
Topic starter
2019年1月6日 18:10
連投すみません。
今気づいたのですが、記事に画像を挿入する際にクラシックブロックを使用すれば画像の囲み、拡大ともに有効になりました。（ https://dayhome.work/media-test/ ）
最近Wordpressを始めてエディタはgutenbergしか使ったことがなく、画像は全て画像ブロックで挿入していました。
クラシックエディタ（gutenbergを使う場合はクラシックブロック）でないと画像設定は有効にならないということはありますでしょうか？
2019年1月6日 18:10
画像の囲み効果が反映されないのは、Gutenberg のせい。
今は、Cocoon がこんな CSS を指定しています（ボーダー薄い太線の場合）。
.iwe-border-bold p img,
.iwe-border-bold p amp-img {
border: 4px solid #eee;
}
Gutenberg からは、画像が p ではなく figure で囲まれます。なので、CSS が適用されません。
ただ、こう書いてしまうと、楽天商品リンクなどの画像にも適用されちゃう。
.iwe-border-bold p img,
.iwe-border-bold figure img,
.iwe-border-bold p amp-img,
.iwe-border-bold figure amp-img {
border: 4px solid #eee;
}
img の class に wp-image-〇〇 が必ず付けばいいのですが、サイトや画像によっては付いていない。
なので、こうかな？
/* ボーダー(薄い枠線) */
.iwe-border [src*='wp-content'] {
border: 1px solid #ccc;
}
/* ボーダー(薄い太線) */
.iwe-border-bold [src*='wp-content'] {
border: 4px solid #eee;
}
/* シャドー(薄い影) */
.iwe-shadow [src*='wp-content'] {
box-shadow: 5px 5px 15px #ddd;
}
/* シャドー(ペーパー) */
.iwe-shadow-paper [src*='wp-content'] {
box-shadow: 0 2px 2px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08);
}
ただ、これだと外部から読み込む画像には適用されません。
悩ましい。というか、Gutenberg 面倒くさい…。
わいひら reacted
2019年1月6日 18:24
プレビューのサボテンとは、Cocoon設定画面のサボテン画像のことだったんですね。
そのことと思っていませんでした。ようやく意味がわかりました。
2019年1月6日 18:42
悩ましい。というか、Gutenberg 面倒くさい…。
そうなんですよね…。
また1つ対応しなければならない仕様が増えてしまった…。といった感じです。。
Topic starter
2019年1月6日 21:33
みなさま、色々と返信いただきありがとうございます。
gutenbergが原因だったんですね。何か使いにくい気もしていたし、cocoonの機能を使いたいのでエディタの変更を検討したいと思います。
ありがとうございました。 ?
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。