【制作Tips】YouTubeのオリジナルフォローボタンの作り方

こんにちは（・∀・）

以前インスタグラムのフォローボタンの作り方【制作Tips】インスタグラムのオリジナルフォローボタンの作り方をご紹介しましたが、今回はYouTubeの登録ボタンの作り方をご紹介します。

ちなみにYouTubeには公式の登録ボタンもあります。

ボタンを設定する

ボタンのデザイン部分を画像にすればボタンは簡単に作れますが、自作の画像は使わずにテキストだけでもそれなりのボタンを作ることができます。

しかし、画像が無いと物足りないので、今回こちらのサービスを使用します。

https://fontawesome.com/

インスタグラムのフォローボタンを作った時にも使ったことがあります、アイコン画像を無料で使わせてくれるサイトです。
こちらのサービスを使ってアイコン画像を表示させます。

使い方は簡単。

このページで使いたいアイコンを探します。
検索窓が表示されるので使用したいサービス名、この場合は「YouTube」と入力して検索します。 見つかったら、該当するアイコンをクリック。
「Start Using This Icon」というボタンがあるので、それをクリック。

<i class="fab fa-youtube"></i>

するとCSSコードが表示されるので、それをコピーしてaタグにclass指定します。

class="fab fa-youtube"

すると...

Result 3

公式のボタンっぽくなりましたね⁉️

*このボタンをクリックするとweb design labのYouTubeチャンネルが開きます。サンプル用の動画が置いてあるだけなので、あまり再生されてないと思ってましたが、最初の頃に投稿した動画は2,000近く再生されててちょっとビックリしましたw

HTML 3

<p class="yt-btn-3"><a href="https://www.youtube.com/channel/チャンネルID?sub_confirmation=1" target="_blank" rel="noopener" class="fab fa-youtube"> subscribe</a></p>

CSS 3

.sample-demo .yt-btn-3 {
border-radius: 5px;
padding: 0px 10px 2px 10px;
background: #c4302b;
display: inline-block;
cursor: pointer;
}
.sample-demo .yt-btn-3:hover {
opacity: 0.8;
}
.sample-demo .yt-btn-3 a {
color: #fff;
font-size: 14px;
}

この設定では、ボタンを押して自分のYouTubeページを開くと同時にチャンネル登録を促すダイアログが表示されます。そのダイアログは必要無いと言う場合は、チャンネルIDの後「?」以降を削除します。

https://www.youtube.com/channel/チャンネルID?sub_confirmation=1

↓

https://www.youtube.com/channel/チャンネルID

ちなみに自分のYouTubeチャンネルのチャンネルIDの調べ方を簡単に解説。

YouTubeStudio → カスタマイズ → 基本情報を開くと「チャンネル URL」という項目があります。そこに表示されているURLの「channel」から後ろの文字列がチャンネルIDになります。

そうそう、FontAwesomeというサービス、アイコンを使用するにはアイコン自体をダウンロードして使用するか、こちらのCDNコードを</head>タグの前に貼り付ける必要があります。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

もう1パターン作ってみます❗️
こちらのサンプルではチャンネル登録を促すダイアログは出ないようにします。

Result 4

HTMLのa要素のテキスト「subscribe」を削除して、アイコンだけのボタンにしてみました。こちらのボタンも公式っぽいボタンになりました。

*このボタンをクリックすると当サイト管理人が運営しているキャンプ系YouTubeチャンネル「asobulab」のページが開きます。キャンプ等アウトドアに興味があればぜひ遊びに来てください。

HTML 4

<p class="yt-btn-4"><a href="https://www.youtube.com/channel/チャンネルID" target="_blank" rel="noopener" class="fab fa-youtube"></a></p>

CSS 4

.sample-demo .yt-btn-4 {
border-radius: 5px;
padding: 5px 10px 3px 10px;
background: #c4302b;
display: inline-block;
cursor: pointer;
}
.sample-demo .yt-btn-4:hover {
opacity: 0.8;
}
.sample-demo .yt-btn-4 a {
color: #fff;
font-size: 22px;
}

いかがでしたでしょうか、こちらのサービスを使用すれば自分でアイコンを作る手間が省けるので時間の節約になりますね。