埋め込みの極意

ブロックエディタを使うと･･･

いろんなところに

いろいろ埋め込めるよ！

  • 記事内
  • サイドバー
  • モバイルメニュー
  • フッターウィジェットエリア
  • 記事上
  • 記事下共通

などなど

SNS埋め込み

インスタ埋め込み～HTMLブロックを使う方法～

Instagram
www.instagram.com

そのまま貼ると左寄り･･･
それにちょっと幅が広すぎるかな･･･

中央に寄せるにはCSSが必要

<style type="text/css">
.instagram-center {
    margin:0 auto;
    max-width: 350px;
}
</style>
<div class="instagram-center">（ここにHTMLタグを入れる）</div>

インスタ埋め込みはプラグインを使うといいですよ

※ただしプラグインのお話はまた別の機会に･･･

ご紹介だけ。
はにーも使っているプラグインはこちらです。

Smash Balloon Social Photo Feed
https://ja.wordpress.org/plugins/instagram-feed/

Facebook 埋め込み

埋め込み投稿 – ソーシャルプラグイン – ドキュメンテーション – Meta for Developers
developers.facebook.com

Twitter 埋め込み

Twitter Publish
publish.twitter.com

直接リンクを貼った場合

URLから判断して適切なブロックに変換してくれます。
ChatGPT
A conversational AI system that listens, learns, and challenges
chat.openai.com
ペライチ｜無料から使える簡単ホームページ作成ツール
ホームページ作成ツールのペライチなら、オンライン決済や予約にも対応した高品質なホームページが誰でも簡単に低価格で作成できます。もちろん専門知識やプログラミング…
peraichi.com

埋め込みブロック

URLから判断して適切なブロックに変換してくれます。
基本的には 「直接URLを貼った場合」 と同じ挙動をします。
ChatGPT
A conversational AI system that listens, learns, and challenges
chat.openai.com
ペライチ｜無料から使える簡単ホームページ作成ツール
ホームページ作成ツールのペライチなら、オンライン決済や予約にも対応した高品質なホームページが誰でも簡単に低価格で作成できます。もちろん専門知識やプログラミング…
peraichi.com

YouTubeブロック

Vimeoブロック

HTMLブロック

Canva

■ 編集用URL

https://www.canva.com/design/DAFgr8VaMOQ/Q0x0vQZBuzsBx_aJpgJ41A/edit?utm_content=DAFgr8VaMOQ&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

■ 埋め込まれた Canva (プレゼンテーション)

Honey createさんによる230516__埋め込み

■ 埋め込みタグ取得の手順

■ キャプションを削除したもの

以下を削除しています
Honey createさんによる<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFgr8VaMOQ&#x2F;view?utm_content=DAFgr8VaMOQ&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">230516__埋め込み</a>

■ 埋め込まれた Canva (画像)

■ 埋め込まれた Canva (動画)

StandFM

Googleマップ

Google マップ
www.google.com

Googleフォーム

■ 編集用URL

【目安箱】ワークショップで取り上げてほしいことやWordPressに関する素朴な疑問など、どしどしお寄せください！
WordPress のここが難しいんだよねーこういうところでつまづいちゃうんだよねーこんな特集を組んでほしいなーなどなど。「こんなこと聞いて大丈夫なんだろうか」なん…
docs.google.com

■ 共有用URL

【目安箱】ワークショップで取り上げてほしいことやWordPressに関する素朴な疑問など、どしどしお寄せください！
WordPress のここが難しいんだよねーこういうところでつまづいちゃうんだよねーこんな特集を組んでほしいなーなどなど。「こんなこと聞いて大丈夫なんだろうか」なん…
docs.google.com
中央寄せのタグを追加しています
<div style="text-align:center;">（ここにHTMLタグを入れる）</div>

Googleカレンダー

中央寄せのタグを追加しています
<div style="text-align:center;">（ここにHTMLタグを入れる）</div>

■ 埋め込みタグ取得の手順

アップロードしたメディア

アップロードした動画

アップロードした音声

【おまけ】カードにしたくない場合

URLやテキストにリンクを貼ります。

詳細とお申し込みは▼こちらからどうぞ。
≫ https://peraichi.com/

https://peraichi.com/

ペライチ｜無料から使える簡単ホームページ作成ツール
ホームページ作成ツールのペライチなら、オンライン決済や予約にも対応した高品質なホームページが誰でも簡単に低価格で作成できます。もちろん専門知識やプログラミング…
peraichi.com

詳細はこちら
https://peraichi.com/

　https://peraichi.com/

6/3 (土) 13:00～Microsoft本社で開催されるイベントに出展します！
≫ イベント詳細を見る
≫ オンラインで参加する
≫ 現地会場へ遊びに行く