アルム＝バンド 実験サイトを Github Pages で作成した際に画像素材とダミーのテキストデータがほしくなったので使用方法をメモ。
成果物
- Page: Home – Broken Strawberry Shortcake
- Repository: GitHub – arm-band/test-broken-strawberry-shortcake: ブロークングリッドの実装テストです。
まずは成果物を。ブロークングリッドの実装方法について色々なパターンを探っていました。
Unsplash
Unsplash は有名どころの画像素材サイトですね。特に今回注目したのは API 経由で画像を利用できること。
それというのも、今回のようなケースでは
- 実験なので Github Pages で機能的には十分 (わざわざ別途ホスティング用のサーバやサービスを使いたくはない)
- 特に今回はブロークングリッドの実験だったので画像素材が必要
- ただし、 Github Pages で作成する以上、リポジトリ内に画像データは含められない
という条件で考えたとき、 API を叩いて画像を読み込む (リポジトリ内に画像データを含めなくて良い) というのは魅力的だったからです。しかも Unsplash の場合 APIキー のような秘匿すべき情報もなく試すことができるというのはメリットです。
利用方法
まずは使用したい画像を検索して、画像の情報を開きます。
するとURLに画像に対応するURLが表示されるので、画像のIDこれを控えます。今回は -qQlfYB7pqM ですね。
今度はこれを元に API のURLを組み立てます。
https://source.unsplash.com/<画像のID>/<サイズ指定>利用するのは Unsplash Source 。このサービス、サイズ指定もできるので便利です。例えば w1920 x h1080 のサイズならば
https://source.unsplash.com/-qQlfYB7pqM/1920x1080こうなります。
実際にこれを Scss の中に記述します。
.c-eyecatch {
// 略
&Inner {
position: relative;
background: {
image: url("https://source.unsplash.com/-qQlfYB7pqM/1920x1080");
position: center center;
repeat: no-repeat;
size: cover;
attachment: scroll;
}
}
// 略
}こんなイメージです。これで画像素材を使用することができます。便利。
日本語のダミーテキスト
さて、今度は打って変わって日本語のダミーテキストを用意したいと思います。
利用したのはこちらのサービス。名著のテキストを組み合わせてそれっぽいテキストを生成できるので、後は文字の長さを調整したりして利用。
この2つを利用して今回実験サイトを作成しました。こういうとき便利ですね。
参考
Unsplash
API経由で画像をダウンロードせずに画像を使用する方法。
もしかして
これ、もしかして……
Twenty Seventeenのキービジュアル画像？