メディアと文章ブロック（WordPress5.5）

視覚的にわかりやすいワードプレス動画講座はこちら

画像ブロックで画像の配置を設定できますが、「メディアと文章」ブロックではより豊富なレイアウトが可能になります。

メディアと文章ブロックを追加

上のスクリーンショットのように左上の「ブロックの追加」アイコンをクリックし、「ブロック」の中にある「メディアと文章」アイコンをクリックしてメディアと文章ブロックを追加することができます。大抵は「ブロックの追加」アイコンをクリックした際には「ブロック」のほうが表示されているはずです。

メディアと文章ブロックの詳細

「メディアと文章」ブロックです。ブロック上部にアイコン、ブロック内の左側に画像をアップロードするためのボタン、右側にはテキストを入力するための入力欄が表示されます。

メディアエリアへ画像を貼り付け

左側のメディアエリアに画像を貼り付けるには3つの方法があります。

ファイルをドラッグしてアップロード

メディアと文章ブロックの左側、メディアエリアにパソコンのフォルダの画像ファイルをドラッグします。

ファイルをアップロード

「アップロード」ボタンをクリックし、パソコンのフォルダからアップロードしたい写真を選択してアップロードします。

メディアライブラリから選択

「メディアライブラリ」ボタンをクリックすると既にWordPressにアップロードされている画像が表示されます。そこから貼り付けたい画像を選択します。

上の画像のようにメディアエリアに画像が貼り付けられました。

ブロックタイプまたはスタイルを変更

下に他の種類のブロックアイコンが表示されます。そこに表示されているブロックに変更することが出来ます。メディアと文章ブロックを作成するつもりが、途中で「やっぱり画像ブロックにしよう！」とか思ったときに利用します。

コンテンツエリアに入力

右側のコンテンツエリアにはブロックを作成してテキストを入力します。

「コンテンツ」の部分にマウスカーソルを移動してクリックすると上のスクリーンショットのように段落ブロックが表示されます。段落ブロックにテキストを入力できます。段落ブロックの詳細はこちら

段落ブロックの上には「親を選択（メディアと文章）」というアイコンが表示されます。このアイコンをクリックすると「メディアと文章」ブロックの選択に戻ります。

また、上のスクリーンショットのように段落ブロック上部左端の「ブロックタイプまたはスタイルを変更」のアイコンをクリックして「見出しブロック」「リストブロック」などに変更することも可能です。

上へ移動・下へ移動

「上へ移動」「下へ移動」をクリックするとブロックが上へまたは下へ移動します。

配置を変更

「配置を変更」では「幅広」と「全幅」を選択できます。2カラムや3カラムのテーマですと使えないのでは？と思います。デフォルトテーマでは以下のような表示になります。モニターの幅が1920ピクセルの際の表示例です。

幅広

メディアと文章ブロックを幅広で表示します。

全幅

メディアと文章ブロックを全幅で表示します。

メディアを左に表示

メディアを左に表示しコンテンツを右に表示します。

メディアを右に表示

メディアを右に表示しコンテンツを左に表示します。

垂直配置を変更

コンテンツエリアの垂直方向の配置を設定します。

縦位置を上に

コンテンツエリアの内容を縦方向の上に配置します。

縦位置を中央に

コンテンツエリアの内容を縦方向の中央に配置します。

縦位置を下に

コンテンツエリアの内容を縦方向の下に配置します。

リンクを挿入

メディアにリンクを設定できます。

URLをペーストするか入力して検索

画像に作成するリンク先のURLを入力します。WordPress内の投稿や固定ページでしたらタイトルなどキーワードを入力して検索することもできます。

メディアファイル

画像ファイルに直接リンクを作成します。上のスクリーンショットの画像はメディアファイルにリンクを作成しています。

添付ファイルのページ

アップロードし貼り付けた画像のみが貼り付けられているページへのリンクです。あまり利用することはないでしょう。

リンク設定

リンクを新しいタブで開くか？リンクのCSSクラス、rel属性を設定できます。

置換

貼り付けた画像を別の画像に置き換えることが出来ます。メディアライブラリを開いてその中から選択し直したり、改めて画像をアップロードしたり、画像のURLを編集することが出来ます。

詳細設定

一番右のアイコンをクリックすると吹き出しが表示され9個のメニューが表示されます。

ブロック設定を非表示

編集画面右側に表示されているブロック設定メニューを表示または非表示にできます。

コピー

ブロックの内容をコピーできます。コピーした内容を好きな場所にペーストできます。貼り付けるときは右クリックで「貼り付け」または「Ctrl+v」で貼り付けできます。

複製

コピーと似ていますが、複製はブロックの直下に複製されます。

前に挿入

ブロックの前に空のブロックを挿入します。

後ろに挿入

ブロックの後ろに空のブロックを挿入します。

移動

未検証

再利用ブロックに追加

「再利用ブロックに追加」をクリックすると名前を付けてブロックを保存できます。再利用ブロックに追加しておくと、このページだけでなく他のページでも同じ内容のブロックを利用できます。お問い合わせのバナーや会社概要など、複数ページで同じ内容のブロックを表示させたい時に便利です。再利用ブロックは一つを変更したとき他の再利用ブロックにもその変更が反映されます。

グループ化

複数のブロックを選択し「グループ化」をクリックすると選択したブロックをグループとして設定できます。グループごとブロックを移動したり、複製、再利用ブロックに設定、グループ化することでCSSでのデザインをより個性的にすることが可能となります。

グループ化の詳細はこちら

ブロックを削除

ブロックを削除します。

ブロック設定

色設定

ブロック全体の文字色と背景色を設定します。テキストのブロック個別の文字色の変更はコンテンツ側のブロックで設定できます。

メディアと文章の設定

「モバイルでは縦に並べる」をオン（青色）にするとスマホなどの小さい画面で見たときには縦に配置します。メディアが左の場合は上にメディア、下にコンテンツの配置になり、メディアが右の場合は上にコンテンツ、下にメディアの配置になります。

「カラム全体を塗りつぶすように画像を切り抜く」をオン（青色）にするとコンテンツの高さに合わせて画像の高さが切り取られます。

「Alt テキスト (代替テキスト)」は画像の説明を入力します。

高度な設定

「HTMLアンカー」を設定するとこのページのアンカー部分へのリンクを作成することが出来ます。

「追加CSSクラス」はCSSでスタイルが設定してあるときにそのクラスを入力します。

日本語サイト向けWordPressテーマをもっと見る