syntaro

みなさん、ありがとございました。たびたびお騒がせしております。

下記のように、min-heightのタグによる属性を、importantで上書きすることで、対応できました。

本当、お騒がせしております。

これからもよろしくお願いします。

/* 
 * 担当　Y.Syntarou
 * 日付　2023/4/5
 * ステータス　実験
 * 目的　画像に文字を縦書きで載せる＋自動ズーム
 * 1/2 土台と画像とオーバーレイ 
 */
.height50vh {
	background: red;
	min-height: 45vh !important; /* これでできました */
	height: 45vh !important;
}

.height50vh, .height50vh div, .height50vh span {
	height: 45vh !important;
	width: 100% !important;
}

.height50vh img {
	height: 45vh !important;
	width: 100% !important;
	object-fit: cover;
}

こんにちわ。

さっそく試してみたところ、画像と文字の処理ができるようになりました。

@charset "utf-8";

/* Cascading Style Sheetsを記述する */

/* 以下を毎回記載してください
 * 担当：、、、　日付：、、、
 * ステータス：実験 or 完了
 * 目的：、、、
 */

/* 
 * 担当　Y.Syntarou
 * 日付　2023/4/5
 * ステータス　実験
 * 目的　画像に文字を縦書きで載せる＋自動ズーム
 * 1/3 土台 */
.height50vh {
	height: 40vh !important;
	position: relative:
	background: none;
	padding: 0;
	margin: 0;
}

/*
 * 目的　画像に文字を縦書きで載せる＋自動ズーム
 * 2/3 画像とオーバーレイ 
 */
.height50vh img, .height50vh span {
	position: absolute;
	height: 40vh !important;
	width: 100% !important;
	object-fit: cover;
	margin: 0;
	padding: 0;
}

/*
 * 目的　画像に文字を縦書きで載せる＋自動ズーム
 * 3/3 インナーコンテンツ
 */
.height50vh .wp-block-cover__inner-container {
	height: 40vh !important;
	color: purple !important;
	position: absolute;
	top: 0;
	writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;
	padding: 16px;
}

問題は、画像の下部の隙間が残ってしまうことでしょうか。

たぶん、オーバーレイの部分で、画像のサイズを参照して、サイズとして、埋め込んでいたりする気がします。

とくに、35vwなどにひっかかり、画像を小さくする場合に、つづく文字の位置が変わらず、余白ができてしまいます。小さい画面だと、画面上が画像、画面下が、文字でなく空白になるという、状態です。

オーバーレイの部分の、セレクタを、知りたかったのですが、ＨＴＭＬのソースを見ても、少しの時間では、見つけることが出きませんでした。どのように調べれば、理解しやすいでしょうか。

もう少し、お願いできませんでしょうか。

URLを、トップ投稿以外に張っても問題なければ、張りたいです。

時間経過のためでしょうか。トップの投稿は編集できなくなってしまいました。

画像ピックアップのプラグインも考えみたいと思います。

• この返信は2年、 1ヶ月前にsyntaroが編集しました。
• この返信は2年、 1ヶ月前にsyntaroが編集しました。

お返事ありがとうございます。

メディアの上のテキストは、改行しようとすると、別の段落になってしまいますね。背景：noneはためしてところ、おっしゃる通りの挙動になりました。

そのあとも、いろいろと、試していたのですが、

メディアとして画像を配置するさいに、PX単位でサイズを指定できることはわかりました。

しかし、そのサイズを複数あるレイヤーに適用しているため、一部をCSSでVH単位として上書きしても、すべてには反映されない。

ということだと思います。

VHなどを指定できるよになっていれば、今回のケースに対応できるのでしょう。

ちょっとPX以外を指定する方法がわからないのと、見出しか整形すみテキストか段落かによって、CSSのセレクタがかわってしまう点などから、

こんかいの、ＶＨを高さに指定したい場合には、自分で、ＨＴＭＬを出力するプラグインを自作することにします。

PX以外を指定する方法があれば、そのほうがいいなとは思います。

しばらくオープンのままにさせてください。よろしくお願いします。

• この返信は2年、 1ヶ月前にsyntaroが編集しました。