<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です。
わからない方はそもそも本業に力を入れていただくべきなので、わかる人に頼んじゃったほうが早いですよ♪

YouTubeで小さく稼ぐ ~再生回数2億回の達人が教える、撮った動画をお金に変える方法~

YouTubeかんたん使いこなしハンドブック―スマートフォン/SNS対応版

この記事を書いた人

小杉聖

1978年、新潟県南魚沼市生まれ、長岡市在住。旦那と息子と娘ラブな同居嫁。
“ビジネスは人と人とのコミュニケーション”をミッションに、WordPressを活用したウェブ制作を行なっており、無料勉強会も毎月開催しています。
ウェブ解析による改善提案も行なっているものの、心理学に基づいたコミュニケーション分析により、手段よりもヒトのパフォーマンスアップに注力しています。長所を伸ばすコーチングのご相談はお気軽に。
- WordCamp Niigata 2019 実行委員長
- ウェブ解析士マスター（ウェブ解析士アワードにて4年連続受賞）
- 米国ギャラップ社認定ストレングスコーチ
- 交流分析士（コミュニケーション心理学の理論）

記事一覧

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

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

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

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

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

この記事を書いた人

小杉 聖

小杉聖