Zenn
🍣

【CSS】テキストを吹き出しで囲む（2022年11月29日業務報告）

2022/11/29に公開
CSS
HTML
PHP
tech

サイト作り

下層ページの作成

お客様の声でテキストをふきだしで囲んでセリフ調にする

ふきだし

/* お客様の声 セリフふきだし */
.serif {
    position: relative;
    border: 2px solid #000;
    border-radius: 10px;
    margin-top: 60px;
    padding: 25px 40px 20px;
}
.serif::after {
    display: block;
    position: absolute;
    right: -21px;
    top: 0;
    height: 0;
    width: 21px;
    height: 100%;
    min-height: 15px;
    max-height: 60px;
    content: '';
    background: url(images/voice_serif_balloon_arrow.png) left center no-repeat;
}

borderで要素を囲った後、ふきだしの尖っている部分は画像を用意して、ポジション指定でくっつけてます。
ふきだし
 

ウィンドウサイズを変更しても要素が中央に表示されるように

flexを当てている要素に対して以下の指定を追加する。

justify-content: center; <!-- 横軸で中央寄せ -->
align-items: center; <!-- 縦軸で中央寄せ -->

 

画像をマウスオーバーすると下から説明が表示される

マウスオーバーで説明表示

HTML
<div class="works-image">
	<img src="images/sample.jpg" alt="テキスト" />
	<div class="mask">
		<div class="caption">説明文</div>
	</div>
</div>
CSS
.works-image {
    overflow: hidden;
    position: relative;
    }
.works-image .caption {
    font-size: 0.9rem;
    color: #fff;
    padding: 0 10px ;
    position: absolute;
    bottom: 10px;
}
.works-image .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;	/* 枠の下に置いて表示させない */
    left: 0;
    background-color:	rgba(0,0,0,0.4);
    transition: all 0.6s ease;
}
.works-image:hover .mask {
    bottom: 0;	/* 下から上がってくるように見せる */
}

 

お問合せフォームの送信メールがなりすまし判定される

プラグイン「WP Mail SMTP by WPForms」で対応。
https://lolipop.jp/media/how-to-setup-wp-mail-smtp-plugin/

プラグインインストール後、自分が契約しているメールサーバーから送信される設定にすることで、フォームから送信されるメールがなりすましにならず、迷惑メールにもなりにくくなる。

設定値がわからない場合は、契約しているサーバーの設定画面で確認すること。

問い合わせフォームから送信をして、問題なくメールが届き、なりすまし判定も消えたことを確認。
 

ウィンドウサイズを変更したときに背景画像の縦横比を保つ

paddingの縦は横幅の%で計算されるとのことでheightで高さを指定するのではなく、paddingで指定すると上手くいく。
https://y-com.info/contents/?p=4309
 

ローカル環境のデータを本番環境のWordPressに移行する

プラグイン「All-in-One WP Migration」を使うと簡単にできました。
https://www.satokobo.net/1338

Discussion