hirolog123のwot備忘録

World of Tanksの備忘録

【Twitch配信】ブログにTwitchチャンネルウィンドウを張り付けて表示させてみよう^q^

f:id:hirolog123:20180722181853p:plain

戦車長の皆さん!GoodGameしてますか!!

さて、今回はTwitch配信をブログで表示する方法です^q^

ゲーム系のブログを見ると配信画面を表示されていることってありますよね。

実は簡単にできるのでご紹介いたします^q^

戦車猫のブログは「はてなブログ」なので、はてなブログを例にとって説明します。

もちろん他のウェブサービスでも同じですのでご安心くださいな。

それでは一緒に見ていきましょう!

 

【Twitch配信】ブログにTwitch配信を設定

 

Twitchウィンドウのリンクを取得

まず、Twitchの配信画面である「チャンネル」に移動します。

f:id:hirolog123:20180722182334p:plain

 

 

配信画面の下段にある「シェアボタン」をクリック

f:id:hirolog123:20180722182435p:plain

 

 

シェア関係が表示されます。

f:id:hirolog123:20180722182528p:plain

 

 

Twitchチャンネルのコードをコピー^q^

f:id:hirolog123:20180722182815p:plain

チャンネルのコードはHTMLです。

あとはこれを所定の場所に張り付けるだけでOK^q^

 

 

Twitchチャンネルをブログに表示させる方法

ここからは「はてなブログ」を例にとってすすめていきます^q^

今回は「記事中にTwitchチャンネルを表示させる方法」と「サイドバーに表示させる方法」をご紹介します。

 

ブログに表示させる方法

f:id:hirolog123:20180722183203p:plain

 

 

「HTML編集」をクリック

f:id:hirolog123:20180722190057p:plain

 

 

先ほどコピーしたTwitchチャンネルのコードを張り付けるだけでOK

f:id:hirolog123:20180722190157p:plain

 

 

「編集 見たまま」に戻ればこの通り^q^

f:id:hirolog123:20180722190242p:plain

記事に表示させる方法は以上です。

 

 

 

サイドバー等に表示させる方法

「デザイン」をクリック

f:id:hirolog123:20180722183235p:plain

 

 

「スパナマーク」をクリック

f:id:hirolog123:20180722183322p:plain

 

 

「サイドバー」をクリック

f:id:hirolog123:20180722183400p:plain

 

 

「+モジュールを追加」をクリック

f:id:hirolog123:20180722183437p:plain

 

 

下の方にある「</>HTML」をクリック

f:id:hirolog123:20180722183520p:plain

 

 

あとは先ほどコピーしたTwitchチャンネルのコードを張り付けるだけでOKです^q^

f:id:hirolog123:20180722183717p:plain

 

 

Twitchチャンネルのウィンドウサイズの変更

ここからは個別設定になります。

初期設定では「幅620×高さ378」というサイズなので、ブログの記事画面では問題ありませんが、サイドバーだと大きすぎると思います。

ということでサイドバーの間隔によって調節してください。

戦車猫の環境では「幅(width)300×高さ(height)200」にしています^q^

f:id:hirolog123:20180722184001p:plain

 

 

まとめ

いかがでしょうか。

配信は簡単にできますので、どんどん流行らせていきたいですね~^q^

他にも興味があればわかる範囲で記事にしますので、コメントくださいな~^q^