このブロックはスマートフォンの画面サイズで非表示設定になっています
公開ページで表示したい場合は「ブロックの設定」から変更してください
公開ページで表示したい場合は「ブロックの設定」から変更してください
このWEBページはノーコードツール・ペライチでの基本的な操作方法を画像を使用して親切・丁寧に解説をしていく初心者様向けの入門講座となっています♪
ペライチはPCサイト、スマホサイトどちらも対応しています。
PCのブラウザや、iPhoneの標準サイズは16pxですので、16px前後が一般的に読みやすい文字サイズとして使われています。
またGoogle側のモバイルファースト・インデックスで推奨するフォントサイズも16pxになります。
ですので16PX以上を意識して各ブロック➡見出し・小見出し・本文に合ったフォントサイズを選択すればユーザー目線の優しく親切なHPサイトを制作できるということになります！
PCとTB（タブレット）SP（スマホ）でそれぞれ個別の設定がしたい場合
➡編集画面の左の操作パネルから「画面表示切り替え」で指定します。
PCの場合
見出しは28PX以上を推奨
テキスト本文はボリュームにもよりますが18~22PXを推奨します
スホマの場合
見出しは24PX以上を推奨
テキスト本文はボリュームにもよりますが16~20PXを推奨します
スホマの場合
見出しは24PX以上を推奨
テキスト本文はボリュームにもよりますが16~20PXを推奨します
PC
➡❶ 画像のブロックの編集をクリック
PC
➡❷ 画像の設定-マイライブラリを選択
PC
➡➌「画像を選択してアップロード」をクリック
PC
➡➍画像ファイルを選択して開くをクリック
※一度にアップロードできる最大数は10個までです
※1つのファイルの最大容量は5MBまでです
※使用できる画像形式は、jpeg、jpg、gif、pngです。
PC-スマホ共通
➡このように各画像に名前を付けておくと、データの管理がしやすいので◎です
編集したい画像にカーソル（指）を合わせて「編集」の黒枠をクリックします。
●マイライブラリ
●ペライチライブラリ
●写真素材-ぱくたそ
●写真素材-PIXTA
●リンク設定
●alt代替テキスト
という6個の項目があります。
ここでは無料で使用できる🌟マイライブラリ🌟ペライチライブラリの2種類について解説します！
マイライブラリ
➡❶使用したい画像を選んで「この画像を使用する」をクリック
ペライチライブラリ
アイコン（カラー）➡HP制作で使用頻度の高い様々なアイコンが無料で使用できます
ペライチライブラリ
アイコン（SNS）➡Facebook・X（旧Twitter）・Instagram・LINEなど主要のSNSのアイコン画像を無料で使用できます♪
※私個人としてはこの機能はすごく便利でよく使わせて頂きます。
ペライチライブラリ
ボタン➡クリックボタンなどで頻度の高いボタンアイコンが無料で使用できます。
ペライチライブラリ
風景➡自然や花や動物などの洗練されたオシャレな画像が無料で使用できます。
PCの場合
背景色を編集したいブロックの「背景設定」をクリック
スマホの場合
ブロック操作一覧タブからの「背景設定」をタップします
❶ マイラブラリを選択
❷ 背景に使用したい画像を決定したら「この画像を使用する」を選択
PCとスマホでは端末のサイズが異なるため、PCでの背景画像サイズのまま全て共通の設定をした場合にスマホで閲覧した時に背景が見切れてしまうことがあります。
そのため「PCでは横長」「スマホでは縦長」というように背景画像を切り替えた方がより美しくユーザー目線のHP作りを実現することができます。
👇詳しくは下記をご参照ください。
PCの場合の推奨サイズ
PCの場合は横長のサイズ設定なので背景画像も横長のものを用意することで美しく最適に表示されます。
各デバイスによって様々ですがペライチでは1920PX（幅）×1080PX（高さ）の画像が比較的どのブロックでも適しています。
スマホの場合の推奨サイズ
スマホの場合は縦長のサイズ設定なので背景画像も縦長のものを用意することで美しく最適に表示されます。
ペライチでは1000PX（幅）×2000PX（高さ）の画像が比較的どのブロックでも適しています。
PC用のブロックとスマホ用のブロックを用意します
ブロックの表示切り替えブロックを一時的に非表示にすることで「PC用」「スマホ用」の2つのブロックを作成し、ぞれぞれに最適なサイズの背景画像を設定します。
❶ 「ブロックを1つ下に複製」をクリック
PC用のブロック
➌ PC専用のブロックにするためスマホ非表示設定をします➡スホマ表示中をクリック
PC用のブロック
➍ スマホ専用のブロックにするためPC・タブレット非表示設定をします➡PC・タブレット表示中をクリック
PCの場合
背景色を編集したいブロックの「背景設定」をクリック
スマホの場合
ブロック操作一覧タブからの「背景設定」をタップします
設定している背景色➡「選択する」をクリック
❶ あらかじめ表示されているカラーを選択する→決定する
❷ 指のマークの箇所や上の図の白丸箇所を操作して好きな色を見つける。
赤丸の色が選択された色になります。
➌ 外部ツールのカラー早見表➡☆色大辞典ツール☆を使用して好きな色を見つけてカラー番号をコピー＆ペーストする
❶ 編集したブロック箇所の「文字の色」をクリック
❷ カラーパレット一覧から選択するか
➌ カスタムカラーを選択して細かい設定をする
PCの場合
❶ 画面左端にあるメインメニューからプレビュークリックします
スマホの場合
❶ 画面上部にメインメニューをタップします
スマホの場合
❶ プレビューをタップします
PC・スマホ共通
❷ 左からPC・タブレット・スマホで各それぞれのデバイスサイズでプレビュー確認ができます！
PC・スマホ共通
新規ブロックを追加する場合は＋マークをクリック（タップ）します。
PCの場合
❶背景の設定 ➡背景色や背景画像が選択できます。詳しくはメニュー一覧から背景設定はをご参照ください
❷背景位置の設定➡設定した背景の画像の位置を好きな場所で指定することができます
➌ブロック設定➡【PC・タブレット】【スマホ】で表示・非表示にするかを設定することができます。前の説明で解説してますので詳しくは下記をクリックご参照ください👇
PCの場合
❶ ブロックを1つ上に移動
❷ ブロックを1つ下に移動
➌ ブロックを一番上に移動➡ブロックを編集中のページの最上部に移動できます
➍ ブロックを一番下に移動➡ブロックを編集中のページの最下層部に移動できます
❺ ブロックを複製（コピー）する
❻ ブロックを削除する
※個人的に使用頻度が高いのが❺番のブロックの複製です。例えば背景やフォントのサイズを設定した状態のブロックを複数作成したい場合などに便利な機能です。
スマホの場合
❶ ブロックを1つ上に移動
❷ ブロックを1つ下に移動
➌ ブロックを一番上に移動➡ブロックを編集中のページの最上部に移動できます
➍ ブロックを一番下に移動➡ブロックを編集中のページの最下層部に移動できます
❺ ブロックを複製（コピー）する
❻ 背景設定
❼ ブロック設定
➑ ブロックの削除
※個人的に使用頻度が高いのが❺番のブロックの複製です。例えば背景やフォントのサイズを設定した状態のブロックを複数作成したい場合などに便利な機能です。
❶操作を1つ戻す」をクリックすると1回分の操作が取り消されます。
❷「操作を1つ進める」をクリックすると戻した操作を1つ進めます。
※ 全ての編集操作が終わってページを閉じる前に必ず「保存する」をクリックすつことを忘れずに！！
これは編集画面用のサンプルです。
「プレビュー」から実際の見た目をご確認ください。
