現在デフォルトスキンとして「Bizarre-food(ブルーカレー) 」適用中。近日同梱予定。

画像のfigcaptionで文章の位置調整について | カスタマイズ相談 | Cocoon フォーラム

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
画像のfigcaptionで文章の位置...
 
Share:

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

  RSS

kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
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 2週間 前 2 times by kazusun

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
2019年6月5日 07:34  

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

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

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

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

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


わいひら 件のいいね!
kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
2019年6月5日 14:26  

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

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
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上ではこんな感じです。

スマホの場合は数値を変更する必要があるかと思われるので、メディアクエリで調整していただけたら。と思います。


わいひら 件のいいね!
kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
2019年6月5日 23:01  

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
2019年6月5日 23:28  

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
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タグが増えてたイメージだったのと、テストサイトを消さずに出しっぱなしだったので、さっき思いついたままチェックしてみました。

これもメディアクエリで調整が必要なのと色々調整は、いるかと思います。


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
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;
}

わいひら 件のいいね!
kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
2019年6月5日 23:56  

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

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
2019年6月6日 00:34  

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

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

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

 

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

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


わいひら 件のいいね!
kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
2019年6月6日 09:46  

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

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
2019年6月6日 13:28  

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

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


わいひら 件のいいね!
kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
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が複数行になったときに文字と下の画像がだぶってしまうことです。

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
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;
}

 


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
2019年6月8日 00:48  

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

そうなんですよね。

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

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


kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
2019年6月8日 02:26  

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

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

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

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

ありがとうございます。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
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)

コンテンツによってかわるんで、先に作ったほうが良い気もしますけど、色々試してみようとおもわれるのであればそれはそれで^^


わいひら 件のいいね!
kazusun
(@kazusun)
Eminent Member
参加: 1年 前
投稿: 22
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日で削除します。
かうたっくさん、気長にお付き合いくださってありがとうございます<(_ _)>

また何かありましたらご教示ください。


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2753
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 1週間 前 3 times by かうたっく

kazusunわいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年10ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:8ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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