WordPressのメディアブロックとテキストブロックの使い方

WordPressのメディアブロックとテキストブロックの使い方

メディアとテキストブロックは、WordPressのデザインにおいて、多くのユーザーが気づいていなかったギャップを埋めてくれる。もちろん、画像、動画、テキストに別々のブロックを使うこともできますが、それらをきちんと配置することはできません。 並んで しばしば、カラム、アライメント、レイアウトの曲芸になってしまう。 

このブロックは、手間をかけずにメディアとテキストを相互補完させたいと考える人たちのための、ノーセンス・アンサーとして登場する。

料理ブロガーがレシピの写真と説明書を見せたり、企業が新商品の詳細を横で紹介したり、あるいはストーリーテラーがビジュアルと言葉を組み合わせて読者を引き込んだりすることを考えてみよう。 

メディアとテキストブロックを使えば、数回のクリックでこのようなことが可能になる。

このガイドでは、あなたがすぐにブロックをマスターし、コンテンツをさらにレベルアップできるよう、すべてを説明します。


ステップ1:メディアとテキストブロックを追加する

ブロックを追加したいWordPressの投稿またはページを入力します。をクリックします。 + ブロック・インサーター アイコンをクリックしてブロックライブラリを開きます。タイプ 「メディアとテキスト を検索バーに入力し、それを選択してブロックを追加します。また /メディア を改行してEnterキーを押すと、ブロックが素早く挿入される。

メディアとテキスト・ブロックを追加する

ステップ2:メディアを挿入する

ブロック内で Upload をクリックして新しい画像を追加します。 Media Libraryまたは 特集画像 すでに設定されている場合は

メディアを挿入する

ステップ3:テキストの追加

メディアの横にあるエリアにテキストを入力します。また + ブロック・インサーター をテキスト・セクション内に追加する。

テキストの追加

ステップ4:ブロックをカスタマイズする

カスタマイズのプロセスを3つに分けました。 

4.1 ツールバーでカスタマイズする

ブロックの上にあるツールバーから、ブロックタイプの変更、ブロックのドラッグ、上下の移動、幅と配置の調整、メディアの位置の左右切り替え、メディアへのリンクの追加や置き換えができる。

ツールバーでカスタマイズ

4.2 テキストをカスタマイズする

テキストコンテンツに移動してクリックし、上のツールバーにアクセスします。そこから、テキストを見出し、リスト、引用などのさまざまなブロックタイプに変換したり、太字、斜体、取り消し線、インラインコードなどの書式オプションを適用したり、テキストの配置を左、中央、右に調整したり、選択したテキストにハイパーリンクを追加したりできます。この例では、テキストを「引用」に変換しています。 

テキストのカスタマイズ

4.3 ブロック設定によるカスタマイズ

右側のサイドバーにある「ブロック設定」パネルを開いて、さらに多くのカスタマイズオプションを探します。ブロック設定 一般設定モバイルでスタックを有効にし、画像をカラムいっぱいに切り抜き、メディア幅を調整し、代替テキストを追加し、解像度を選択することができます。 

一般タブでカスタマイズ

ここで、スタイルタブに移動すると、テキストと背景色、タイポグラフィ、寸法、ボーダー設定を変更できる。

スタイルタブでカスタマイズ

ステップ6:プレビューと公開

ブロックを確認し、プレビューをチェックして、ブロックがページや投稿でどのように見えるかを確認します。必要に応じて最終調整をしてください。問題がなければ、「公開」または「更新」をクリックして変更を保存します。

プレビューと出版

結論

メディアとテキスト」ブロックは、メディアとテキストが完璧に調和し、コンテンツが自然に流れるようにするために導入されました。別々のブロックをつなぎ合わせたり、レイアウトに悩んだりする代わりに、このブロックを使えば、どんなデバイスでも見栄えのするサイド・バイ・サイドのデザインを素早く確実に作成できます。この記事をじっくり読んで、各ステップを理解し、自信を持って制作を始めてください。



テーブルバーグ・チーム