サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年6月5日 02:30
いつもお世話になります。
画像を並べて表示したいので、ギャラリーで表示しようと考えています。
一つひとつの商品に説明を入れたいので、figcaptionを使おうと思っているのですが、単品画像のfigcaption（画像下に文字が入る）とギャラリーのfigcaption（画像内に文字が入る）では文字表示のされ方が違うのですが、ギャラリーでも単品で画像を挿入したときと同じように、画像の下に文字を入れたいのですが方法が分かりません。
CSSを見比べて色々試したのですが、素人目には中々難しくて・・・。
どのようにすれば、ギャラリーでも単品画像のigcaptionと同じように文章表示できるのでしょうか？
本当は画像をギャラリーで並べて、説明文をpタグで差し込みたいのですが、これってwpの仕様で出来ないのでしょうか？
</li>の前後などにpタグを入れてみたりしたのですが、エラー？になるようでダメでした。
以前
“2連続でキャプションが入る画像を挿入すると<p>タグが入りません。”
ってトピがあったのですが、それと同じことなんでしょうか。
https://wp-cocoon.com/community/customs/%E7%94%BB%E5%83%8F%E6%8C%BF%E5%85%A5%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E7%9B%B8%E8%AB%87/
どなたかお分かりの方がいらっしゃいましたら、ご教示いただければ幸いです。
This topic was modified 5年前 2回 by kazusun
2019年6月5日 07:34
ギャラリーでも単品で画像を挿入したときと同じように、画像の下に文字を入れたいのですが方法が分かりません。
CSSを見比べて色々試したのですが、素人目には中々難しくて・・・。
どのようにすれば、ギャラリーでも単品画像のigcaptionと同じように文章表示できるのでしょうか？
画像を置いて頂いたのですが、画像ではHTMLとCSSの確認ができないんですね。
その画像を置いているURLをご提示ください。
不具合・カスタマイズ対象ページのURLを提示してください
わいひら reacted
Topic starter
2019年6月5日 14:26
かうたっくさん、いつもありがとうございます。
えっと、サイトはまだ公開していないので、テストページを載せさせていただきます。
https://lavinne.com/2019/06/05/test/
キャプション設定については、現在デフォルテのままです。
上が「通常の画像表示」で、下が「ギャラリー表示」です。
ギャラリーで画像を表示して、キャプションは通常の画像表示と同じように画像の下に置きたいのです。
よろしくお願いします<(_ _)>
2019年6月5日 14:59
参考程度のCSS
.wp-block-gallery .blocks-gallery-item figcaption {
bottom: -70px;
padding: 0;
color: #333;
background: transparent;
}
.wp-block-gallery.columns-1.is-cropped {
margin-bottom: 70px;
}
ギャラリーのブロックでキャップションが入っているとき、しかも1カラムの場合PC上ではこんな感じです。
スマホの場合は数値を変更する必要があるかと思われるので、メディアクエリで調整していただけたら。と思います。
わいひら reacted
Topic starter
2019年6月5日 23:01
かうたっくさん、ありがとうございます。
言われた通りCSSを追加したのですが、キャプションは以前と同じように表示されました。なんでかなぁ・・・。
2019年6月5日 23:28
スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。
終着点はどこでしょうか？
その上でそれに合わせて参考までにstyleを。って感じです。
2019年6月5日 23:46
.wp-block-gallery .blocks-gallery-item figcaption {
bottom: -70px;
padding: 0;
color: #333;
background: transparent;
}
.wp-block-gallery.columns-1.is-cropped,
.wp-block-gallery.columns-1.is-cropped .blocks-gallery-item {
margin-bottom: 70px;
}
リストliタグが増えてたイメージだったのと、テストサイトを消さずに出しっぱなしだったので、さっき思いついたままチェックしてみました。
これもメディアクエリで調整が必要なのと色々調整は、いるかと思います。
わいひら reacted
2019年6月5日 23:51
リストのタグが増えてたのでとりあえず
.wp-block-gallery.columns-1.is-cropped .blocks-gallery-item
ギャラリー1カラムcropped状態で、リストタグが増えた状態。前はギャラリー画像が1つだった。けど2つに増えたからリストが増えた状態。といえば、kazusunさんにだけでも伝わるかもです。
****
ここから試してませんが。
リストの下余白だけを大きくしたい場合は、以下のように別々に指定しても以下もしれません。
.wp-block-gallery.columns-1.is-cropped {
margin-bottom: 70px;
}
.wp-block-gallery.columns-1.is-cropped .blocks-gallery-item {
margin-bottom: 80px;
}
わいひら reacted
Topic starter
2019年6月5日 23:56
スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。
前と状態が違うとは何を指していらっしゃるのでしょうか？
終着点はどこでしょうか？
このトピの最初と2番目に書いている通りです。
CSSは追加してみたのですが、いずれにしてもプレビューでは何の変化もありませんでした。
2019年6月6日 00:34
スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。
前と状態が違うとは何を指していらっしゃるのでしょうか？
以前とHTMLがちがってましたよ。ulに囲まれたliタグが1つだった。という認識ですよ❦
あとCSSが反映しない原因は色々あるんですね。お時間があるときにでも、冒頭にある案内をご覧いただけますか。
見ても不明な場合、説明させていただきますね＾＾
わいひら reacted
Topic starter
2019年6月6日 09:46
かうたっくさん、ありがとうございます。
すみません、コメントの書き込みが僕とかうたっくさん同時にやっていたみたいで、
スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。
以下の書き込みを見ずにお返事していました。
ご指示の通り、今から再度試してみたいと思います。
2019年6月6日 13:28
えーー、了解です。が。URLと希望した情報もついでにコピペいただき、ご返信いただけたら、さかのぼって何がどうだったかを確認せずに済む状況かもしれません。
お手数かけますがよろしくお願いします ?
わいひら reacted
Topic starter
2019年6月8日 00:21
かうたっくさん
色々試した結果、 !importantを付けたら表示が変わりました。
元々の相談内容は
ギャラリーのfigcaptionが画像内に記述されるので、通常の画像のfigcaptionと同じように画像の下に文字を表示したい。
https://lavinne.com/2019/06/05/test/
現在は子テーマのCSSに
.wp-block-gallery .blocks-gallery-item figcaption {
bottom: -70px !important;
padding: 0 !important;
color: #333 !important;
background: transparent !important;
text-align: left !important;
font-size: 18px !important;
}
.wp-block-gallery.columns-1.is-cropped,
.wp-block-gallery.columns-1.is-cropped .blocks-gallery-item {
margin-bottom: 70px !important;
}
.wp-block-image figcaption {
font-size: 18px !important;
text-align: left !important;
}
を付け加えています。
現時点での問題は、figcaptionが複数行になったときに文字と下の画像がだぶってしまうことです。
少し前進しました！('◇')ゞ
2019年6月8日 00:46
そういえば、head内でstyleの読み込み順が
wp-block-library-cssのほう：WordPressのCSSのほうが、親子テーマより優先順位が高かったんでした。
.entry-content .wp-block-gallery .blocks-gallery-item figcaption {
bottom: -70px;
padding: 0;
color: #333;
background: transparent;
text-align: left;
font-size: 18px;
}
.entry-content .wp-block-gallery.columns-1.is-cropped,
.entry-content .wp-block-gallery.columns-1.is-cropped .blocks-gallery-item {
margin-bottom: 70px;
}
.entry-content .wp-block-image figcaption {
font-size: 18px;
text-align: left;
}
わいひら reacted
2019年6月8日 00:48
現時点での問題は、figcaptionが複数行になったときに文字と下の画像がだぶってしまうことです。
そうなんですよね。
あとはモバイルにしたときですね。幅が狭くなると文字列が長くなるので調整が必要ってわけです。そこを考慮したうえでstyleを有効にするかどうか問題。
もしくは文字列を気を付けてまでやるべき事か。ってことが問題点ですかね
Topic starter
2019年6月8日 02:26
やはりWordPressのCSSが優先されていたんですね。
あとはモバイルにしたときですね。幅が狭くなると文字列が長くなるので調整が必要ってわけです。そこを考慮したうえでstyleを有効にするかどうか問題。
そんなに多くの文字を入れることはないので、モバイルでの問題はさほど考えてはいません。
いずれにしても、文字と画像がかぶってしまう問題はどうにかして解決しないとサイト作成ができないので、もう少し四苦八苦してみます。
ありがとうございます。
2019年6月8日 08:12
どんなかんじかわからないけど、モバイルが問題なければあとはおかしくなるタイミングでstyleを調整したら良いと思いますよ。
800pxでおかしくなる場合
@media screen and (min-width: 800px) {
.entry-content .wp-block-gallery .blocks-gallery-item figcaption {
bottom: -70px;
padding: 0;
}
.entry-content .wp-block-gallery.columns-1.is-cropped,
.entry-content .wp-block-gallery.columns-1.is-cropped .blocks-gallery-item {
margin-bottom: 70px;
}
}
こんな感じで数値の調整とか。※例として。
500pxでおかしくなれば、500に。
(min-width: 500px)
コンテンツによってかわるんで、先に作ったほうが良い気もしますけど、色々試してみようとおもわれるのであればそれはそれで＾＾
わいひら reacted
Topic starter
2019年6月11日 02:32
かうたっくさん
何か分からないけど、思い通りの表示になって解決した感じがするのでご報告です。
.wp-block-gallery .blocks-gallery-item figcaption {
bottom: -70px !important;
padding: 0 !important;
color: #333 !important;
background: transparent !important;
text-align: left !important;
font-size: 18px !important;
}
.wp-block-image figcaption {
font-size: 18px !important;
text-align: left !important;
}
.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption {
margin-top: .5em !important;
margin-bottom: 1em !important;
color: #555d66 !important;
position: static !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
}
.wp-block-gallery, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item
{
display: block !important;
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
.wp-block-gallery .blocks-gallery-image figure,.wp-block-gallery .blocks-gallery-item figure{
display: block !important;
} }
https://lavinne.com/2019/06/05/test/
これでキャプションの行数が変わってもフレキシブルに表示されそうです。
今のところモバイルも問題なさそうです。
テストURLは2～3日で削除します。
かうたっくさん、気長にお付き合いくださってありがとうございます<(_ _)>
また何かありましたらご教示ください。
わいひら reacted
2019年6月11日 07:23
kazusunさん
凄い！粘り勝ちですね＾＾
.entry-content .wp-block-gallery .blocks-gallery-image figcaption,
.entry-content .wp-block-gallery .blocks-gallery-item figcaption {
margin-top: .5em;
margin-bottom: 1em;
color: #555d66;
position: static;
height: auto; /*これも要らないかも*/
padding: 0;
background: transparent;
text-align: left;
font-size: 18px;
}
.entry-content .wp-block-gallery,
.entry-content .wp-block-gallery .blocks-gallery-image,
.entry-content .wp-block-gallery .blocks-gallery-item {
display: block;
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
.entry-content .wp-block-gallery .blocks-gallery-image figure,
.entry-content .wp-block-gallery .blocks-gallery-item figure {
display: block;
}
}
kazusunさんのコードで重複のあるところと!importantを書かないように。ってことだけチェックしてみました。
お疲れさまでした❦
This post was modified 5年前 3回 by かうたっく
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。