HPFマニュアル

テンプレート型ホームページ作成ツール

HPF操作マニュアル

サイドバナーの編集

===========================================

1. サイドメニューにある編集エリアをクリックして編集画面を開く

サイドバナーの編集001

===========================================

2.バナーを追加する

サイドバナーの編集002

(1)「バナー画像を追加」ボタンをクリックする
※登録済みのバナーを編集する場合は、「編集」または「画像を変更」ボタンをクリックします

(2)編集画面右側のファイル一覧から、画像を選択する
※画像のアップロードがまだの場合は「アップロード」ボタンをクリックし、ファイル管理に画像を保存してから作業を進めます。

(3)リンク設定を変更する
リンク先選択「ページ/ブログカテゴリ」から選択
リンクを新規ウィンドウで開く(必要に応じてチェックを入れる)
ページ選択「URL入力/公開ページ一覧」から選択

※外部リンクを張る場合、「リンク先選択:ページ」を選択し、
「リンクを新規ウィンドウで開く」にチェックを入れ、
「ページ選択:URL入力」を選択して、「リンク先URL」を入力する。

(4)「画像を変更する」をクリックすると、編集画面右側にファイル一覧が表示される

(5)「登録」ボタンをクリックして、追加を完了する

===========================================

【バナーの並び順変更・編集・画像を変更・画像を削除】

サイドバナーの編集003

(1)「編集」ボタンをクリックして、編集画面を開く

(2)画像のみ変更する場合は、「画像を変更」ボタンをクリックする

(3)画像を削除する場合は、「画像を削除」にチェックを入れて「登録」する

(4)並び順を変更する場合は、アイコン「

」をドラッグ(クリックしたまま)して順番を入れ替え「登録」する

(5)「登録」ボタンで変更内容を保存する
 

===========================================

トップバナーの編集

事前準備
使用する画像をファイル管理画面へアップロードしておきます。
→画像のアップロード方法はこちら

トップバナーで使用できるファイルの種類(拡張子)
・JPEG(.jpeg, .jpg)
・PNG(.png)
・GIF(.gif)
・BMP(bmp)

推奨する画像のサイズ
・高さ:200~500ピクセル × 横幅:900~1000ピクセル程度
※横幅は、デザインテーマによって異なります。
※サイズが大きすぎるとサイトの表示スピードに影響を与えますので、ご注意ください。
→画像の編集 - 切り取り
→画像の編集 - 拡大縮小

画像の枚数
スライドショーに追加できる画像の枚数に制限はありませんが、動きが目立ちすぎてしまい、ページに掲載している内容がかえって読まれなくなったり、
画像を追加しすぎると読み込みに時間がかかり、ページの表示スピードが遅くなる場合がありますので、ご注意ください。

===========================================

1.ページ上部のトップバナーのエリアをクリックし、編集画面を開く

トップバナーの編集001

===========================================

2.各項目を設定する

トップバナー002
(1)「トップバナーを表示しない」(チェックボックス)

(2)「全ページに、下記のメイン画像を一括登録する」(チェックボックス)

(3)アニメーションタイプ:「アニメーションなし / フェード / 横スライド / 縦スライド」から選択

(4)切替えタイマー:半角数字で入力

(5)「メイン画像を追加」ボタン ※手順3へ
 
(6)「
 
 」アイコン:ドラッグ(クリックしたまま移動)して並び順を入れ替える
(7)「編集」ボタン ※手順3へ

(8)「画像を変更」ボタン

(9)「非表示」「削除」(チェックボックス)

(10)「登録」ボタン
 
===========================================

3.画像を追加する(「メイン画像を追加」ボタン、「編集」ボタンをクリックした場合)

トップバナーの編集003

(1)画像クリック設定:「何もしない / 画像にリンクを指定 / 画像をポップアップ表示」から選択

(2)リンク設定 ※画像クリック設定「画像にリンクを指定」を選択した場合のみ
 ・リンク先選択:ページ、ブログカテゴリから選択
 ・リンクを新規ウィンドウで開く:チェックあり(新規ウィンドウで開く)/ チェックなし(同一ウィンドウで開く)
 ・ページ選択:URL入力、または、既存のページ、ブログカテゴリから選択
 ・リンク先URL:ページ選択「URL入力」を選択した場合のみ入力

(3)追加位置:「最初に追加 / 最後に追加」から選択

(4)「画像を変更する」ボタン:画面右側のファイル一覧から画像を選択

「登録」ボタンをクリックして、画像の追加を完了する
 
===========================================

「お問い合わせはこちら」ボタンの編集


→フォームの追加・編集方法はこちら
→フォーム受信データの確認方法はこちら

===========================================

1.ページ編集画面を開き、「お問い合わせはこちら」ボタンをクリックする

お問い合わせはこちらボタン001

===========================================

2.各項目を編集し、「登録」ボタンをクリックする

お問い合わせはこちらボタン002

(1)お問い合わせリンクを表示しない:チェックあり(非表示) / チェックなし(表示)

(2)ボタンラベル:13文字程度で入力する ※デザインテーマやカスタムにより前後する場合があります

(3)リンクページ選択:「URL入力 / ページ一覧」から選択
※外部リンクを張る場合は「URL入力」を選択し、リンク先のURL」を入力します。

フォーム受信データの管理

→フォームの追加・編集方法はこちら
→「お問い合わせはこちら」ボタンの編集方法はこちら

===========================================

1.「フォーム管理」をクリックする
フォーム受信データの管理001
===========================================

2.フォーム一覧の受信データの数(または、サイドメニューのフォーム名)をクリックする

フォーム受信データの管理002

===========================================

3.受信データ一覧で「確認」ボタンをクリックして、お問い合わせの内容を確認する
※「削除」ボタンをクリックすると、お問い合わせ情報が削除されます。削除した情報は復元できませんので、ご注意ください。

フォーム受信データの管理003

===========================================

フォームの追加・編集


フォーム受信データの確認方法はこちら
「お問い合わせはこちら」ボタンの編集方法はこちら

===========================================

 編集画面の左側にある【フォーム管理】にカーソルを合わせます。
 表示されたタブから【新規フォーム作成】をクリックし、フォームの情報を入力します。

※既存のフォームを編集したい場合は、タブの中から【フォーム一覧】を選択し、フォーム名の横にある【編集】ボタンをクリックします。

フォームの追加設置

▼ フォーム情報設定
 フォーム名
  お問い合わせのフォームの名前を入力します。
 通知先メールアドレス
  フォーム毎に異なるメールアドレスへフォーム内容を通知したい場合には、ここにメールアドレスを設定します。
  全てのフォームに共通の通知先メールアドレスを設定する場合はこちら
 送信後のリダイレクトページ
  フォーム送信後に表示されるページを選択します。
 コンバージョンタグ [上級者向け]
  ※タグの追加により、サイト表示やお問い合わせの送信などに影響が出た場合は、追加した
  タグを削除し元の状態に戻してください。
 送信後のポップアップメッセージ
  チェックあり(ポップアップメッセージを使用する)
  チェックなし(使用しない)から選択します。
 ポップアップタイトル
  のタイトルを入力します。(チェックした場合)
 ポップアップ本文
  の本文を入力します。(チェックした場合)
 自動返信
  チェックあり(自動返信メールを使用する)
  チェックなし(使用しない)」から選択

フォームの追加設置2

▼ 項目設定
 項目設定
  必要に応じて、自由に入力欄や選択項目を追加できます。
※ 初期設定では「お名前(必須)・メールアドレス(必須)・タイトル・本文」になります。
 最後に【フォームを作成】をクリックすると登録されます。

フォームの追加設置3



===========================================

▼ フォームをページ内に設置する
 既存、または新たなページにフォームを設置する場合は、以下の手順でフォームを設置します。

 該当ページ上部の大見出しをクリックします。新規ページの場合はページ見出しを設定します。
 「フォームを追加」ボタンをクリックします。

ページにフォーム追加01

 ページ内に設置するフォームの見出しを設定します。
 先に作ったフォーム(上記①)を選択します。
 「登録」ボタンをクリックします。
​​​​​​​
 ※以上で新規追加したフォームをページに設置できました。
 「プレビュー」にて表示イメージを確認、更に「公開」し、実際にフォーム入力し、指定宛先にフォーム内容が正しくメール通知されるか確認してください。



ページにフォーム追加02
===========================================

画像の編集 - 回転する

→画像、PDFのアップロード方法はこちら

===========================================

1.「ファイル管理」をクリックする

画像の回転001

===========================================

2.「編集したい画像」>「回転」ボタンの順にクリックする

画像の回転002

===========================================

3.「時計まわり」ボタン、または「反時計まわり」ボタンで画像を回転し、「ファイルを別名で保存する」
※「時計まわり」ボタン、または「反時計まわり」ボタンを押すと90度ずつ回転します

画像の回転003
===========================================

画像の編集 - 切り取り

→画像、PDFのアップロード方法はこちら

===========================================

1.「ファイル管理」をクリックする

画像の切取り001

===========================================

2.「編集したい画像」>「切り取り」ボタンの順にクリックする

画像の切取り002

===========================================

3.「自由サイズ指定」または「数値で指定」で切り取り範囲を指定し、、「ファイルを別名で保存」をクリックする

自由サイズ指定

画像の切取り003

切り取り線が青枠で表示され、枠内をドラッグすると切り取り範囲が移動します。(マウスポインタがドラッグの時のポインタ.pngの状態で移動可能)
枠外をドラッグすると、任意の切取り範囲が指定できます。
ハンドル(切り取り線の四隅などにある)をドラッグすると、切り取り範囲を拡大(縮小)できます。
画像の切取り004

数値指定
画像の切取り005
画像赤枠内で、数値を入力します。

横幅:切り取り範囲の横幅を入力します。
高さ:切り取り範囲の高さ(縦幅)を入力します。
上 :切り取り範囲の始点を、画像の上端からの距離で指定します。(例:30と入力→上端から30ピクセルの地点を始点とする)
左 :切り取り範囲の始点を、画像の左端からの距離で指定します。(例:30と入力→左端から30ピクセルの地点を始点とする)

現在の縦横比を固定:
クリックした時点の切り取り範囲の縦横比を保持し、横幅を入力すると、高さを自動入力します。(解除する場合は、再度クリックします)

===========================================

画像の編集 - 拡大縮小

→画像、PDFのアップロード方法はこちら

===========================================

1.「ファイル管理」をクリックする

画像の拡大縮小001

===========================================

2.「編集したい画像」>「拡大縮小」ボタンの順にクリックする

画像の拡大縮小002

===========================================

3.画像を拡大(または縮小)し、「ファイルを別名で保存」する

画像の拡大縮小003

サイズを変更するには以下の4つの方法があります。
・・・横幅を数値(px)で指定します。

    ※横幅指定後、一旦②の+10pxまたは-10pxボタン押下し縦サイズも相対値に変更させてください。
・・・現在の画像の横幅を10pxずつ調整します。 ※高さは自動調整されます。
・・・各横幅に設定します。 ※高さは自動調整されます。

④ハンドル(枠線の四隅などにある■)をドラッグすると、サイズを自由に調整できます

 

注意
・画像の最大幅は2000pxです。
・小さな画像の拡大や、加工を繰り返すことにより、画質が劣化します。

===========================================

画像・PDFの編集 - ファイルを削除する

※削除したファイルは元に戻すことができません。
※必ず事前に、対象のファイルが使用中でないかを確認してください。
※使用中のファイルを削除してしまうと、リンク切れやレイアウト崩れの原因になります。

→画像、PDFのアップロード方法はこちら

===========================================

1.「ファイル管理」をクリックする

画像、PDFの削除001

===========================================

2.「削除したいファイル」>「削除」ボタンの順にクリックする
※CSSや記事本文、自由HTML内にソースで記述されているファイルは、

使用中アイコン「使用中ファイル」が表示されません。誤って削除しないようご注意ください。

 

画像、PDFの削除002


===========================================

3.確認画面で対象ファイルを確認し、問題がなければ「ファイルを削除」ボタンをクリックする
※削除したファイルは元に戻せませんので、ご注意ください。
ファイルの削除004

===========================================

画像・PDFの編集 - 名前を変更する

→画像、PDFのアップロード方法はこちら

===========================================

1. 上部のメニューから【ファイル管理】をクリックします。

ファイル名の変更001


===========================================

2. 編集したい画像を選択し【情報】ボタンの順にクリックします。

ファイル名の変更002

===========================================

3. ファイル名を変更し、【ファイル情報を変更】ボタンをクリックします。

ファイル名の変更003

(1)ファイル名
  修正後は【ファイル情報を変更】をクリックします。

(2)上書きアップロード
【ファイルを選択】ボタンをクリックして別の画像を上書きでアップロードできます。
  この時、元の画像が既に記事やバナーに設置されていた場合にはその画像も差し換わります。

  ※ 注意 ※
  2018年10月のバージョンアップ前に記事などに設置済の画像を上書きした場合には再設置が
  必要な場合もございます。

(3)URL ※ 変更できません

===========================================

モバイルサイト

HPFマニュアルサイトスマホサイトQRコード

HPFマニュアルモバイルサイトへはこちらのQRコードからどうぞ!