CodePenでFlutterをWordPressに埋め込む方法

所有時間1分

今回はCodePenでFlutterをブログ(Wordpress)に埋め込む方法について紹介します。

See the Pen Flutter 埋め込み by Tsunagu (@Tsunagu) on CodePen.

こんな感じでFlutterを埋め込むことができます。

目次

準備(CodePenに登録)

Codepen登録1

CodePenにまだ登録していない方は先に無料登録をする必要があります。(既に登録している方は読み飛ばして大丈夫です)

まずはCodePen公式サイトを開いて「Sign Up for Free」をクリック。

Codepen登録2

登録はTwitter、GitHub、Facebook、メールのいずれかで可能です。メールで登録する場合は、名前、ユーザーネーム、Email、パスワードを入力し「Submit」をクリック。

これでCodePenの登録は完了です。

Flutterをブログ(Wordpress)に埋め込む

CodepenでFlutterコードを埋め込む1

CodePenにサインインした状態で、こちらのリンクをクリックし「Open Flutter Editor」をクリック。

CodepenでFlutterコードを埋め込む2

次に、埋め込みたいFlutterコードを書いて「Save①」で編集を保存し、「Embed②」をクリック。

CodepenでFlutterコードを埋め込む3

すると埋め込みコードの設定画面が表示されるので、左サイドで埋め込み表示の設定をします。埋め込み設定が済んだら右サイドで埋め込み用コードをコピーします。

WordPressを使用している方も「HTML(Recommended)」でコードをコピーして、ブログの「カスタムHTML」にペーストすればOKです。

See the Pen Flutter 埋め込み by Tsunagu (@Tsunagu) on CodePen.

以上です。

URLをコピーする
URLをコピーしました!
目次
閉じる