無 料 バージョン 1.01
推 奨 環 境 このレポート 上 に 書 かれている URL はクリックできます できない 場 合 は 最 新 の AdobeReader をダウンロードしてください ( 無 料 ) http://www.adobe.co.jp/products/acrobat/readstep2.html 著 作 権 について 当 教 材 は 著 作 権 法 で 保 護 されている 著 作 物 です 当 教 材 の 著 作 権 は 株 式 会 社 レアリザールに 属 します 著 作 権 者 の 許 可 なく 本 レポートの 一 部 または 全 部 を インターネット 上 に 公 開 すること オ ークションサイトなどで 転 売 すること あらゆるデータ 蓄 積 手 段 ( 印 刷 物 電 子 ファイル ビデ オ DVD およびその 他 電 子 メディアなど)により 複 製 流 用 および 転 載 することを 禁 じます 使 用 許 諾 契 約 書 本 契 約 は 本 教 材 を 購 入 した 法 人 個 人 ( 以 下 甲 とする)と 作 者 ( 以 下 乙 とする)との 間 で 合 意 した 契 約 です 本 レポートを 甲 が 受 けとることにより この 契 約 は 成 立 します 第 1 条 ( 目 的 ) 本 契 約 は 本 教 材 に 含 まれる 情 報 を 本 契 約 に 基 づき 甲 が 非 独 占 的 に 使 用 す る 権 利 を 承 諾 するものです 第 2 条 ( 第 三 者 への 公 開 の 禁 止 ) 本 教 材 に 含 まれる 情 報 は 著 作 権 法 によって 保 護 されていま す また 本 教 材 の 内 容 は 秘 匿 性 の 高 い 内 容 であり 甲 はその 情 報 を 乙 との 書 面 による 事 前 許 可 を 得 ずにいかなる 第 三 者 にも 公 開 することを 禁 じます 第 3 条 ( 損 害 賠 償 ) 甲 が 本 契 約 の 第 2 条 の 規 定 に 違 反 した 場 合 または 不 法 行 為 に 該 当 する 行 為 を 行 った 場 合 には 関 係 法 規 に 基 づき 損 害 賠 償 請 求 を 行 う 等 民 事 刑 事 を 問 わず 法 的 手 段 に よる 解 決 を 行 う 場 合 があります 第 4 条 (その 他 ) 本 教 材 の 作 成 には 万 全 を 期 しておりますが 本 教 材 を 利 用 することによって 期 待 通 りの 効 果 を 得 ることができず 万 一 如 何 なる 損 益 が 生 じた 場 合 でも 乙 は 甲 に 対 して 責 任 を 負 わないものとします p. 1
目 次 ページ 数 をクリックすると そのページに 移 動 します ペラ 10 サイトメーカーとは?... 4 シンプルなデザインと 軽 いテンプレート... 6 テンプレートはレスポンシブウェブデザインを 採 用... 7 ペラ 10 サイトメーカー サイト 作 成 編... 8 1.サイトタイトル... 12 2.サイト URL... 12 3.アクセス 解 析 タグ... 13 4.FTP 情 報... 14 5.テンプレート... 16 ヘッダー 画 像 の 挿 入 の 仕 方... 28 ヘッダー 画 像 の 削 除 の 仕 方... 32 広 告 リンクの 挿 入 の 仕 方... 34 画 像 の 挿 入 の 仕 方... 41 テーブルタグの 挿 入 の 仕 方... 48 文 字 の 装 飾 などの 仕 方... 58 作 成 したサイトをサーバーにアップロード... 61 p. 2
スマホからも 操 作 が 可 能... 64 p. 3
ペラ 10 サイトメーカーとは? ペラ 10 サイトメーカーとは ( 以 下 本 ツール)ウェブ 上 でブラウ ザから 操 作 ができる 画 期 的 な 仕 様 になっています 推 奨 ブラウザは Google Chrome(グーグルクローム)です Google Chrome ダウンロード URL https://www.google.co.jp/chrome/browser/features.html p. 4
ウェブ 上 で 操 作 ができるということは 本 ツールにアクセスができ るネット 環 境 があれば パソコンが Windows でも MAC でも OS を 選 びません またパソコンが 変 わってもスマホやタブレットから 本 ツールを 操 作 することが 可 能 なとても 便 利 なツールです 従 来 のパソコンへのインストール 型 に 比 べると はるかに 使 いやす くなっています また 直 感 的 に 使 える 操 作 性 にもこだわりました p. 5
シンプルなデザインと 軽 いテンプレート 無 料 版 ではテンプレートを 青 色 にてご 用 意 しています また デザ インをシンプルにし HTML のソースもできる 限 りムダを 省 いて 軽 くしているため SEO 面 での 優 位 性 もあります 正 規 版 では 10 色 のテンプレートがありますので どのジャンルの 広 告 にも 適 応 することができます p. 6
テンプレートはレスポンシブウェブデザインを 採 用 サイトの 表 示 は パソコン タブレット スマホと 3 デバイスに 対 応 した レスポンシブウェブデザインを 採 用 しています 1 つのサイトを 作 るだけで 3 種 類 のデバイス 表 示 も 可 能 となってい るので わざわざスマホ 用 のサイトを 作 る 必 要 もありません p. 7
ペラ 10 サイトメーカー サイト 作 成 編 1 2 3 クリック 1.メールアドレス:ご 自 身 のメールアドレスを 入 力 します 2.ログインパスワード:ご 自 身 のパスワードを 入 力 します 3. ログイン をクリックします p. 8
ログイン 情 報 は 必 ずコピー&ペーストで 入 力 してください その 時 見 えない 余 分 なスペースなどを 知 らずにコピーしてしまっ ていると ログインできません p. 9
本 ツールにログインした 最 初 の 画 面 トップページです クリック 左 のツールメニューにある ペラサイト 新 規 作 成 をクリックしま す p. 10
1 2 3 4 5 必 要 項 目 を 埋 めていきます p. 11
1.サイトタイトル サイトタイトルを 入 力 します 2.サイト URL サイト URL を 入 力 します このマニュアルでは X ドメインの 無 料 レンタルサーバーの URL です https://www.xdomain.ne.jp/ ( X ドメインのアカウント 取 得 などについては 別 マニュアルの X ドメイン 開 設 マニ ュアル を 参 照 ください ) p. 12
3.アクセス 解 析 タグ 必 要 な 方 だけ 入 力 してください 空 白 にしておいて 後 に 入 力 する ことも 可 能 です p. 13
4.FTP 情 報 X ドメインの FTP アップロード 先 には 既 に 入 力 されている 半 角 の / のままで 設 定 します ご 自 身 の FTP 情 報 を コピー&ペースト( 誤 情 報 を 防 ぐため)で 入 力 します 今 回 のマニュアルでは X ドメインの 無 料 レンタルサーバーの FTP 情 報 です ( X ドメインのアカウント 取 得 などについては 別 マニュアルの X ドメ イン 開 設 マニュアル を 参 照 ください ) p. 14
FTP ホスト:ご 自 身 のホスト 名 FTP ユーザー:ご 自 身 のユーザー 名 (http://と 最 後 の/を 省 いた URL) 例 ) http://thinhair.html.xdomain.jp/ 〇 thinhair.html.xdomain.jp FTP パスワード:ご 自 身 が 設 定 したパスワード p. 15
5.テンプレート クリック テンプレートを 選 択 します 最 後 に ペラサイト 作 成 ボタンをクリックします p. 16
画 面 が 切 り 替 わり 問 題 なければ 正 常 にサイト 登 録 が 完 了 しまし た と 表 示 します p. 17
クリック 左 のツールメニューにある ペラサイト 一 覧 をクリックします クリック 先 ほど 作 成 した サイトタイトルをクリックします p. 18
クリック 左 のツールメニューにある メインページ 管 理 をクリックします p. 19
用 意 していた サイト 説 明 文 (meta ディスクリプション) と 狙 うキーワードを 含 む 3 つ 程 度 の キーワード(meta キーワード) を 入 力 します キーワードは, カンマで 区 切 ります 例 ) 髪 が 薄 くなってきた, 抜 け 毛,ハゲ サイト 説 明 文 は ヘッダー 部 分 の 表 示 になるので 空 白 で OK です p. 20
見 出 し 1 見 出 しごとに 用 意 していた 記 事 をコピーして 貼 り 付 けていきます p. 21
見 出 し 2 p. 22
見 出 し 3 p. 23
見 出 し 4 サイト 内 容 編 集 の 管 理 画 面 で 見 出 しの 数 が 足 りなくなった 時 は 以 下 のように 追 加 できます p. 24
見 出 しになる 文 節 を マウスでコピーする 要 領 で 選 択 します p. 25
文 節 を 選 択 した 状 態 で 赤 枠 の 標 準 ボタンをクリックすると 見 出 しの 選 択 ができるようになります 今 回 は 見 出 し 3 を 選 び ました p. 26
クリック 全 ての 入 力 が 終 われば 最 後 に サイト 内 容 更 新 をクリックしま す 画 面 が 切 り 替 わり トップページの 更 新 が 完 了 しました と 表 示 さ れます これで サイト 作 成 ツールに サイトを 設 定 できました p. 27
ヘッダー 画 像 の 挿 入 の 仕 方 クリック 画 像 管 理 をクリックします クリック ファイルを 選 択 をクリックします p. 28
クリック 事 前 に 用 意 しているヘッダー 画 像 を 選 択 し 開 く をクリックしま す ( 使 用 する 画 像 の 横 幅 は 900px が 推 奨 です ) アップする 画 像 のファイル 名 は 必 ず 半 角 英 数 字 にしてください 半 角 英 数 字 以 外 のファイル 名 ( 例 :ヘッダー.jpg など)だと 最 後 の アップロードの 際 に 正 常 にアップロードできなくなります p. 29
クリック ヘッダー 画 像 更 新 をクリックします クリック ヘッダー 画 像 設 定 を 更 新 します とお 知 らせの 窓 が 立 ち 上 がりま すので OK をクリックします p. 30
赤 枠 のように 選 択 したヘッダー 画 像 が 画 像 情 報 編 集 の 画 面 に 表 示 されます p. 31
ヘッダー 画 像 の 削 除 の 仕 方 チェック を 入 れる クリック 設 定 画 像 を 削 除 する にチェックを 入 れて ヘッダー 画 像 更 新 ボタンをクリックします p. 32
クリック ヘッダー 画 像 設 定 を 更 新 します と 窓 がでますので OK をク リックします ヘッダー 画 像 が 削 除 されました p. 33
広 告 リンクの 挿 入 の 仕 方 まず 広 告 のタグを 用 意 します テキストリンクでもバナー 画 像 リ ンクでも 同 じ 操 作 になります アフィリエイト B の 広 告 取 得 画 面 広 告 タグを 全 て 選 択 し コピーします p. 34
本 ツールへ 移 動 します クリック 赤 枠 の ソース のアイコンをクリックします p. 35
ソースモードに 切 り 替 わりました p. 36
クリック 広 告 リンクを 貼 りたい 場 所 を 一 度 クリックします カーソルが 点 滅 します p. 37
クリック マウスの 右 クリックをし 表 示 される 窓 にある 貼 り 付 け をクリ ックするか キーボードの CTRL+V で 広 告 タグを 貼 り 付 けま す p. 38
広 告 タグを 貼 り 付 けることができました クリック もう 一 度 ソース のアイコンをクリックします p. 39
テキストリンクとして 広 告 タグが 表 示 されます バナーリンクを 貼 りたい 場 合 も 同 じ 作 業 で 挿 入 します p. 40
画 像 の 挿 入 の 仕 方 クリック 画 像 を 入 れたい 場 所 をクリックします クリック 赤 枠 の アイコンをクリックします p. 41
クリック イメージプロパティ の 窓 が 立 ち 上 がります 赤 枠 の サーバーブラウザー のタブをクリックします p. 42
クリック アップロード をクリックします p. 43
クリック サイトに 挿 入 したい ご 自 身 のパソコン 内 にある 画 像 をクリックし 選 択 した 状 態 で 開 く をクリックします アップする 画 像 のファイル 名 は 必 ず 半 角 英 数 字 にしてください 半 角 英 数 字 以 外 のファイル 名 ( 例 :ヘッダー.jpg など)だと 最 後 の アップロードの 際 に 正 常 にアップロードできなくなります p. 44
ダブル クリック 先 ほど 選 択 した 画 像 の 上 で ダブルクリックします p. 45
クリック イメージプロパティ に 自 動 で 切 り 替 わります OK をクリックします p. 46
画 像 を 挿 入 することができました p. 47
テーブルタグの 挿 入 の 仕 方 クリック テーブルを 挿 入 したい 場 所 をクリックします p. 48
クリック 赤 枠 の アイコンをクリックします p. 49
テーブルプロパティ の 窓 が 立 ち 上 がります 必 要 な 行 数 と 列 数 を 入 力 します p. 50
本 マニュアルでは 5 行 と 3 列 にしてみました テーブルの 完 成 イメージ 3 列 5 行 p. 51
幅 の 窓 に 最 初 は 500 の 数 字 が 入 っているので 消 して 空 白 にして おきます 理 由 は レスポンシブデザインに 対 応 する 為 です 数 字 を 入 れてしまうと スマホ 表 示 した 場 合 にデザインが 崩 れてし まいます p. 52
空 白 クリック 最 後 に OK をクリックします p. 53
テーブルが 挿 入 されました 文 字 などが 入 っていない 為 に 凝 縮 され た 状 態 ですが 問 題 ありません p. 54
枠 内 に 文 字 を 入 れました まだ 凝 縮 感 はありますが 実 際 のサイト での 表 示 は 問 題 ありません p. 55
実 際 にサイトにアップした 時 の パソコンの 表 示 です p. 56
スマホ 表 示 でも デザインは 崩 れていません p. 57
文 字 の 装 飾 などの 仕 方 上 図 のような 文 字 の 装 飾 の 仕 方 について 解 説 していきます 文 字 の 装 飾 には 正 解 がありません 強 調 して 伝 えたいと 思 う 部 分 に 赤 色 や 蛍 光 ペンを 引 く 感 じで 大 丈 夫 です ただ 多 く 装 飾 をしてしまうと ごちゃごちゃしてしまい 文 章 が 読 み 難 くなりますので できるだけシンプルを 心 掛 けてください p. 58
装 飾 をしたい 文 字 を 選 択 した 状 態 で 各 アイコンをクリックします 文 字 の 色 を 変 更 できます このように 文 字 に 傾 向 ペンを 引 いたように 装 飾 できます このように p. 59
文 字 を 太 字 にできます このように 文 字 の 大 きさを 変 えることができます ( 初 期 の 大 きさは 16px) このように(18px) p. 60
作 成 したサイトをサーバーにアップロード クリック 無 料 講 座 で 配 布 する 本 ツールでは サブページ 作 成 機 能 はありません 左 のツールメニューにある サイト 生 成 ボタンをクリックします p. 61
サイトの 生 成 が 完 了 しました と 表 示 されます クリック FTP アップロード をクリックします p. 62
クリック サイトのファイルが サーバーにアップロードができました 最 後 に URL を 確 認 する ボタンをクリックすると 作 成 したサイ トを 確 認 することができます p. 63
スマホからも 操 作 が 可 能 本 ツールは 外 出 先 で 確 認 をしたり 記 事 の 追 加 や 修 正 をしたい 時 も スマホから 操 作 をすることができます その 場 合 ログイン 画 面 の URL ログインメールアドレス ログイ ンパスワードの 情 報 を パソコンのメールからスマホに 送 っておく と 便 利 です p. 64
メール アドレス パスワード タップ ログイン 情 報 の メールアドレスとパスワードを 入 力 し ログイン をタップします p. 65
タップ パスワードを 保 存 をクリックしておくと 次 回 からのログイン が 便 利 になります p. 66
タップ スマホから サイト 作 成 ツールにログインした TOP ページです 編 集 するには 赤 枠 のメニューアイコンをタップします p. 67
メニューが 表 示 しました 以 下 ご 自 身 の 作 業 に 沿 ったメニューを タップして 進 めてください p. 68
当 マニュアルに 関 するご 質 問 お 問 い 合 わせは 下 記 ページよりお 願 いいたします http://pera10.net/pera1freecourse/contact/ 以 上 となります お 疲 れ 様 でした 当 マニュアル 執 筆 担 当 藤 本 洋 司 (フジモン) 監 修 株 式 会 社 レアリザール p. 69