自作プラグインからメディアライブラリ

こんにちわ。

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

@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を、トップ投稿以外に張っても問題なければ、張りたいです。

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

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

• この返信は3年、 5ヶ月前にsyntaroが編集しました。
• この返信は3年、 5ヶ月前に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;
}