HPFマニュアル

記事本文欄内に画像を設置する方法

１． 画像のアップロード
①　設置する画像をアップロードします。▶ 詳細こちら 
②　記事本文内に画像を設置する場合、画像サイズが大きいと画像が見切れて表示されます。
　　そのため、本文とのバランスを考慮し、画像をリサイズします。　▶ 詳細こちら 

※ 参考 ※
テキスト文と合わせて画像を設置する場合や、2枚並べて設置する場合の画像幅は200～300pxを推奨しています。
画像だけを記事幅一杯に設置する場合は500～600pxを推奨しています。

ファイル管理にて、160px・240px・300px・600pxからサイズ選択し、簡易的に変更することもできます。

２． 記事を開く
①　画像を設置したい記事編集を開きます。
②　画像項目の画像配置を【中央配置】に設定します。
③　本文のメニュー欄にあるイメージアイコン： をクリックします。
 

装飾した文字を初期設定に戻す方法

▼ 設定内容を確認する
①　文字列の装飾を初期設定に戻したい記事編集を開きます。
②　サイズやフォントを初期設定に戻したい文字列をドラッグで選択します。
③　選択された文字列に設定されている文字サイズやフォントなどが表示されます。
④　文字列を選択した状態で書式を解除アイコン： をクリックすると初期設定に戻ります。
 

アンカーリンクの設定方法

アンカーリンクを張ると、ページ内の記事やフォトギャラリーにリンクさせることが可能です。
スマホやタブレットなど、一部の端末では指定した箇所がうまく表示されない場合があります。

▼ リンク先の設定（アンカータグを設置する）
①　リンク先となる記事、または、フォトギャラリーの編集画面を開きます。
②　編集画面下部の【属性設定：id】にアンカー名を（任意の半角英数字）を入力します。
③ 【登録】ボタンをクリックします。

記事の編集方法はこちら
ギャラリーの編集方法はこちら

アンカー名は半角英数字で好きな名前をつけられますが、同一ページ内で同じアンカー名は重複使用できません。
　正しい例：1つめのアンカー名「sample01」、2つめのアンカー名「sample02」
　誤った例：1つめのアンカー名、2つめのアンカー名、両方が「sample」
 
▼ リンク元の設定（アンカーリンクを張る）
④　リンク元となる記事の編集画面を開き、本文欄にリンク設定させる文章を記入します。
⑤　記入した文章をドラッグして【リンク挿入】アイコンをクリックします。
⑥　ハイパーリンクが開くのでプロトコルを「その他」に変更し、「URL」を準備しておいたリ
　　ンク先のHTML名（リンク先のページURLから「https://ドメイン名」を削除したもの）、
　 「#（半角シャープ）」、②で設定した「アンカー名（任意の半角英数字）」を入力します。
　　例：/●●●.html#sample01
⑦ 【OK】＞【登録】の順にクリックして完了です。
 

記事の複製方法

①　コピーしたい記事を開きます。
②　本文項目の【ソース】ボタンをクリックし、ソースモードに切り替えます。
③　本文欄に記入してある文をコピーします。
④　下部の【キャンセル】ボタンをクリックします。
 

PDFデータを掲載する方法

① 【ファイル管理】を開きます。
②　アップロードしたPDFをクリックし選択した状態にします。
③ 【情報】ボタンをクリックします。
 
④　情報項目【URL】欄内の文字列のうち、「/materials/～」以降をコピーします。
　　※ コピー方法：キーボードの「Ctrl」キーと「C」を同時に押すとコピーできます。
 
⑤　PDFを設定したい記事を開き該当する文字列をドラッグします。
⑥　アイコン一覧から【リンク挿入】 ボタンをクリックします。
⑦　表示された【ハイパーリンク】タブのURL欄に④でコピーしたリンクパスを貼り付けます。
　　※ 貼り付け方法：キーボードの「Ctrl」キーと「V」を同時に押すと貼り付けができます。
⑧　プロトコルから【その他】を選択し「OK」をクリックします。
⑨　記事編集画面に戻り下部の「登録」をクリックして完了です。

※PDFデータの場合は別タブ（新しいページ）で表示したほうが良いかと思います。
　その場合、テキストリンクの設置方法にある④以降の手順で設定してください。

 

メイン画像にリンクを設定する方法

①　メイン画像編集部分をクリックします。
 

カレンダーの設置方法

WEB上にはカレンダーを無料で簡単に作成できるサイトがたくさんあります。
イベント開催日のアピールや営業日（定休日）の告知などにご利用しては いかがでしょうか。

▼ カレンダーの作成
①　以下の「営業日・イベント開催日カレンダー作成サイト」（無料）を開きます。
　　http://calendar.syoukoukai.com/
②　カレンダーの枠線、定休日の背景、曜日の背景色を設定します。
　　※お好きな色が無い場合は以下のサイトにて好みの色コードを確認し、入力してください。
　　 http://www.finitojapan.com/cltable.html
③　カレンダー年月を設定します。
④　定休日・イベント開催日などを設定します。
　　※ 数字上のラジオボタンにチェックを入れると一括で曜日を選択できます。
⑤　カレンダーのサイズを設定します。
⑥ 【カレンダーを作成する】ボタンをクリックすると右側に完成プレビューが表示されます。
⑦ 【すべて選択】ボタンをクリックし、キーボードの「Ctrl」キーと「C」を同時に押して
　　htmlソースをコピーします。
 
▼ ホームページのサイド自由html欄に設置する場合
①　ホームページ編集画面を開きます。
②　左右何れかに表示されている【自由HTML】をクリックします。
③　⑦でコピーしたソースを【サイド自由HTML】欄にキーボードの「Ctrl」キーと「V」を
　　同時に押して貼り付けます。
④ 【登録】ボタンをクリックします。
⑤ 【自由HTML】欄にカレンダーが設置されているか確認します。
 
▼ 特定のページ内に直接設置する場合
①　カレンダーを設置する記事編集画面を開きます。
②　本文の【ソース】ボタンをクリックします。
③　本文欄にソースを貼り付けます。
④　入力後に【登録】ボタンをクリックします。
⑤　テキスト欄にカレンダーが表示されれば完了です。
 

記事に掲載する画像にリンクを設定する方法

▼ 記事に画像を設定
①　画像にリンクを設定する記事を開きます。
② 【画像を変更する】をクリックします。
③　右側に表示された【ファイル一覧】から設定する画像をクリックします。
 
▼ 画像クリック設定
【画像クリック設定】のプルダウンをクリックし、表示された項目の中から【画像にリンクを指定】を選択します。
 
▼ リンク先の指定
画像にリンク先を指定します。

リンク先選択・・・ページ／ブログカテゴリ
同サイトにリンクを指定したい場合にはこちらを選択します。
選択した場合【ページ選択】からリンク先を選択します。
※下書きに設定してあるページはリンク指定はできません。

リンクを新規ウィンドウで開く
こちらにチェックを入れると別のウィンドウを開いて表示することができます。

リンク先URL
リンクしたいサイトのURLを設定することで、外部サイトにもリンク指定ができます。

最後に下部の【登録】ボタンをクリックして完了です。