サイト 作 成 の 流 れ 手 順 1. サーバーの 用 意 手 順 2. ドメインの 取 得 手 順 3.サーバーの 設 定 手 順 4. サーバーにワードプレスのインストール 手 順 5. サイトカスタマイズ 手 順 6. 各 種 プラグインの 設 定 方 法 1
手 順 1-1. サーバーの 用 意 エックスサーバー:h@p://www.xserver.ne.jp/ ( 他 にもレンタルサーバーはたくさんありますが スペックを 考 慮 して ここでは エックスサーバー を 取 得 します ) 以 下 手 順 に 従 って サイト 作 成 を 行 ってくだ さい 2
手 順 1-2. サーバーの 用 意 エックスサーバーメニュー 画 面 :h@p://www.xserver.ne.jp/ に アクセス お 申 込 み をクリック サーバーアカウントの お 申 込 み をクリック お 申 込 みフォーム をクリック 四 角 枠 に 任 意 のサーバーIDを 記 載 して 検 索 する 同 意 する をクリック Copyright 2013 Improbic corpora8on All Rihgt 3
手 順 1-3. サーバーの 用 意 必 要 事 項 を 記 入 して お 申 込 み 内 容 の 確 認 をクリック なお プランは X10 が 最 も 安 いプランなのでここでは X10 を 選 ぶ 事 を 推 奨 します Xserver サーバアカウント 設 定 完 了 のお 知 らせ ( 試 用 期 間 ) というメールが 届 きますので ここでそ のメールを 保 管 してください P11から 使 用 します お 申 込 みする[ 確 定 ] をクリック これで エックスサーバー のお 申 込 みは 完 了 です これでサーバーの 用 意 がで きましたので 次 はドメインの 取 得 をしていきます 4
手 順 2-1. 独 自 ドメインの 取 得 バリュードメインh@p://www.value- domain.com/にアクセスし て ユーザー 登 録 をクリック アクセスできない 場 合 は バリュードメイン で 検 索 をすると でてきます ユーザー 登 録 が 完 了 したので ログイン をクリック 必 要 事 項 を 記 入 し 規 約 に 同 意 する にチェックを 入 れて ユーザー 登 録 をクリック 5
手 順 2-2. 独 自 ドメインの 取 得 ログイン 後 新 規 ドメインの 取 得 をクリック あなたの 希 望 するドメインの 取 得 が 可 能 であれば 取 得 する をクリック もし 取 得 できないドメインであれば 再 度 別 のドメイン 名 で 検 索 をする 取 得 したい 独 自 ドメイン 名 を 検 索 する 例 ) typing7.com を 取 得 したい 場 合 は [typing7 のみを 入 力 し.com.net にチェックをいれて 検 索 します 取 得 が 完 了 したら 不 足 金 額 円 のご 入 金 について とい う 欄 の 下 図 の 枠 部 分 をクリックする 6
手 順 2-3. 独 自 ドメインの 取 得 金 額 を 確 認 して 次 の 画 面 でお 支 払 い をクリック 決 済 する をクリック (クレジット 決 済 の 場 合 ) 決 済 サイトへ をクリック 支 払 いが 完 了 したら ショッピングサイトへ 戻 る をクリック 進 む (ここではクレジット 決 済 の 例 に 記 載 しています ) 7
手 順 2-3. 独 自 ドメインの 取 得 購 入 画 面 に 戻 り 引 き 続 き 手 続 きを 進 めてください に 進 む これでドメインが 取 得 されま した 登 録 をクリック ドメイン 登 録 完 了 メールが 届 いたら 正 常 に 登 録 できてい ます 8
手 順 2-4 (ドメインとサーバーの 関 連 付 け) バリュードメインのトップ 画 面 の1 メニュー をクリックして 左 側 に 出 てくる2 ネームサーバーの 変 更 をクリック ネームサーバー1 5 までを 下 図 の 入 力 内 容 と 一 緒 の 内 容 を 入 力 して 保 存 する をクリック 2 1 メニュー をクリック ドメインにチェックボックスを 入 れて 変 更 をクリック ネームサーバー1:NS1.XSERVER.JP ネームサーバー2:NS2.XSERVER.JP ネームサーバー3:NS3.XSERVER.JP ネームサーバー4:NS4.XSERVER.JP ネームサーバー5:NS5.XSERVER.JP 上 記 内 容 を 入 力 して 下 さい 9
手 順 2-5 (ドメインとサーバーの 関 連 付 け) Okを 押 します これでネームサーバーの 変 更 が 完 了 です ここで 先 ほどP5で 保 管 をして 頂 いた Xserver サーバアカウント 設 定 完 了 のお 知 らせ ( 試 用 期 間 ) メールを 確 認 してください こち らのメールを 使 って 次 に 進 めていきます 取 得 したドメインをインターネットのURLに 入 力 して 表 示 できる ようになるまでには 数 分 2 日 程 度 かかります これはインター ネット 世 界 の 混 雑 具 合 によるためですので 期 間 を 短 くしたりする 方 法 は 無 いです 関 連 づけが 完 了 するまでは URLがみつけられません というよう なエラーメッセージが 表 示 されます 10
手 順 3-1. エックスサーバーの 設 定 前 ページで 届 いたメール 文 中 に 記 載 されている ユーザーア カウント 情 報 のIDとパスワードで インフォパネル: h@ps://www.xserver.ne.jp/login_info.phpにアクセスして ロ グイン します チェックボックスを 入 れて お 支 払 い 方 法 を 選 択 する をク リックする ( 更 新 期 間 は 任 意 の 期 間 をお 選 びください) 4つの 支 払 い 方 法 から 希 望 のものを 選 択 して 枠 部 分 をク リックする 料 金 のお 支 払 い をクリック どれか 選 択 11
手 順 3-2. エックスサーバーの 設 定 クレジットカードでの 支 払 いを 選 択 した 場 合 は 必 要 事 項 を 記 入 して カードでのお 支 払 い( 確 認 ) をクリック 支 払 いを 済 ませたら 左 上 のロゴマークをクリックしてメ ニュー 画 面 にアクセス サーバーパネルの ログイン をクリック カードでの 支 払 い( 確 定 )をクリック 12
手 順 3-3. エックスサーバーの 設 定 ドメイン 設 定 をクリック 先 ほどP7で 取 得 をしたドメインを 記 入 して ドメインの 追 加 ( 確 認 ) をクリック ドメインの 追 加 設 定 をクリック ドメインの 追 加 ( 確 定 ) をクリック 13
手 順 4-1. サーバーに ワードプレスのインストール インフォパネルのメニュー 画 面 で サーバーパネルの ログイ ン をクリック プログラム のインストールをクリック 先 ほど 登 録 をしたドメインに なっているか 確 認 する 自 動 インストール をクリック WordPress 日 本 語 版 の インストール 設 定 をクリック 14
手 順 4-2. サーバーに ワードプレスのインストール 必 要 事 項 を 記 入 して インストール( 確 認 ) をクリック これでサーバーにワードプレスがインストールされました 下 図 枠 部 分 を クリックして WordPressログイン 画 面 へ ここで 以 下 内 容 を 必 ずメモをとってください インストールURL : 入 力 の 必 要 はございません ブログ 名 : 任 意 のWordPressブログ 名 ( 後 からでも 変 更 可 能 ) ユーザー 名 :WordPressのログイン 時 に 使 用 するユーザー 名 パスワード :WordPressのログイン 時 に 使 用 するパスワード メールアドレス :WordPressからの 情 報 が 届 くアドレス データベース : 自 動 でデータベースを 生 成 する にチェックを 入 れてお きます 上 記 四 角 枠 のワードプレスログインURL ログインID ログインパスワード (ワードプレスのログイン 時 に 使 用 します ) (ワードプレスのログインURLはドメインにより 異 なるため メモが 必 要 ) MySQLデーターベース: MySQLユーザ: MySQL 接 続 パスワード: も メモして 保 管 をするようにしてください 15
手 順 4-3. ワードプレスへのログイン このように アクセスができない 場 合 は 数 分 数 時 間 時 間 をおいてから 再 度 アクセスを 行 ってください ( 複 数 を 追 加 する 場 合 は1 日 2 日 かかることもあります ) これで あなたのサイトの 管 理 画 面 にログインをす ることができました 正 常 にアクセスが 出 来 た 場 合 このページに 飛 びます (こ の 際 このログインURLをブックマークして 下 さい ログイン URLはドメインによってそれぞれ 異 なるURLになるため) 1ページ 前 で メモを 取 って 頂 いた 情 報 でログインをしてくださ い 次 はあなたのサイトをカス タマイズしていきます 16
手 順 5-1 プラグインのインストール 以 下 3 個 のプラグインを 手 順 に 沿 ってインストー ルして 下 さい ワードプレス 管 理 画 面 左 側 にある プラグインの 新 規 追 加 をクリック 1TinyMCE Advanced ビジュアルエディタ 機 能 アップ 2Advanced Custom Fields 投 稿 ページにオプション 入 力 エリアを 表 示 3AddQuicktag クイックタグを 簡 単 に 追 加 管 理 Breadcrumb NavXT と 検 索 窓 に 入 れて プラグインを 検 索 する 17
手 順 5-2 プラグインのインストール 検 索 対 象 のものが 出 てくるので いますぐインストール をク リック プラグインを 有 効 化 をクリックしたらそのプラグインがあな たのワードプレスに 設 定 されました OK を 押 す 同 様 手 順 で 他 2つのプラグインも インストールをして 有 効 化 させるところ までを 終 わらせてください 18
手 順 6-1 サイトカスタマイズ それでは まず 左 側 メニュー 外 観 テーマ を 選 択 します ワードプレスにページを 作 成 する 際 に 投 稿 と ページ( 固 定 ページ) があります ニッチ 生 の 皆 さまは 基 本 的 に ページ を 使 います 1が 現 在 あなたが 使 用 しているあなたのサイトテンプレート になります ここでは 初 期 テンプレートの Twenty Thirteen を 使 用 します もし 下 の 利 用 可 能 なテーマに 入 っていて 適 用 されていなかったら 2の 有 効 化 文 字 をクリックして 現 在 のテーマにしてください 1 wordpressは CMS(Contents Management System)といわれ るもので デザインの 変 更 などを 行 うとき 全 てのページ 一 つ ずつ 変 更 しなくても 一 気 に 全 てのページにデザインを 変 更 したり 管 理 画 面 からホームページの 文 章 や 画 像 を 変 更 でき る 仕 組 みがあります また wordpressの 管 理 の 仕 組 みには ホームページ ホームページに 組 み 込 まれたブログ の 管 理 ができるようになっています 今 回 のニッチキャッシュフロースクールで 使 う 販 売 サイトでは 基 本 的 にブログは 書 かないため ホームページ(ページ)のみ を 使 っていきます ( 固 定 ページ のこと) 2 19
手 順 6-2 サイトカスタマイズ 投 稿 ページの 作 成 左 側 メニューの 投 稿 新 規 追 加 をクリックします 公 開 ボタンをクリック 後 サイトを 表 示 でトップページを 確 認 します 右 側 にある 選 択 を ビジュアル にして タイトル :サンプルページ 本 文 :サンプル 投 稿 ページ と 記 入 して 右 側 の 公 開 ボタンをクリックしたら 投 稿 ページが 公 開 されます 現 在 トップページはこのようになっています この 画 像 ヘッダー 文 字 部 分 の オールマイティー には あ なたのブログ 名 が 入 ります ビジュアル を 選 択 20
手 順 6-3 サイトカスタマイズ 固 定 ページの 作 成 各 種 カスタマイズ 左 側 メニューの 固 定 ページ 新 規 追 加 を 選 択 します 外 観 カスタマイズ を 選 択 します 先 ほどの 投 稿 ページ 同 様 で ビジュアルエディタにして タイトル: サンプルページ 本 文 : サンプル 固 定 ページ と 記 入 をし 右 側 の 公 開 ボタンをクリックします カスタマイズできる 画 面 にきたら サイトタイトルとキャッチフ レーズ 欄 で サイトのタイトル と キャッチフレーズ を 好 きな 文 字 に 変 更 することが 可 能 です ビジュアルを 選 択 21
手 順 6-4 サイトカスタマイズ チェックを 外 すと 文 字 を 消 す 事 ができます 初 期 設 定 では フロントページのチェックボックスは 最 新 の 投 稿 にチェックが 入 っており 投 稿 ページがトップページにく るようになっています ここで チェクボックスに 先 ほど 作 成 した サンプルページ を 選 択 します サイトのタイトル はタイトルバーに 表 記 されます 色 欄 で 文 字 の 色 を 変 更 できます すると 四 角 枠 で 囲 んであるトップページ 固 定 ページにが 変 わりました 22
手 順 6-5 サイトカスタマイズ 外 観 ヘッダー を 選 択 します ヘッダーテキスト 文 字 色 を 任 意 で 設 定 後 変 更 を 保 存 をクリックします ファイルを 選 択 して アップロード を 選 択 します サイトを 表 示 をクリックしてサイトを 確 認 します 画 像 が 大 きい 場 合 は トリミングをして 切 り 取 って 公 開 す る を 選 択 します 23
手 順 6-6 サイトカスタマイズ こちらが 変 更 後 のトップページになります タイトル 本 文 をビジュアルエディタで 入 力 後 更 新 これを サンプルページ! 6まで 作 成 と 公 開 をしてから サ イトを 確 認 すると ナビゲーションに 追 加 分 が 反 映 されました ナビゲーションの 追 加 先 ほど 同 様 に 固 定 ページを 新 しく 作 成 していきます 固 定 ページ 新 規 追 加 を 選 択 固 定 ページの 編 集 固 定 ページ 一 覧 サンプルページの 編 集 文 字 をクリック 24
手 順 6-7 サイトカスタマイズ その 後 メディアを 追 加 ボタンをクリック 編 集 画 面 では Enterキーのみ の 改 行 と Enter + Shijキー の 改 行 があります 以 下 の 画 像 のように 改 行 の 行 間 が 異 なります 場 面 に 応 じて 使 い 分 けてください 挿 入 したい 画 像 を 選 択 してアップロード 画 像 が 挿 入 されました 25
手 順 6-8 サイトカスタマイズ 使 用 可 能 なウィジェット 一 覧 サイトにはこのように 反 映 がされました 外 観 ウィジェット サイドバーが 作 成 できました 副 ウィジェットエリアに テキスト をドラッグ&ド ロップ 26
TinyMCE Advanved の 設 定 設 定 TinyMCE Advanved を 選 択 サンプルページの 編 集 画 面 で 四 角 枠 のところにボタンがた くさん 増 えました ドロッグ&ドロップで 追 加 したTinyMCE Advanved 機 能 一 覧 1 引 用 タグをつける 2 文 字 を 均 等 割 り 付 けにする 3 切 り 取 りする 四 角 枠 にある 各 種 ボタンをドラッグ&ドロップ 4コピーする 5 貼 りつけする 6 検 索 する / 検 索 して 置 換 を 行 う 7 文 字 のフォントを 指 定 する 8 文 字 のスタイルを 指 定 する 9コードを 整 形 する 10テーブルを 挿 入 する( 別 ウィンドウが 立 ち 上 がります)( 行 のプロパティ セルの プロパティ 行 を 上 に 挿 入 する 行 を 下 に 挿 入 する 行 を 削 除 する 列 を 左 に 挿 入 する 列 を 右 に 挿 入 する 列 を 削 除 する セルの 結 合 を 解 除 する セルを 結 合 を ドロッグ&ドロップ する) 11 引 用 エレメントを 挿 入 する( 別 ウィンドウが 立 ち 上 がります) 12エレメントを 挿 入 する( 別 ウィンドウが 立 ち 上 がります) 全 てドラッグをしたら Save Changes をクリック 13エレメントを 削 除 する( 別 ウィンドウが 立 ち 上 がります) 14 略 語 エレメントを 挿 入 する( 別 ウィンドウが 立 ち 上 がります) 15 頭 字 語 エレメントを 挿 入 する( 別 ウィンドウが 立 ち 上 がります) 16 新 規 レイヤーの 挿 入 ( 前 面 へ 移 動 背 面 へ 移 動 絶 対 位 置 指 定 の 切 り 替 え) 17 水 平 線 を 挿 入 する( 別 ウィンドウが 立 ち 上 がります) 18HTMLエディタを 開 く( 別 ウィンドウが 立 ち 上 がります) 19 制 御 文 字 の 表 示 をする 20 改 行 なしスペースを 挿 入 する 21ガイドラインと 非 表 示 項 目 の 切 り 替 えをする 22 日 付 を 挿 入 する 23 時 刻 を 挿 入 する 24アンカータグをつける( 別 ウィンドウが 立 ち 上 がります) 25スペルチェックをする 27
AddQuicktag の 設 定 予 めタグを 登 録 します 予 め 登 録 しておいたデザイン (フォント 文 字 サイズ 文 字 色 など)が 一 括 で 適 用 できま す 好 みのタグを 入 れて 全 部 のチェックボックス 入 っている 事 を 確 認 して 変 更 を 保 存 (ここでは 明 朝 体 を 入 れました) 固 定 ページ ビジュアルエディタ( 編 集 画 面 )にて 右 側 に Quicktags と 書 かれた 文 字 を 選 択 すると 先 ほど 設 定 した 明 朝 体 が 選 択 できます 設 定 AddQuicktag を 選 択 します 明 朝 体 をクリックすると 選 択 されていた 文 字 が 明 朝 体 に 変 わりました 28
Breadcrumb NavXT の 設 定 これは LP Maker を 持 っている 方 のみ Breadcrumb NavXTを 有 効 にする 事 で パンくずりリスト を 表 示 させる 事 ができます パンくずリストは ウェブディ レクトリのような 大 規 模 なウェ ブサイト 内 において 利 用 者 がサイト 内 での 現 在 位 置 を 見 失 わないようにし ナビ ゲーションを 助 けるために 使 われます 外 観 プラグイン 新 規 追 加 Breadcrumb NavXT をインストールして 有 効 化 します 有 効 化 する 事 で 四 角 枠 部 分 パンくずリスト が 表 示 されま す 29
解 決 ページ Q.ドメイン 名 を 決 めるコツはありますか? A.ドメインを 複 数 形 にする 8ps kit toolsなど 場 面 に 応 じた 短 いワードの 挿 入 同 義 語 を 探 す Q.ヘッダーの 初 期 サイズを 教 えて 下 さい A. 1カラムの 場 合 : 横 900px/780px/700pxです ( 縦 は 任 意 ) 2カラムの 場 合 : 横 1000px 縦 200px ワードプレスの 各 種 細 か い 設 定 をしたい 場 合 タグ を 挿 入 したい 場 合 操 作 に 困 った 場 合 などは Q. 改 行 について A.Enterキーは 段 落 を 変 えます Shij + Enterキーは 段 落 をあけないで 改 行 します Q. 編 集 画 面 の ビジュアル と テキスト の 違 いは? A. ビジュアル は 入 力 した 内 容 がそのまま 反 映 されます テキスト は HTML 形 式 で 入 力 したものが 反 映 されます 検 索 すれば 必 ず 方 法 が 見 つかります 30
LP Maker サイトを 作 成 する 際 に より 手 軽 にそして 購 入 率 の 高 いサイトに 仕 上 げる 作 業 をボタンできる ように 製 造 者 と 打 ち 合 わせを 重 ね 作 成 した ものです ぜひ 使 用 するようにして 下 さい LP Maker お 申 込 みページ: h@ps://www.naturalsuccess.jp/lpmaker/ 31