とりあえずHP の使い方

トップページを編集しようスライド画像を設定する

ご確認ください

以下のいずれかに該当する方は、新管理画面をご利用のため、解説とは部分的に異なる箇所があります。

  • 2023年12月18日以降に、とりあえずHPの無料体験をお申し込みした方
  • 「新管理画面への移行完了のお知らせ」の通知を受け取っている方

「スライド対応」のテンプレートを選択すると、
トップページでスライド画像を表示させることができます。
画像は最大で5枚、表示可能です。

[スライド画像の設定]をクリック
[スライド画像の設定]ボタンのクリック画面

管理画面のメニューから[スライド画像の設定]をクリックします。

スライド画像の[画像を選択する]をクリックし、画像を選択する
スライド画像の設定変更画面

スライド画像を追加または変更したいボックスで、
[画像を選択する]ボタンをクリックすると、別のウインドウが開きます。

※[メイン画像を優先させる]にチェックが入っている場合は、[スライド画像を優先させる]にチェックを入れます。

スライド画像に設定したい画像を選択します
スライド画像に設定したい画像選択画面

あなたのパソコンの中から、トップページのスライドに表示させたい画像ファイルを選びます。
ファイル名をクリックした後、[開く]ボタンをクリックします。

※上の画面は、Windows10の例です。

スライド画像の[切り取り位置を調整]をクリックし、切り取り位置を調整する
スライド画像の「切り取り位置を調整」ボタンのクリック画面

スライド画像は、横長の画像の利用を推奨しています。
縦に長い画像の場合は、上下の切り取り位置を調整して表示します。

上下の切り取り位置を調整する場合は、スライド画像のボックスで、
[切り取り位置を調整]ボタンをクリックします。
すると、別のウインドウが開きます。

※アップロードした画像が、選択中のデザインテンプレートの規定サイズよりも横に長い場合、画像の横幅がデザインテンプレートに合わせてリサイズされ、上下中央に表示されます。

※アップロードする画像は、横幅2000px以上を推奨します。ホームページにおける実際の表示は、各デザインテンプレートの規定サイズでの表示となります。

※アニメーションGIF画像をスライドとして設定する場合は、必ず、元の画像のサイズを横幅2000px未満で作成してください(横幅2000px以上のアニメーションGIFを設定した場合、サイズが自動調整される過程でアニメーションが動作しなくなるため)。

クリックしたまま画像を動かして、切り取りたい位置に移動する
スライド画像の切り取り位置の調整画面

マウスカーソルを画像の上に合わせると、矢印から「十字カーソル」に切り替わります。
この「十字カーソル」の状態で、クリックしながら上下に移動すると、
画像の上下の位置を移動することができます。
切り取りたい位置で離すと、その位置で画像が固定されます。

※一度切り取り位置を設定した後、何度でも調整し直すことが可能です。

[上記の位置で設定]をクリック
[上記の位置で設定]ボタンのクリック画面

切り取り位置を固定したら、ページ下部の[上記の位置で設定]ボタンをクリックします。

※切り取り位置を変更しない場合は[キャンセル]ボタンをクリックすると、別ウィンドウが閉じます。

切り取り位置調整画面を閉じた後、[上記の内容で設定]ボタンをクリック
切り取り位置調整後の[上記の内容で設定]ボタンのクリック画面

すべてのスライドを調整したら、スライド画像編集画面下の[上記の内容で設定]ボタンをクリックして、全体の編集内容を保存します。

ホームページを確認します
ホームページを確認します

[ホームページを確認]ボタンをクリックして、
実際のホームページのスライド画像が切り替わったか確認します。

ホームページのスライド確認画面

※スライド画像が表示されない場合は、「トップページでの表示の優先度の設定」が[スライド画像を優先させる]になっているかどうかを確認します。(なっていない場合は[スライド画像を優先させる]を選んで[上記の内容で設定]をクリックしてください。)

[スライド画像を優先させる]チェック画面

スライド画像の「スピード」と「アニメーションの種類」を設定する

スライド画像が2枚以上ある場合は、自動的に「紙芝居」のように画像が切り替わりながら表示されます。

スライドのスピード では、画像が切り替わるスピードを「早い」「普通」「遅い」の三段階から選択することができます。

アニメーションの種類 では、画像が切り替わる動きを「スライド」と「フェード」の二種類から選択できます。

スライド画像のアニメーション例

「スピード」と「アニメーションの種類」を変更する場合は、変更したい項目を選んだ後、ページ下部の[上記の内容で設定]をクリックしてください。


【ヒント】画像はどのように用意するの?

ホームページ掲載用の画像ファイルをお持ちでない場合は、
デジタルカメラやスマートフォンなどでホームページ用の写真を撮影することになります。
デジタルカメラ・スマートフォンからパソコンへ画像を移す方法は、デジタルカメラやスマートフォンの説明書などをご覧ください。

ご自身で、画像を用意するのが難しいという場合は、著作権フリーで利用できる素材集サイトなどもあります。
以下のページにて、ホームページ用の写真やイラストを探せる画像配布サイトや、
どのような画像を掲載すると良いかをご紹介しておりますので、ご参照いただければ幸いです。

ホームページ用の写真やイラストを探せる画像配布サイト12選【画像サイズや容量の最適化についても解説】

※著作権については、各素材サイトにルールが設けられていますので、利用にあたっては、ご注意ください。

ロゴマークを表示させる

Googleビジネスプロフィールに登録しよう

外部フォームを利用する

Googleタグマネージャーを設置する

アクセス解析を見る

無料オンラインサポート実施中

\ホームページを作る前に知っておきたい/

ホームページの作り方 動画講座

動画URLを無料で入手

\ホームページ制作のプロに個別相談/

とりあえずHP無料個別レッスン

個別レッスンの詳細

PAGE TOP