【WPブロックエディタ】画像に吹き出しをつけよう

5 min

WordPressの記事内で、画像の説明などをしたいときに使うと便利なふきだしです。

WordPress ブロックエディタの標準ブロック「メディアと文章」を使用しているのでほぼテーマに関係なく使えます。

ふきだし右
表示確認テーマ
  • Cocoon
  • JIN
  • SANGO
  • Snow Monkey
  • SWELL
  • THE SONIC

「メディアと文章」をふきだしに

WordPress の「メディアと文章」は文章と画像がセットになったブロックで、この文章部分を吹き出しに変えます。

通常の「メディアと文章」はこのような表示になります。

使いやすいメディアと文章
  • 文章を画像の左か右に配置できる。
  • 文章を上中下揃えにすることができる。
  • スマホで表示すると、画像の上か下に表示される。

PCでのふきだし表示

文章を右側に配置(標準)

文章を左側に配置

画像左

文章を右側上に

右上

スマホでは文章が上下に表示

文章を右にするとスマホでは下に

スマホ上

文章を左にするとスマホでは上に

スマホ下

style.css に追記

まずは、子テーマの style.css に追記編集します。

style.css
/*--------------------------------------
メディアと文章吹き出し
--------------------------------------*/
.fukibox.wp-block-media-text {
    margin-bottom: 1.5rem;
}

.fukibox .wp-block-media-text__content  {
    position: relative;
    margin-left: 24px;
	padding: 16px;
	border: 3px solid #eee; /*枠色*/
	border-radius: 16px;
}

.fukibox.has-media-on-the-right .wp-block-media-text__content  {
	margin-left: 0;
	margin-right: 24px;
}

.fukibox .wp-block-media-text__content::before {
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 16px;
	height: 16px;
	background: #fff; /*背景色に合わせる*/
	border: 3px solid #eee; /*枠色*/
	border-right-color: transparent;
	border-top-color: transparent;
	content: "";
}

.fukibox.has-media-on-the-right .wp-block-media-text__content::before  {
	left: unset;
	right: -11px;
	transform: translateY(-50%) rotate(-135deg);
}


.fukibox .wp-block-media-text__content > p {
	margin-bottom: .5rem;
}

@media (max-width: 600px) {
	.fukibox .wp-block-media-text__content {
		margin-left: 0;
		margin-top: 24px;
	}

	.fukibox.has-media-on-the-right .wp-block-media-text__content {
		margin-top: 0;
		margin-bottom: 24px;
		margin-right: 0;
	}

	.fukibox .wp-block-media-text__content::before {
		position: absolute;
		top: -11px;
		left: 50%;
		transform: translateX(-50%) rotate(135deg);
		border-right-color: transparent;
		border-top-color: transparent;
	}

	.fukibox.has-media-on-the-right .wp-block-media-text__content::before {
		top: unset;
		left: 50%;
		bottom: -11px;
		transform: translateX(-50%) rotate(-45deg);
	}
}

記事に背景色(白以外)がある場合は、ふきだしの角の部分の色が浮いてしまうので「/*背景色に合わせる*/」の部分を背景色と同色に設定してください。

投稿画面にも反映したい

ここは飛ばしてもOKです。WordPressの記事投稿画面でもふきだしを表示したい方だけ設定してください。

子テーマ内の editor-style.css に以下のコードを追記します。editor-style.cssの使い方は省略するので調べてみてください。

editor-style.css
/*--------------------------------------
メディアと文章吹き出し editor-style
--------------------------------------*/
.fukibox .wp-block-media-text__content  {
    position: relative;
    margin-left: 24px;
	padding-left: 16px;
	border: 3px solid #eee;
    border-radius: 16px;
}

.fukibox.has-media-on-the-right .wp-block-media-text__content  {
	margin-left: 0;
	margin-right: 24px;
}

.fukibox .wp-block-media-text__content::before {
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 16px;
	height: 16px;
	background: #fff;
	border: 3px solid #eee;
	border-right-color: transparent;
	border-top-color: transparent;
	content: "";
}

.fukibox.has-media-on-the-right .wp-block-media-text__content::before  {
	left: unset;
	right: -11px;
	transform: translateY(-50%) rotate(-135deg);
}

使い方

投稿画面で新規ブロックを「+」ボタンで追加します。メディアと文章が表示されない場合は検索欄に「メディア」と入れると出てきます。

メディアと文章を選択。

文章の位置はは左右、上中下にできるので好きに配置します。

「メディアと文章」を選択した状態で、投稿画面右側メニューの「ブロック > 高度な設定 > 追加CSSクラス」に以下を記入してください。右のメニューがない場合は、右上の歯車アイコンを押すと出てきます。

追加CSS
追加CSSクラス

fukibox

ふきだしの文字サイズが標準では「大」になっているので「標準」に変更するとよさそうです。

パターンや再利用ブロックに登録

再利用ブロックやパターンにひな形を作っておくと、このブロックを呼び出すのが簡単になります。

コードをコピー後、パターンや再利用ブロックの登録画面で Shift + Ctrl + Vを同時押しして貼り付けてください。

Macの場合は Shift + + V

コード
<!-- wp:media-text {"className":"fukibox"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile fukibox"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"ふきだしの文章…"} -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

参考

@bearface18

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。