とりあえずHP の使い方

ファイルアップロードを活用しようアップロードした「画像ファイル」を使う

このページは上級編となります。

アップロードした「画像ファイル(JPEG/GIF/PNG)」は『埋め込みタグ』を使って、以下のエリアに表示することができます。

  • 「トップページの編集」ページの記事ボックス
  • 「各ページの編集」ページの記事ボックス
  • 「プロフィールの編集」ページの「ごあいさつ文」
  • 「お問い合わせフォームの編集」ページの「ごあいさつ文」
  • 「フリースペースの編集」ページの入力欄

以下では、「記事ボックス」に画像を掲載する場合の手順をご案内しています。
「本文と本文の間に画像を表示したい」「大きめの画像を表示させたい」という場合にぜひ、ご活用ください。

[ファイルアップロード]をタップ

管理画面のメニューから[ファイルアップロード]をタップします。

[ファイルアップロード]タップ画面
掲載する画像をタップする

「アップロード済みファイル一覧」からホームページに掲載したい画像をタップします。

画像タップ画面
使いたい画像のサイズを「大・中・小」から選びます

各サイズを選択すると、表示される画像の“横幅”が自動的に変わります。

サイズ選択画面

「フルサイズ」・・・元の画像サイズ
「サイズ大」・・・横幅860px
「サイズ中」・・・横幅600px
「サイズ小」・・・横幅180px

※縦幅は横幅に合わせて自動的に変更されます。

使いたい画像ファイルの「埋め込みタグ」をコピーします

「埋め込みタグをコピーする」をタップします。

[埋め込みタグをコピーする]タップ画面
[各ページの作成と編集]をタップ

画像を埋め込みたいページを開きます。

[各ページの作成と編集]タップ画面
「画像を埋め込みたいページ」を編集します

『現在のページ構成』から、画像を埋め込みたいページの「編集」をタップします。

[編集]タップ画面
「画像を埋め込みたい記事ボックス」を編集します

記事ボックスの[編集]をタップします。

[編集]タップ画面2
手順4でコピーした「埋め込みタグ」を貼り付けます

記事ボックスの本文で、画像を埋め込みたい場所に手順4でコピーした埋め込みタグを貼り付けます。
ここでは仮に、本文の下に貼り付けてみます。

埋め込みタグ貼り付け画面

※貼り付けたい場所に指を合わせて、長押しをして表示されるメニューから「貼り付け」を選択すると貼り付けることができます。

※本文には‹s›〜‹/s›や‹br /›といった「HTMLソース」が表示されています。削除しないようお気をつけください。

[上記の内容に変更する]をタップ

「埋め込みタグ」を貼り付けたら、忘れずに[上記の内容に変更する]をタップしましょう。

[上記の内容に変更する]タップ画面
ホームページを確認します

[ホームページCHECK!]をタップして、実際に画像が表示されているかを確認してみましょう。

本文エリアの本文の下に、貼り付けた画像が表示されています。

ホームページ確認画面

【ヒント】プロフィールやお問い合わせフォームに画像を掲載したい場合

上記では、記事ボックスに画像を掲載する方法を掲載していますが、
「プロフィール」ページの「ごあいさつ文」に掲載したい場合は「プロフィールの編集」から、
「お問い合わせ」ページの「ごあいさつ文」に掲載したい場合は「お問い合わせフォームの設定」から、
同様の手順で画像を掲載することができます。


【ヒント】フリースペースにバナー画像を掲載することもできます

上記では、記事ボックスに画像を掲載する方法を掲載していますが、「フリースペース」にも、同様の手順で画像を掲載することができます。
バナー画像など、すべてのページに表示させたい画像がある場合は、「フリースペース」もうまく活用してみてください!
フリースペースにバナー画像を掲載する方法はこちら

ホームページのファビコンを設定する

ロゴマークを表示させる

SNSリンクを設定する

外部フォームを利用する

Googleアナリティクスの設定

Googleマイビジネスに登録しよう

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

\まずは、どんなサービスか知りたい/

とりあえずHPサービス説明

無料個別相談・申込

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

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

個別レッスンの詳細

PAGE TOP