ブログで良く使う『コンテンツの埋め込み表示方法』のまとめ
コンテンツをよりリッチにしていく上で、写真や動画、その他コンテンツの力を借りる事は常套手段と言えます。当ブログ「Developers.IO」でも、対象テーマの解説等で頻繁に目にすることも良くある事かと思います。でも意外と人に拠っては使っていなかったり、またサイズ感がアレ？と思うようなことも時々あったりします。
そこで当エントリでは、主要なSNS、外部メディアにおける『コンテンツの埋め込み表示方法』について、簡単な操作・設定方法を踏まえて紹介したいと思います。
目次
Speaker Deck
プレゼンテーション共有サービス『Speaker Deck』で埋め込みを行うには、対象プレゼンテーション資料の右下にあるこのアイコン(箱から上向き矢印が出ているもの)をクリックし、"Embed"から取得出来ます。[Beginning]を選んで[Copy Embed Code]を押下して得られる埋め込みURLを貼り付けることで、
トップページが初期表示されている対象プレゼンテーション資料を埋め込み表示出来ます。
所定のページを表示させたい場合は、対象ページで上記と同じ操作を行い、[This Slide]を選んで[Copy Embed Code]を押下して得られる埋め込みURLを貼り付けることで、
対象プレゼンテーション資料の任意のページを初期表示させる事が出来ます。
ちなみにデフォルトでは、Speaker Deckのスライド資料はコンテンツ領域の幅いっぱいに表示させる形となります。多少強引ではありますが、下記の様に幅指定の要素を追加することで、
<div style="width:500px;"> <script async class="speakerdeck-embed" data-id="494e8961825645ae9e9596d238a9292e" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script> </div>
表示サイズを調整する事が可能です。
「Speaker Deckの埋め込み表示」については下記エントリも合わせてご参照ください。
SlideShare
こちらの『SlideShere』もプレゼンテーション資料共有サービス。Speaker Deckが登場するまではITエンジニア御用達！感のあったサービスでした。
対象プレゼンテーション資料配下の[Share]ボタンを押下。
"Embed"欄の情報を、サイズ及び表示ページを選択した上でコピーして貼り付けることで、
以下の様な形でスライド資料を埋め込み表示出来ます。
サイズの調整を行いたい場合は、埋め込みHTMLコードの下記width, heightの数値を調整すれば変更が行えます。
<iframe src="//www.slideshare.net/slideshow/embed_code/key/yogy7AGB6uJH9P" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/__john_smith__/pocai" title="PoCで終わらせない！データ分析・AI活用" target="_blank">PoCで終わらせない！データ分析・AI活用</a> </strong> from <strong><a href="//www.slideshare.net/__john_smith__" target="_blank">__john_smith__</a></strong> </div>
Gist
GitHubの管理するコードスニペットをホストするサービス『Gist』。
対象ファイルの右上部分、"Embed"となっている部分の(下記画像での)丸印で囲った部分をクリックすることで埋め込みURLが取得出来ます。
ただこの場合、貼り付けを行うと全行をそのまま表示させる形となります。2〜30行程度までであれば良さそうですが、あまりにも行数が長い場合、場所を取ってしまうので宜しくありません。
下記CSS設定を追加することで、指定の高さに表示領域を制限する事が出来ます。(ピクセル数は任意の数値を設定してください)
.gist-data{
max-height:200px;
}
上記CSS設定を踏まえた表示内容が以下。これで不要なスクロールをコンテンツ内でさせずに済みますね。
短文(文字情報、画像、動画、URL)投稿サービス『Twitter』で埋め込み表示を行う場合は、該当ツイートの右上にある下向き三角矢印をクリック。
メニューから『ツイートを埋め込む』を選択。
埋め込みコード取得ページに遷移するので、[Copy Code]ボタンを押下して埋め込みHTMLコードを取得します。
生成した情報を貼り付けた時の表示内容がこちら。サイズは固定となります。
こんな思いでブログ始めています。商売は後付け。https://t.co/luQKLHmNFr#techblogconf
— さとし? (@sato_shi) February 25, 2020
写真共有アプリケーション『Instagram』で埋め込み表示を行う場合は該当写真の三点リード(…)をクリックし、表示されるメニューのから[埋め込み]を選択。
更にウインドウが起動するので、[埋め込みコードをコピー]ボタンを押下で埋め込みHTMLコードが取得出来ます。
貼り付けた埋め込みHTMLコードの表示内容が以下。
YouTube
動画共有サービス『YouTube』で埋め込みを行う場合は、対象動画ページの[共有]をクリック。
ウインドウが起動するので、[埋め込む]をクリック。
埋め込み用HTMLコードが表示されるので、[コピー]ボタン押下でそのコードを取得します。埋め込み且つ指定の時間から再生させたい場合は[開始位置]をチェックして所定の時間を指定、その結果生成された埋め込みHTMLコードを取得します。
埋め込み表示内容がこちら。
ちなみに表示サイズを変更したい場合は、埋め込みHTMLコードのwidth, heightの数値を調整してください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/cJriNuzHdWo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Vimeo
クリエイター向け動画共有サイト『Vimeo』で埋め込み表示を行う場合、対象動画の紙飛行機アイコンをクリック。起動するウインドウに表示される『埋め込み』欄の文字列をコピーして貼り付けます。
ちなみに[オプションを表示]をクリックすると細かい制御・指定が可能です。
貼り付けた埋め込みHTMLコードの表示内容は以下。(サイズ:Responsiveを指定)
Self-service Business Intelligence for Everyone from Looker on Vimeo.
まとめ
という訳で、ブログで良く使う『コンテンツの埋め込み表示方法』のまとめでした。
当エントリで紹介したメディアの"引用"に関しては、下記エントリの「外部サービスの埋め込み」の項を合わせてお読み頂けますと幸いです。
ブログの内容をより彩りのあるものにする上で、各種SNSコンテンツの『埋め込み表示』は欠かせないものです。各種サービスや製品の情報を得る上でも重要な位置を占めますので、是非とも有効活用して行きたいものですね。
