FAQ
ページの途中にジャンプするリンクの設定方法は? （アンカーの利用）
【1】目次部分を設定 (※必要であれば)
対象のページの「カテゴリーの設定」から、「記事の上部エリア」の部分等に、
項目を一覧できる箇条書きのテキストを作成します。
(このページの上部のような構成です。)
【2】項目ごとの「記事」を作成
ホームページメーカー上部メニューから「ページ作成」→「ページレイアウト」に進み、
ページが一覧表示された「カテゴリ管理」の画面から、
【1】にて設定したページの右端「新しい記事の作成」に進みます。
ここから項目ごとの内容を記載する「記事」を作成します。
【3】アンカーの設定（「どこに飛ぶか」の設定）
ホームページメーカー上部メニューから「ページ作成」→「ページレイアウト」に進み、
ページが一覧表示された「カテゴリ管理」の画面から、
【1】にて設定したページ右部分「記事の一覧表示」に進みます。
アンカーを設定したい記事の右端「編集する」に進むと、「記事の編集」画面が開きます。
ここでアンカーを設定したい箇所を選択して枠上部の編集ツールから
旗のアイコン（ 
）のボタンをクリックします。
「アンカープロパティ」が表示されるので、設定したいアンカーに適切な名称を
英数字にて「アンカー名」に入力して下さい。
[アンカー設定箇所の表示確認]
上記で設定した英数字の前に「#」をつけて、当該ページのURLの最後に入れて頂くと、
設定した場所がブラウザの上辺に合わせて表示されます。
こちらのURLを次項目【4】にて設定します。
【4】リンクの設定（「どこから飛ぶか」の設定）
ホームページメーカー上部メニューから「ページ作成」→「ページレイアウト」に進み、
ページが一覧表示された「カテゴリ管理」の画面から、今回使用するページの「設定・編集」を行います。
リンクを設定したい場所を選択し、枠上部の編集ツールから鎖のアイコン（ 
）のボタンをクリックして下さい。
「ハイパーリンク」のウィンドウが表示されるので、【3】にて作成したURLを枠に入力します。
以上でアンカーの設定が完了です。
pdf書類を公開するためには?
pdf書類は他の画像ファイル(gif／jpg／png)とは異なり、
アップロードしたものをそのまま記事への設定したり画像表示タグを使用したりして表示することはできません。
公開の際は、以下のような手順にて設定する必要があります。
【1】pdf書類をアップロードする
通常の画像ファイルと同様に、書類をアップロードしてください。
その際、容量は1点／2MBまでとなっておりますのでお気を付けください。
また、サイズを設定することはできません。(元書類と同じサイズでのみアップが可能です。)
【2】リンクを設定する
上記【1】にてアップロードの完了したpdf書類のリンクを、
記事内のテキストやバナー、画像などに設定します。
こうすることで、設定されたテキストや画像をクリックすると、
pdf書類が閲覧できるようになります。
→アップした画像のURLを確認するには
スマートフォンサイトでの適切な画像の幅設定は?
PCサイトで制作したページや記事をスマートフォンサイトにそのまま取り込むと、
表示できるエリアや端末の画面に対して画像が大きすぎてしまうことがあります。
このような場合、以下のような対応にて表示の調整が可能です。
【対応 1】
スマートフォンページの編集にて、該当の画像の表示サイズを変更します。
(目安としては、画像の横幅を280px以内にすることを推奨しています。)
| < img src="画像URL" width="幅" > |
・画像の横幅設定方法
①紹介文エリアに入っている画像の上にカーソルを乗せ、右クリックをし「画像のプロパティ」を開く。
②画像情報タブの「幅」の欄に280ﾋﾟｸｾﾙ以下の数値を入力する。
（カギマークを押して施錠状態にすると横幅に合わせた高さが自動で入力されます）
③OKを押し、保存をする。
しっかり保存がされていれば、ソースモードで表示した際に「style="width: 280px"」が追加されます。
＜img src="“画像URL”" style="width: 280px;" /＞
※ソースモードで直接記述を追加することも可能です。
【対応 2】
編集画面のソースモード画面で[ class="autoresize" ]のタグを追加します。
これにより、画像が自動で適正サイズで表示されます。
| < img class="autoresize" src="画像URL" > |
・画像に classタグを設置する方法
①紹介文エリアに入っている画像の上にカーソルを乗せ、右クリックをし「画像のプロパティ」を開く。
②高度な設定タブの「スタイルシートクラス」欄に「autoresize」と入力する。
③OKを押し、保存をする。
しっかり保存がされていれば、ソースモードで表示した際に
「class="autoresize"」が追加されます。
＜img class="autoresize" src="“画像URL”" /＞
※ソースモードで直接記述を追加することも可能です。
【対応 3】
先述の【対応 1】での画像の表示サイズを変更の際に、
数値を「100%」として入力します。
これにより、画像がページ幅に合わせて表示されます。
| < img src="画像URL" width="100%" > |
・画像の横幅100％表示設定方法
①紹介文エリアに入っている画像の上にカーソルを乗せ、右クリックをし「画像のプロパティ」を開く。
②画像情報タブの「幅」の欄に100%と入力する。（幅100%表示の際には高さ欄は空欄にしてください）
③OKを押し、保存をする。
しっかり保存がされていれば、ソースモードで表示した際に「style="100%;"」が追加されます。
＜img src="“画像URL”" style="width: 100%;" /＞
※ソースモードで直接記述を追加することも可能です。
・[class="autoresize"]タグと100％表示の違い
100%表示を設定すると、元画像のサイズにかかわらずページ幅に合わせて表示します。
よって、元画像が小さい場合も拡大して表示するため、
画像が引き伸ばされて表示が荒くなってしまうことがあります。
