サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
22/05/2020 5:55 pm
いつもお世話になっています。
画像のギャラリーについてですが、PCで横に複数カラムにした場合、SPでは2カラムになると思います。
それを1カラムにしたいのですが、どのような記述をすれば良いでしょうか？
よろしくお願いいたします。
Topic starter
22/05/2020 11:20 pm
23/05/2020 2:20 am
私は、ギャラリーは、使ったことがないのですが、過去トピックの記憶から、WordPressのギャラリーを使うときは、一番先に、Internet Explorer での表示を考慮した方が良かったような気がします。
他のブラウザでは、カッコよく表示されても、Internet Explorer で表示すると、なんか、イマイチって、ことがあるみたいなので・・・
私はギャラリーは、一度も作ったことがないので、当然、プラグインも使ったことがないのですが、視野に入れてもいいような気がしないでもないです。
Internet Explorer は完全無視！と言う場合は、別なのですが・・
余計な書き込みで、大変失礼しました。
わいひら reacted
23/05/2020 4:47 pm
ちょっと、適当に書いてみました。
実際に試した訳ではないので、間違っているかもしれません。
@media screen and (max-width:480px) {
.blocks-gallery-grid .blocks-gallery-item,
.wp-block-gallery .blocks-gallery-item {
width: 100%;
margin: 0 0 16px;
}
}
ギャラリーを表示するCSSは複雑なので、画像の数等、条件が変わると、どうなるのかよくわかりません。
前述のように、Internet Explorer での表示の件もあるので、仮に上手くいったとしても、あまりオススメするようなものではないのかな、とも思います。
労力をかける割には、良いものができないような気もします。
もっと良い方法をアドバイスくださる方も、いらっしゃるかもしれません。
わいひら reacted
Topic starter
24/05/2020 9:16 am
リフィトリーさん、お返事ありがとうございます。
せっかくご教示頂いたのですが、表示は変わりませんでした ?
24/05/2020 11:46 am
@kazusun さん
既にお伝えしましたとおり、WordPressのギャラリーのCSSは、複雑なので、これをカスタマイズするのは、私は、あまりオススメしません。
また、これも既にお伝えしましたとおり、Internet Explorer での表示は、あまり考慮されていないようです。
なので、時間をかけて、CSSの内容を紐解いて修正したとしても、割に合わないと感じます。
まあ、それでも、試してみたい、と言う場合は、子テーマのCSSに書くのではなく、「外観」→「カスタマイズ」→「追加CSS」に、書いてみてください。
それでも、上手くいくかどうかは、わかりません。
ギャラリーのCSSファイルは、子テーマのCSSファイルより、後に読み込まれる仕様のようですので。
わいひら reacted
24/05/2020 7:36 pm
子テーマのstyle.cssに編集形跡は見えないようですが、どこに書かれたのですか？
https://kazstyle.net/wp-content/themes/cocoon-child-master/style.css
Topic starter
25/05/2020 11:53 am
わいひらさん
CSSは一度
@media screen and (max-width:480px)
に記述したのですけれど、何も変わらなかったので削除しました。
以前「ギャラリーをスマホで3カラムにしたい」という質問が出ていたので、そんなに難しくないのかと思っていたのですが、色々面倒なのですね。
「3カラムにしたい」という質問は改めて探してみましたが見つけることが出来ませんでした。
ちなみにその質問に対する結果は、画像が横並びで3カラムになったものの、画像の余白が出来ず、画像3枚がくっついた状態で返信は終わっていました。
This post was modified 4年前 2回 by kazusun
25/05/2020 7:42 pm
カスタマイズされた状態を見ないと、どういった影響が出ているのかわからないので、ちょっと何とも言えません。
「3カラムにしたい」という質問は改めて探してみましたが見つけることが出来ませんでした。
ちなみにその質問に対する結果は、画像が横並びで3カラムになったものの、画像の余白が出来ず、画像3枚がくっついた状態で返信は終わっていました。
そのトピック自体どれのことかわからないので確かなことわかりません。
ただ利用規約にもあるように、フォーラムはあくまでできる範囲で行うもので、必ずしもサポートする義務を負うものではありません。
自身で行うのが難しい場合は、プロにご依頼いただければサクッとやってもらえると思います。
https://wp-cocoon.com/cocoon-custom/
Topic starter
26/05/2020 8:15 am
「スマホでギャラリー3カラムにしたい」についての投稿見つかりましたので、一応お知らせしておきます。
1カラムにする方法は色々考えてみます。
Topic starter
26/05/2020 10:51 pm
リフィトリーさん、わいひらさん
教えて頂いた中に
ギャラリーのCSSファイルは、子テーマのCSSファイルより、後に読み込まれる仕様のようですので。
とありましたので、 「!important」を付けてみたらスマホ縦一列でギャラリー表示できました！
.blocks-gallery-grid .blocks-gallery-item,
.wp-block-gallery .blocks-gallery-item {
width: 100% !important;
margin: 0 0 16px !important;
}
途方に暮れて諦めかけていたところだったので、助かりました。
色々とお手数をお掛けしました。
ありがとうございます。
いつも感謝です！！<(_ _)>
This post was modified 4年前 2回 by kazusun
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。