グーテンベルグの埋め込み機能について

【Gutenberg】グーテンベルグのブロックの機能「埋め込み」の使い方

グーテンベルグのブロックの機能の中に「埋め込み」がありますが、この機能を使えば自分の記事やツイッターなどのSNS等の画像やGoogleマップなども埋め込むことができます。

記事の中に他の記事を埋め込む

やり方はダッシュボード画面左上のブロックを追加アイコンをクリックし「埋め込み」をクリックします。

一度使えば「よく使うもの」の中に入っていますが初めての場合には下にスクロールして「埋め込み」のブロックの所にあります。

下の画面のようにブロックが出てきますので記事のURLをコピーしてきます。

埋め込む記事のURLをコピーしてきます、これは記事の編集画面のパーマリンクのところでプレビューのURLを右クリックして「リンクのアドレスをコピー」で簡単にコピーできます。

アドレスを貼り付けて「埋め込み」をクリックすれば

このように記事が埋め込まれリンクが貼られています。

Twitteを埋め込んでみよう

この埋め込みの中には以下の映像以外にも数多くの物が入っています「Twitter」をクリックし

TwitteのURLを入力すれば

このようにTwitteの画面が表示されTwitteを更新すれば記事内も更新されます。

Twitteを更新すればこれも更新されていきます。

Googleマップを記事に埋め込む

記事の中にマップがあると所在地やアクセスが視覚的に分かって便利です。

Googleマップにアクセス

URLは、https://www.google.com/maps です「Googleマップ」と検索してもでてきます。

マップが出てきたらGoogleマップで検索する要領で住所や施設名などを入力して検索します。

検索した付近の地図が出てきたらメニューをクリックして「地図を共有または埋め込む」をクリック

地図を埋め込む

共有の画面が出てきますので「地図を埋め込む」の方をクリックします。

地図の大きさを選択しが大・中・小とありますのでこれを選択します。
URLをクリックして青色に反転させます。
HTMLをコピーとあるのをクリックします。

作成中の記事に帰って埋め込みをします。

Gutenbergのブロック機能で埋め込む

Gutenbergのブロックのフォーマットの中の「カスタムHTML」を使います。

挿入位置を決めたら「カスタムHTML」をクリック

URLを貼り付けたら「プレビュー」をクリックします。

「プレビュー」をするとこのように地図が表示されます。

下の地図はホッキカレーが美味しい「マルトマ食堂」の地図です。

【Gutenberg】グーテンベルグのブロックの機能「埋め込み」の使い方

このように簡単にいろんなものが埋め込まれますので皆さんもやってみて下さい。

これからまだ機能が分かりましたら更新していきます。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事