シリウスにユーチューブなどの動画の挿入方法

ユーチューブなどをシリウスに貼り付ける方法

 

ユーチューブ動画を挿入したいよ〜〜〜(>_<)

 

どうしたらいいのぉ〜先生(>_<)


 

 

 

桜ちゃん、意外と簡単だよ(^^)v
簡単な方法を画像付きで教えてあげるから(^^)v


 

 

 

 

 

 

まずは、ユーチューブの動画を、PCやスマホで見やすいサイズに自動最適化(レスポンシブ化)する設定をします。

 

 

 

 

 

編集をクリックします。

 

編集ボタン画像

 

 

 

次に、スタイルシートをクリックします。

 

スタイルシート画像

 

 

 

 

スタイルシートの一番下に、

 

 

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

 

 

をコピーし貼り付けてください!

 

 

こんな感じです。↓↓

 

ユーチューブ、スタイルシート画像

 

 

 

 

 

 

 

同じような容量でスマホのスタイルシートにも貼り付けます。

 

テンプレートをクリックします。

 

ユーチューブ、スマホ、スタイルシート画像

 

 

IPhoneスタイルシート編集をクリックします。

 

ユーチューブ、スマホ、スタイルシート画像2

 

 

先ほどと同じように、

 

スタイルシートの一番下に、

 

 

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

 

 

をコピーし貼り付けてください!

 

 

 

 

 

 

 

ここからはユーチューブの貼り付け方

 

 

では、貼り付けたいユーチューブの動画を選択します。
貼り付けたい動画で右クリックします。

 

ユーチューブ画像3

 

 

【 埋め込みコードをコピー 】 を選択し、コードをコピーします。

 

すると、↓のようなコードを自動でコピーしてくれます。

<iframe width="854" height="480" src="https://www.youtube.com/embed/_-xFPzUKlNw" frameborder="0" allowfullscreen></iframe>

 

これをシリウスの記事にペースト(貼り付け)します。

 

 

シリウスの記事にペースト(貼り付け)が終わったら、先ほどのコードの前後を、

<div class="youtube">

 

</div>

で閉じます。

 

 

つまり、このような感じになります。

 

<div class="youtube">
<iframe width="854" height="480" src="https://www.youtube.com/embed/_-xFPzUKlNw" frameborder="0" allowfullscreen></iframe>
</div>

 

 

 

 

 

これでシリウスにユーチューブの貼り付けは完成です(^^)v


 

 

 

 

 

 

 

 

クラス設定の方法

 

ちなみに、毎回、
<div class="youtube">
</div>
をコピーしてペーストするのがめんどくさい方は、次のクラス設定をしておくと便利ですよ!


 

 

クラス設定をしておけば、クリック1つで、
<div class="youtube">
</div>
を自動で打ち込んでくれます。

 

 

 

 

まず、左上のSの画像をクリックします。

 

ユーチューブ画像5

 

 

次にクラス設定をクリックします。

 

ユーチューブ画像6

 

 

新規追加をクリックします。

 

ユーチューブ画像7

 

 

クラス名に

 

【 youtube 】 と入れます。

 

ユーチューブ画像8

 

 

divのボタンをクリックします。

 

ユーチューブ画像9

 

 

 

これで【 OK 】 をクリックすればクラス設定完了です。

 

ユーチューブ画像10

 

 

 

 

 

 

いざ使うとき

 

”CL指定なし”の横の 【 ▼ 】をクリックします

 

ユーチューブ画像11

 

 

youtubeを選択しクリックすればOKです!

 

ユーチューブ画像12

 

 

 

 

 

 

これで、クリック1つで、
<div class="youtube">
</div>
を自動で打ち込んでくれます。


 

 


シリウスについて 基本設定 カスタム方法 トラブル対処 購入の流れ