ファンサイトを作りながら学ぶWeb開発 -画像とツイートの埋め込み-
前回は以下のようなHTMLで文字だけのページを作りました。今回はもう少しWebっぽく見える要素を追加してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ももんご</title>
</head>
<body>
<p>大すこ</p>
</body>
</html>画像を表示する
HTMLには様々な要素が定義されていて、それを組み合わせてページを作ります。画像を表示させる場合は<img>タグを使います。前回作ったファイルに対して以下のように<img>タグを追加してみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ももんご</title>
</head>
<body>
<p>大すこ</p>
<img src="https://img.nogizaka46.com/www/member/img/oozonomomoko_prof.jpg">
</body>
</html>これをブラウザで開くとこんな表示になります。<img>タグのsrc属性は表示する画像データを指定するものです。上記では乃木坂46公式サイトのプロフィールページにある画像のリンク先（URL）を指定しているため、その画像が表示されました。
ツイートを埋め込む
続いてツイートです。（Twitterのアカウントがなくてもできます）ここでは乃木坂46公式のツイートを例にするため、 まずはじめに https://twitter.com/nogizaka46 にアクセスしてお気に入りのツイートを探してください。
いいツイートを見つけたら右上にある「...」ボタンを押してください。
「ツイートを埋め込む」というボタンが出てきたらクリックします。
すると別タブが起動して以下のような画面が表示されるので「Copy Code」を押してください。
Copied!のメッセージが出たらOKです。これでクリップボードにツイートを埋め込むためのHTMLコードがコピーできました。
先ほど追加した<img>タグの下にペーストしましょう。かなり長いコードですが気にせず保存してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ももんご</title>
</head>
<body>
<p>大すこ</p>
<img src="https://img.nogizaka46.com/www/member/img/oozonomomoko_prof.jpg">
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日1月24日(日)20:05頃〜、NHKラジオ第1「らじらー！サンデー」に、<a href="https://twitter.com/hashtag/%E5%A4%A7%E5%9C%92%E6%A1%83%E5%AD%90?src=hash&ref_src=twsrc%5Etfw">#大園桃子</a> がリモート生出演します！<br>みなさま、ぜひお聴きください！<a href="https://twitter.com/hashtag/nhk%E3%82%89%E3%81%98%E3%82%89%E3%83%BC?src=hash&ref_src=twsrc%5Etfw">#nhkらじらー</a><a href="https://twitter.com/hashtag/%E4%B9%83%E6%9C%A8%E5%9D%8246?src=hash&ref_src=twsrc%5Etfw">#乃木坂46</a><a href="https://t.co/jNl7iFSWqU">https://t.co/jNl7iFSWqU</a> <a href="https://t.co/FCirjhgmgV">pic.twitter.com/FCirjhgmgV</a></p>— 乃木坂46 (@nogizaka46) <a href="https://twitter.com/nogizaka46/status/1353293467850477568?ref_src=twsrc%5Etfw">January 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>こちらのHTMLファイルをブラウザで開くと、以下のようにツイートが埋め込まれているはずです。
Twitterのほか、FacebookやInstagramではWeb表示用のHTMLを自動的に生成してくれます。なので今回紹介したとおり簡単にWebサイトで表示できます。
まだまだ見た目はシンプルですが、画像やツイートを埋め込むだけでもそれっぽく見えますよね？
次回はCSSを使ってもう少しデザインを整えていきたいと思います。
サポートいただいた費用はすべて「ももさいと」のサーバやドメインの管理費用に充てます。桃子さんの生写真やグッズに充ててしまったらごめんなさい...。