2024年10月6日 / 最終更新日 : 2024年10月6日対馬俊彦 WordPress

【ブロックエディター対応】画像をテキストの形で切り抜く(クリップする)やり方

WordPress のブロックエディターで、上記の画像を以下のようにテキストの形で切り抜くやり方を紹介します。

FALL

手順① 段落ブロックに文字入力～設定

段落ブロックに FALL と文字入力して、タイポグラフィを以下のように設定します。

フォントサイズ: 20vw (お好みでどうぞ)
外観: ボールド
行の高さ: 1.2

段落ブロックの追加 CSS クラスに img-txt-clip と入力します。

ここまでの作業でこのように ↓ なります。

FALL

手順② CSS を追加

子テーマの style.css などに以下の CSS を追加します。

.img-txt-clip {
    background-image: url(画像のURL);
    background-size: contain;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    font-family: sans-serif;
    background-position: center;
}

完成です。

FALL

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら