「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

画像のfigcaptionで文章の位置...
 
共有:
通知
すべてクリア

[解決済] 画像のfigcaptionで文章の位置調整について

19 投稿
2 ユーザー
11 Reactions
5,624 表示
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

いつもお世話になります。

画像を並べて表示したいので、ギャラリーで表示しようと考えています。
一つひとつの商品に説明を入れたいので、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

   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

ギャラリーでも単品で画像を挿入したときと同じように、画像の下に文字を入れたいのですが方法が分かりません。

CSSを見比べて色々試したのですが、素人目には中々難しくて・・・。
どのようにすれば、ギャラリーでも単品画像のigcaptionと同じように文章表示できるのでしょうか?

画像を置いて頂いたのですが、画像ではHTMLとCSSの確認ができないんですね。

その画像を置いているURLをご提示ください。

不具合・カスタマイズ対象ページのURLを提示してください


   
わいひら reacted
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん、いつもありがとうございます。
えっと、サイトはまだ公開していないので、テストページを載せさせていただきます。

https://lavinne.com/2019/06/05/test/

キャプション設定については、現在デフォルテのままです。
上が「通常の画像表示」で、下が「ギャラリー表示」です。

ギャラリーで画像を表示して、キャプションは通常の画像表示と同じように画像の下に置きたいのです。

よろしくお願いします<(_ _)>


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

参考程度の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
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん、ありがとうございます。

言われた通りCSSを追加したのですが、キャプションは以前と同じように表示されました。なんでかなぁ・・・。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。

終着点はどこでしょうか?

その上でそれに合わせて参考までにstyleを。って感じです。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 
.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
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

リストのタグが増えてたのでとりあえず

.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
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。

前と状態が違うとは何を指していらっしゃるのでしょうか?

終着点はどこでしょうか?

このトピの最初と2番目に書いている通りです。

CSSは追加してみたのですが、いずれにしてもプレビューでは何の変化もありませんでした。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。

前と状態が違うとは何を指していらっしゃるのでしょうか?

以前とHTMLがちがってましたよ。ulに囲まれたliタグが1つだった。という認識ですよ❦

 

あとCSSが反映しない原因は色々あるんですね。お時間があるときにでも、冒頭にある案内をご覧いただけますか。

見ても不明な場合、説明させていただきますね^^


   
わいひら reacted
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん、ありがとうございます。
すみません、コメントの書き込みが僕とかうたっくさん同時にやっていたみたいで、

スクショとるのをわすれてたのと、前と状態が違っているのでそうなってるんだな。って思ってます。

以下の書き込みを見ずにお返事していました。

ご指示の通り、今から再度試してみたいと思います。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

えーー、了解です。が。URLと希望した情報もついでにコピペいただき、ご返信いただけたら、さかのぼって何がどうだったかを確認せずに済む状況かもしれません。

お手数かけますがよろしくお願いします ? 


   
わいひら reacted
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん
色々試した結果、 !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が複数行になったときに文字と下の画像がだぶってしまうことです。

少し前進しました!('◇')ゞ


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

そういえば、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
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

現時点での問題は、figcaptionが複数行になったときに文字と下の画像がだぶってしまうことです。

そうなんですよね。

あとはモバイルにしたときですね。幅が狭くなると文字列が長くなるので調整が必要ってわけです。そこを考慮したうえでstyleを有効にするかどうか問題。

もしくは文字列を気を付けてまでやるべき事か。ってことが問題点ですかね


   
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

やはりWordPressのCSSが優先されていたんですね。

あとはモバイルにしたときですね。幅が狭くなると文字列が長くなるので調整が必要ってわけです。そこを考慮したうえでstyleを有効にするかどうか問題。

そんなに多くの文字を入れることはないので、モバイルでの問題はさほど考えてはいません。

いずれにしても、文字と画像がかぶってしまう問題はどうにかして解決しないとサイト作成ができないので、もう少し四苦八苦してみます。

ありがとうございます。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

どんなかんじかわからないけど、モバイルが問題なければあとはおかしくなるタイミングで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
(@kazusun)
Trusted Member Registered
結合: 6年前
投稿: 61
Topic starter  

かうたっくさん
何か分からないけど、思い通りの表示になって解決した感じがするのでご報告です。

.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
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

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 かうたっく

   
kazusun and わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました