スポンサーリンク
こんにちは。マークです。
今まで、Flutterの技術ブログを書いていて、
マーク
コードの埋め込みがイマイチだなぁ・・・
ってずっと思ってました。
しかし、CodePenを使えば、
・めちゃくちゃ綺麗に埋め込める
・実際の画面も綺麗に埋め込める
・プラグインを使っていないから軽い！？
つまり最高です。
ちょっと今回はテストをかねて、この記事でやってみようかな。
CodePen × Flutterのドキュメント↓
実際に埋め込むとこんな感じ。
See the Pen
test by Maaku Saito (@makumaaku)
on CodePen.
CodePenに登録
こちらから、CodePenに登録してください。
右上のSign Upから登録できます。
Flutter Penの使用
画面左側にあるCREATE→Penのところに、Flutter Penというものがあります。
ここでFlutter Penを選択すると、コーディングできるページに遷移します。
ブログに埋め込みたいものをコーディングしてください！
WordPress(ブログ)への埋め込み
コーディングが完了したら、コーディング画面の上部のSaveボタンで保存してください。
保存が完了すると、画面の最下部に複数のボタンが表示されます。
この中のEmbed(埋め込む)ボタンを押してください。
上の画像では右から３番目ですね。
そうすると、上のような画面が出てくるので、
埋め込み時の高さを設定して(ドラッグして伸び縮みさせれます)、HTMLのコードをコピーして、ブログに埋め込むだけです。
テキストエディターの中にそのまま貼り付けるだけです。
ビジュアルエディタで見ると以下のように変な感じになっていますが、プレビューで見てみるとうまくいっていることがわかりますね！
まとめ
いかがでしたでしょうか。
CodePenを使えば、あなたの記事は最高に見やすく、わかりやすくなるはずです！
ぜひ、参考にしてください^^
スポンサーリンク
