【Notion】Galleryでいい感じの写真サムネつきページを作る

今回はGalleryというDBを使ってできる写真つきのページを作っていきます！

最近"ナウい"ページによくあるイメージ...!

では早速やっていきましょう！

Galleryとは？

さて、まずはGalleryについて簡単に。

Galleryとは、こんな感じでいい感じに画像をつけた状態でページをレイアウトできます。

各画像をクリックすればそのページに飛びますので、例えば旅行に行った時の一番映える写真をサムネイルとして設定して、いい感じに見せれば、どんな旅行だったのか...等、視覚的にわかりやすくなりそうですね！

そしてページの中にその旅行の感想だったり、出来事といった日記的なものを書いたり、まだ行っていない状態なら予め旅程表等をまとめて行ってもいいかもしれませんね。

画像は僕のカメラ趣味で撮影したものを適当にちりばめてみたやつ+デフォルトで選べる写真(unsplashのやつ)です。

"いい感じの写真なんて持ってないよ〜"という場合でも、様々な方が提供してくれている画像を自由に使用することができます。

実際、今回使用させていただいている富士山の写真、紅葉の前ボケが入った良い写真ですよね！

さて、それではこのGallaryについて詳しくみていきましょう！

Galleryの基本的な使い方

さて、それではGalleryを使っていきます。

方法は簡単です。

まずはいつも通り、ブロックを追加していきます。

画像では"/gallery"と全て打ってますが、"/ga"でも出ます。

デフォルトだとこのようにpageが三つ用意され、page1だけ少し内容が書かれていますね。

では、まず最初に"page1"を開いてみましょう。

こんな感じのページが出てきました。

デフォルトで入っている内容はちょっと邪魔なので、消してしまいましょう！

削除をしたら、代わりに"/ima"、もしくは"+"ボタンから画像を挿入します。

画像追加する画面が出てきました。

まずは自分の画像をアップロードして使ってみたいと思います。

"Choose a File"という青いボタンを押して、画像を追加します。

画像が追加されました！

では、画面上部から元のGalleryがあったページに戻ります。

基本的には以上になります。

あとはタイトルとページも修正すると..?

こんな感じでしょうか。

ページの名前とアイコンを変更するとちゃんと反映されます。

これをばーっとついかしてみると...?

こんな感じになりました。

だいぶん見栄えが良くなってきましたね。

では、次節からはちょっとした小技的なことをお伝えしていきます！

有志が共有してくれている画像を使う

さて、まず最初に、こんなシーンの画像が欲しいけど、持ってないし、自分でとるの面倒だしなぁ〜。

っていう場合が多々でてくるでしょう。

そんなときは、有志の方々が共有してくれている画像あるので、お借りしましょう！

ぱっと見でわかると思いますが、割といろんな画像があります。

自分が欲しい写真のイメージをそのまま検索してみると意外とあります。

例えば"富士山"を探してみます。

んー・・・数は少ないですが、富士山っぽいのありました。

もしも日本語で検索して目当てのものが見つからなかった場合、英語でも検索してみてください。

今回の場合、"fuji"といった具合です。

さっき日本語で検索した時には無かったけど、いい感じの画像がありました。

このように、おそらく登録時の言語等によって検索にヒットするかしないかが変わっているようです。

Notion自体、まだまだ日本では流行りはじめな感じで、英語が主体のサービスなので、日本語で検索してだめだったら英語でも検索してみてください。

理想の一枚がみつかるかもしれません...!

見切れている画像を微調整する

さて、それでは早速先ほどの画像の花火の写真、おっきい花火が見切れていてう〜んって感じですよね。

元の写真は実はもっとちゃんと写っているんです...

このように、デフォルトだと画像中心部だけクロップ（切り取り）された画像が表示されるようです。

そんな時は花火の画像にカーソルを合わせると右上辺りに出てくる"Reposition"というボタンを押します。

すると、調節できるようになります。

このような画面になっている間、写真の箇所をクリックしたまま移動させると、画像を動かせます。

いい塩梅の位置を見繕って、調節してください。

出来上がったら"SavePosition"を選択してあげればセーブされ、ずっとそこで固定されます。

画像全体を載せたい

さて、先ほど切り取りされてしまうとお伝えしましたが、どうしても画像全体を見せたいんだ！！！

という方もいるでしょう。

ちゃんとできるのでご安心ください！

ではさくっといっちゃいましょう！

まずはGalleryブロック右上の"..."ボタンを押します。

すると、色々できるやつがべろーんって出てきます。

その中から"Properties"を選択します。

そして、さらに出てきた画面から、"Fit Image"をON(青くなる)にします。

すると...?

んー・・・。

できるにはできるんですが、個人的にはあまりオススメしませんね...

上記のように、画像サイズが異なる(横が長いものや縦がながいもの）があると、ちょっと統一感もなくなりますし、両空白がどうしてもきになってしまう...w

ただ、全体を写せるので、どうしても全体を写したい場合はこちらで対応してみてください。

Pageに画像を挿入せず、Gallery反映させたい

基本的な方法として、Pageに画像を挿入してその画像がGalleryに反映されていました。

ただ、pageに移ったらすぐに画像がば〜んってあるのはいやじゃないですか...?

僕は嫌でした!w

なので、そうせずに済む方法をしらべてみました。

ページのカバー画像で代用

ページにはCover画像を設定できます。

その画像を代わりに使っちゃおうっていう感じですね。

まずは適当なページにカバーを追加します。

大体タイトル上部辺りにカーソルを合わせると"Add Cover"という項目が出てくると思うので、クリックしてください。

さて、ランダムなカバーではなく、自分で選んだ画像を使いたいので、"Change Cover"を選択します。

見覚えのある画面ですね。

あとはUploadもしくはUnsplashで他の方のをお借りすれば任意の画像に変更可能です。

できたら、Gallaryに戻り、Properiesを開きます。

このCard Previewというのは、カード（Gallaryに表示するもの)をどこから持ってくるか(使用しない、カバーから、コンテンツから)を選択できます。

次節で後述しますが、画像ファイルをおけるプロパティを追加すると、それも選択できるようになります。

ちゃんとカバー画像に設定した画像が表示されていますね！

あとは他のページもカバー画像を設定したらそれが反映されます。

自分用プロパティで代用

まずは"Property"を新しく追加します。

Add Propertyを選択すると、各ページについてるプロパティを作成できます。

今回、ページのサムネ用画像を置いておくので、以下のように名前をつけました。

また、画像を保存したいので、"Files & Media"を選択します。

さらに引き続き、"Propertys"画面でクリップマークの"Card Preview"を選択します。

上記画像の一番上に"Card Preview"がありますが、もしも下の方にクリップマークのプロパティが無かったら、うまく作れていないので、再度プロパティを作り直してみてください。

ここで新しく追加されているページサムネ用画像を選択します。

これで、各ページのこのプロパティに画像を設定すればその画像が表示されるようになりました。

では、適当なページのプロパティに追加してみます。

プロパティに画像が追加できました。

また、コンテンツにも何も書かれていませんね。

ですが、Galleryに戻ってみると...?

この手法の難点としては、プロパティが増えてしまうこと、unsplash画像（他の人が共有してくれている画像)が使用できないことです。

(正確にはできるのですが、ちょっと手間がかかってしまいます。)

軽く触れておくと...

unsplashで追加した画像（一旦/img辺りで追加する）のoriginalを選択すると、画像がブラウザで開かれます。

開かれた画像のURLをコピーして、プロパティに画像を追加する時、Embed Linkを選択して貼り付ければ行けるはずです。

ただ、手間がかかるのでお勧めはしません。

使い分けとしては基本的にはカバー画像で代用し、もしもカバー画像とサムネの画像を変えたい！という場合はプロパティを使ってもいいかもしれないですね。

Galleryのカード(表示枠)の表示を小さくする

さて、一番最初の例だと一行に三つの要素が入っていましたね。

あんな感じで一つ一つの表示枠を小さくしてみます。

先ほどと同様にして"Propertys"を開きます。

そして、その中にある"Card Size"を選択します。

これが表示枠の大きさの変更になっているので、Smallにします。

すると...

個人的にもっと増やしたりできると嬉しいですが...今のところできなさそうな気がします...

(大中小ではなく、行あたりの個数で選択できると良さそうですよね。）

まとめ

今回はGalleryをみてきました。

ページにアイコンはつけれますが、やっぱり画像がついているともっと彩り豊かで、ページの内容がイメージしやすくなりますね！

いろんな場面で使えると思うので、是非使ってみてください！

それでわ！