YouTubeチャンネル開設しました！
こんにちは！たくぞー(@takuzo0405)です。
この度、YouTubeチャンネルを開設しました！
やろうやろうと思って数ヶ月…。
やっと始めました。笑
僕のチャンネルでは、おもにWebデザイン初心者～中級者向けで、HTML・CSSを中心にしたコーディングスキルをお届けしていこうと考えています。
僕自身まだまだ知らないこともたくさんありますが、いっしょに学習していきましょう！
少しでもいいね！と思っていただけましたらチャンネル登録・高評価いただけますと大変嬉しいです！！
SNSリンク集のファイルデータプレゼント
そこで、僕のチャンネル開設を記念して、プレゼント企画をしたいと思います。
用意したのはSNSリンク集として使えるテンプレートファイルです。
見た目はこんな感じになっています。
もちろんレスポンシブ対応になっていて、スマートフォンでの見た目は下のボックスタイプのリンクのところが1列になっています。
僕が実際に使っているリンク集のURLを貼っておきますので、パソコンとスマートフォンで見比べてみてください。
実際の見た目はここから↓
https://takuzo-blog.com/link/
このファイルデータを無料プレゼントとして用意しました。
Instagramやtwitterだと、リンクってひとつしか貼れないので、あれ意外と不便ですよね。
ブログも見て欲しいしYouTubeも見て欲しいし…。
そんな時にこのリンク集を使って貰えたらと思います。
受け取り方法はLINE追加でOK
このSNSリンク集のHTML・CSSファイルの受け取りは非常に簡単で、僕の公式LINEを友だち追加後、「リンク集プレゼント」とひとことメッセージをください！
zip形式でファイルをお送りします。受け取った後はご自身の用途に合わせてデザインしていただいて構いません！
ただし、こちらのダウンロードファイルを元に、改変したデータも含む二次配布は禁止とさせていただきますので、そこだけご理解ください。
あくまでも、自分で使うリンク集としてダウンロードしてください。
もし他の方に紹介したい場合はこの記事をシェアしていただけたら嬉しいです。
自分好みにデザインしてみよう
さてこのファイル、HTML・CSSをある程度理解されている方であれば問題なく自分好みにデザインできると思いますが、「自分で編集するのが難しい！」という方のために基本的な編集方法を開設していきたいと思います。
本記事で解説する箇所としては、
- headタグの内容
- アイコン画像の設定方法
- SNSリンク集関連
- ボックスタイプのリンク集関連
の4つに分けて解説していきたいと思います。
ダウンロードしたフォルダの中の「index.html」をローカルで開いておきます。
そして、コードエディタでファイルも読み込んでおきましょう。
僕はVSコードを使って進めていきます。
動画のほうが分かりやすくなっているので、動画で観たい方は本記事の一番上から再生してください。
では早速やっていきましょう。
headタグの内容
ではまず「headタグの内容」から
ある程度はindex.htmlファイルにメモを入れておきましたので、こちらを参考にタイトルやdescriptionなど、ご自身のページに合わせて設定してあげてください。
この動画ではTwitterカードについて触れておこうと思います。
Twitterカードには2種類のサイズが設定できます。
「summary」と「summary_large_image」です。
見た目はこんな感じ。
summary
summary_large_image
この画像を作る場合は、
summary_large_image：1200px × 630px(1.91:1)
summary：500px × 500px(1:1)
を参考に作るとぴったり作れます。
画像が作れたら「og:image」のcontent(コンテント)のところで指定してあげれば設定完了です。
うまく反映されたかどうかはTwitterの公式サイト「Twitter Validator」で確認できます。
Twitter Validator
https://cards-dev.twitter.com/validator
で！ここにディレクトリを指定するときなのですが、今、画像を「http」のリンクで指定していますよね。
なんでか、フォルダの中の画像を指定してサーバーにアップしたらTwitterカードが設定できませんでした。
こういう書き方ですね。
images/twitter-card.png
フォルダ指定だと設定ができなくて、もし同じように設定が出来なかった場合は、WordPressなどで画像をリンク化してから指定してあげるといいと思います。
あと、なんでフォルダで指定すると設定できないのか、知っている方いましたら教えていただけると嬉しいです…！
アイコン画像の設定方法
次はアイコン画像の設定方法ですね。
「このくらい何も難しくないよ！」と思うかもしれませんが、ここ、すでに僕のリンク集をパソコンから見てくれた方は気付いた方もいると思います。
そう、カーソル合わせると画像が変わります。
地味に凝ってるんです。笑
なので、このまま2枚切り替わるように使いたい方は上にカーソルを合わせた時に変わる画像を、下に通常時の画像を指定してあげてください。
切り替わらなくていい！という方はどっちでも大丈夫なので、消すかコメントアウトしておきましょう。
SNSリンク関連
続いて、SNSリンクのところですね。
ここに関してはアイコンの変更方法とマウスオーバーしたときの色の変え方について解説していきます。
まずは、アイコンの変更方法ですが、ここはフォントオーサムを使用しています。
なので、ブラウザでフォントオーサムと検索して公式サイトからアイコンを探しましょう。
ただ、ここ一年前くらいからかな？GoogleChromeでフォントオーサムのページに行くと崩れているんですよね。
同じようなことになってしまったら、Chromeのシークレットウィンドウでフォントオーサムを検索しましょう。
ちゃんと表示されるはずです。
次は、マウスオーバーしたときの色の変え方ですね。
「style.css」を開きます。
コマンド+Fで「menu-item」と検索しましょう
ここの「menu-item:hover」の「background-color」を変えれば色を変更することが出来ます。文字色はこの上の「color」プロパティですね。
ご自身のテーマカラーに合わせて変更してみてください。
かなりオリジナリティが出て来ると思います！
ボックスタイプのリンク関連
では最後、ボックスタイプのリンクのところです。
ここは、マウスオーバーすると画像とテキストが拡大されるようにしています。
特に難しいことは無いのですが、このアニメーションのCSSだけ見てみましょうか。
「index.html」の「square-animate」というクラスでアニメーションさせています。
「style.css」で「square-animate」を見てみましょう。
こんな感じです。hoverした時に0.3秒かけて1.2倍になるようにしています。
逆に、ここを1.0以下にすると縮小することも出来ます。
ここの画像サイズは16：9で作ると丁度いいサイズで作れます。
ここでは横：1080px、縦：720pxの画像を使いました。
あと、テキストの位置調整ですね。
これは「square-text」の「bottom」プロパティで調整できます。
いまは「-10%」としていますが、「5%」にすると、真ん中に動かせます。
使う画像に合わせて調整してあげてください。
まとめ
はい、いかがでしたでしょうか？
解説に関しては基本中の基本だけをお伝えさせていただきました。
ああしたい、こうしたい、というものがあればご自由に設定してみてください。
出来上がったらTwitterやInstagramのDMやメンションで僕まで見せていただけるとすごく嬉しいです。励みになります。
では今回はここまで！
最後まで読んでいただきありがとうございました。
