アメブロカスタマイズ Ame Book

Ame Bookではアメーバブログのカスタマイズに役立つ情報を紹介します


テーマ:

アメブロ背景YouTube


背景にYouTubeを設置するとインパクトあるサイトが簡単に作成できます。アメブロのデザイン「カスタム可能」のシンプルなスタイルでも一気にサイトがオシャレになります。

YouTube動画は自動再生になってますのでサイトが表示したら動画が自動で再生されます。又記事をスクロールしても動画は移動されないので常に動画が背景になります。



アメブロの背景にYouTubeを設置する方法

背景にYouTubeを設置する方法はgoogleなどで検索するとjQueryプラグインなどを使った方法とか色々あるみたいですが、ここでは単純にプラグインは使わずに
jQueryとスタイルシートだけで設置する方法を紹介します。

まずはYouTubeに行き設置したい動画を探します。
設置したい動画のアドレスの所に動画のIDがあるのでそれをコピーしてメモ帳などに貼り付けて置いてください。

動画ID


下記のコードをコピーしてフリープラグイン貼り付けてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {$('.skinBody'). 
before('<iframe style="z-index: -1;min-width: 1024px;position: fixed;" width="100%" height="100%" src="http://www.youtube.com/embed/dnH977xKcz8?rel=0&autoplay=1&loop=1&controls=0&wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>');
 });
</script>


貼り付けたら上記コードの赤い文字の所が動画IDになりますので、それを設置したい動画IDに替えます。

これでアメブロの背景にYouTube動画が表示されます。

*jquery.min.js がすでにプラグインにあるかたは<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>のコードは必要ありません。

次はアメブロの記事部分などの白背景を半透明するためのスタイルシートです。



CSS編集用デザイン用の追加スタイル

下記のコードを「デザインの変更」→「cssの編集」のスタイルシートに貼り付けます。
.skinContentsArea,.skinMenu,.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus,.skinMessageBoard,.skinArticle,.skinMenuBody,.skinBgColor,.skinBaseBgColor,.skinBlock
{background: rgba(255,255,255,0.3) !important;
}

.skinBody{background: none !important;
}

スタイルシートは「カスタム可能」用にスタイルが設定してあります。
自分でスタイルシートがカスタマイズできる方は他のデザインでも大丈夫だと思います。

※background: rgba(255,255,255,0.3) !important;と書いてある所は記事などの背景色を白の半透明にしているコードになります。
255,255,255 が白色になり0.3が透明度です。例えば黒で透明度を半分にしたい場合は
background: rgba(0,0,0,0.5) !important; みたいな感じになります。



※CSS編集用デザイン以外では[ CSSの編集 ]が出来ないので下記のコードをフリープラグインに追加してくだい。
<style type="text/css">
.skinContentsArea,.skinMenu,.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus,.skinMessageBoard,.skinArticle,.skinMenuBody,.skinBgColor,.skinBaseBgColor,.skinBlock
{background: rgba(255,255,255,0.3) !important;}
.skinBody{background: none !important;}
</style>

フリープラグインに追加




アメブロの背景にYouTubeを設置した時の欠点

簡単にインパクトのあるサイトが作成できますが、欠点もあります。
  • パソコンの環境によってはパソコンに負担が掛かると思います。
  • インターネットの通信速度が遅い環境だとサイトがうまく表示されないと思います。
  • 古いバージョンのブラウザでは上手く表示しないかも知れません。
  • 人によっては動画が邪魔に思える人もいるかもしれません。
  • 音が消せないためサイトを見るのにうるさく感じる人もいるかもしれません。
  • IEだとループ再生などのパラメーターが使えないみたいです。又広告が入っている動画でもループ再生しないみたいです。
  • 色んなサイトで試していないため不具合があるかも知れません。

アメブロの背景にYouTubeを設置する方は以上のような事をご理解いただき設置してください。

AD
いいね!した人  |  コメント(65)

[PR]気になるキーワード