YouTubeのチャンネル登録ボタンをデザインして設置する方法

※2015年7月23日追記：
この方法は、「ボタンを改変して使ってはいけない」というYoutube側の規約に抵触する危険性があります。
現在は画像の作成は行っていないため、あくまでも参考までにご覧ください。

2014年は動画が本格的にブレイクするということで、YouTube のチャンネルを持つ人も増えてきたようです。

私もサイドバーにチャンネル登録ボタンを追加してみました →

こんな風にデザインして設置する方法が知りたいという声を伺ったので、動画と文章でご説明しますね。

ちなみに、ネットビジネス・アナリストの横田秀珠さんのブログでもご紹介されています。チャンネルの紹介動画を置いて訴求するなどのコツもありますので、どうぞご覧ください(^_^)

参考：YouTubeチャンネル登録ボタン(公式)をHPに設置する方法 | ネットビジネス・アナリスト横田秀珠

１．YouTubeチャンネル登録用ボタンを設置しよう

YouTube のチャンネル登録ボタンは下記のページから取得できます。

英語ですが、下の方に行くと直感的にわかる画面がありますので、ご自分のチャンネルIDを設定することでボタン設置用のタグを取得することができます。

参考：YouTube Subscribe Button – YouTube — Google Developers

今回はサイドバーのようなデザインを前提にしていますので、デフォルトの設定を選びましたが、必要なければ他のレイアウト（full）を選んでも良いと思います。

こちらも実際の作業画面を動画で説明しましたので、不安な方はご覧ください。

２．チャンネル登録ボタンの背景に入れるための画像を作ろう

チャンネル登録ボタンを載せるための、一枚の画像が必要です。

コスギスの場合は右側のサイドバーに載せましたので、右のような画像を幅240ピクセル×高さ120ピクセルで作りました。

ポイントは、チャンネル登録用のボタンを置くスペースとして、120ピクセル×20ピクセルくらいをあけておくことですね。（fullの場合は195×50くらい）

この画像が作れないという方は、オンラインツールを使ってバナー用画像を作るための手順を説明しましたので、こちらも参考にご覧ください。

使用ツール：ボタン素材 自動生成サイト – ButtonMakerアフラット

なお、もうちょっとオリジナルなものが欲しいけど自分じゃ作れないなあ…という方は、500円分の Amazon ギフト券でお作りしますよ。その旨のメッセージを沿えて contact@kosgis.com へご相談ください。
※こちらはもう行っておりません。

３．チャンネル登録用ボタンをデザインしよう

さて、ボタンもできて画像もできたので、後はこの画像をボタンの背景に置くだけです。HTMLタグとCSSを使って設定しますよ。

下記にWordPress を使用した場合の作業動画でご説明しました。別に WordPress でなくても設置できます。

①まずは「メディア」にチャンネル登録用画像をアップロード

メディア＞新規追加　で上記で作った画像をアップロードします。
テーマファイルに画像用フォルダがある場合など、FTPで任意の場所にアップしてもいいですよ。

どちらにしても、画像のURLがわかるようにしておいてくださいね。

②「外観」のサイドバーでHTMLとCSSで整形

外観＞テーマ編集　でサイドバーを選びます。下記のソースを使用していますので、適宜変更してくださいね。

• width:240px; ← 画像の幅
• height:120px; ← 画像の高さ
• top:88px; ← チャンネル登録ボタンの上からの位置
• left:110px; ← チャンネル登録ボタンの左からの位置

<a href="［ご自身のYouTubeチャンネルURL］" style="display:block;background:url(［画像ファイルのURL］) no-repeat;width:240px;height:120px;position:relative;margin:1em 0;">
	<div id="side-youtube-btn" style="top:88px;left:110px;position:relative;">
		<div class="g-ytsubscribe" data-channelid="［ご自身のチャンネルID］" data-layout="default" data-count="default"></div>
	</div>
</a>

上記では直接スタイルシートを記入していますが、HTMLとCSSがわかる人向けのソースはこんな感じです。下記の場合、画像はテーマフォルダにアップしていますが、適宜パスを変えてくださいね。

#side-youtube-bg { display:block; background:url(./img/btn_youtube.png) no-repeat; width:240px; height:120px; position:relative; margin:1em 0; }
#side-youtube-btn { top:88px; left:110px; position:relative; }

<a id="side-youtube-bg" href="http://www.youtube.com/user/kosgisChannel">
<div id="side-youtube-btn">
<div class="g-ytsubscribe" data-channelid="UCw2HxNwUlvZ687i6TcanKHQ" data-layout="default" data-count="default"></div>
</div>
</a>

これで保存して、画面をリロード（再読み込み）すれば表示されるかと思います。

チャンネルボタンが表示されない場合は？
YouTube のチャンネル登録ボタンのコードを再度コピーしなおしてみましょう。

画像が表示されない場合は？
画像のURLが間違っている可能性がありますので、確認してみてください。

 

今回はちょっと技術的な内容ですが、わかる方はコピペでOKです。
わからない方はそもそも本業に力を入れていただくべきなので、わかる人に頼んじゃったほうが早いですよ♪