ホームページの作り方【ペライチ】⑦「画像編集」

画像編集

テンプレート画像部分は全部差し替えが可能です。画像、背景画像、ヘッダー背景画像があります。
画像の所にマウスを持っていくと「編集」ボタンが現れますので
クリック

「画像の設定」ボックスが現れます。
「マイライブラリ」ご自身でペライチにアップロードした画像が並びます。
初めての時はないので、「アップロードされた画像はありません」となります。

「画像を選択してアップロード」ボタンでご自身のパソコンに保存されてる画像を選択してアップロードできます。画像のサイズは5MBまでです。

アップロードされた画像をクリック

画像が貼付けられました。

ブロックの背景設定も同じです。各ブロック毎に背景画像の設定が可能になりました。

ペライチが用意している「風景」画像もあります。
他にも、写真素材ぱくたそ（無料で使えます）や
PIXTAの画像も利用できます。PIXTAの素材は有料です。貼付けは可能ですが
公開時には購入が必要です。ペライチから購入すると、PIXTAの元々のサイトから購入するよりお得です。購入した素材はペライチ内だけでの利用となっています。また、PIXTAの素材は画質が良く、ファイルが大きい（重い）ので実際使うときはサイズを小さく編集してご利用することをおススメします。画像サイズの変更は別途noteしますね。
ページの読み込みスピードも重要ですので、画像はなるべく小さいサイズを使ってください。

ブロックの背景が設定されました。

ペライチで利用する画像について

背景画像とか、素材を購入した場合、画像サイズを小さくしてファイルサイズを小さくした方が良いです。　横幅1280pxもあれば良いと思っています。
または1920px

また、ページ内で利用する画像はページを作る前に体裁を整えておくと
便利で早く仕上がります。
ページ内にいろいろなサイズの画像が混在しているととても見にくくなります。
おススメは正方形の画像、インスタグラムも流行ってるし、スマホでの画面は正方形が見やすい、で、横幅も500pxぐらいに統一しておくと良いです。

また、画像が丸で切り抜かれるブロックあります。プロフィールのブロックとかです。元の画像が正方形だと、正円で切り抜かれてキレイです。
元の画像が長方形だと楕円で切り抜かれます。

画像の表示

画像が何個か並んでいる場合、PCとスマホで自動的に配列が変更されて、
レスポンスデザインになっています。スマホでもキレイに見えるように並びます。

PCでの表示

スマホで見た場合、縦一列の表示に変更されてます。レスポンスデザインです。また、画像もスマホの画面サイズに適応しています。

次回は、ヘッダー画像の背景設定をnoteしますね