サイト職人 クイックマニュアル
Ver.6.0対応版 （2011/6/1）目 次
第1章
準備と基本設定
1. ホームページの構成と原稿の準備 ･･･04 （ ホームページの原稿準備のポイント ） ･･･05 2. 基本設定 ･･･06 3. デザインの選択 ･･･09 4. オリジナルデザインの作成 ･･･11 5. ページの書き出し（サイトの再構築） ･･･12第2章
ホームページ入力作業
1. メニュー／ページ編集画面について ･･･15 （ ソート番号とは ） ･･･16 2. 新規ページの作成 2-1. 新規ページ作成画面について ･･･17 2-2. 新規ページの作成 ･･･18 2-3. 入力補助機能 ･･･21 2-3-1. 画像・ファイルのアップロード ･･･22 2-3-2. 画像・ファイルの管理 ･･･25 2-3-3. 太字／イタリック／文字拡大／文字縮小 ･･･26 2-3-4. リンク ･･･27 2-3-5. 文字色の変更 ･･･28 2-3-6. 背景色の変更 ･･･29 2-3-7. リスト ･･･30 2-3-8. 水平線 2-3-9. 引用 ･･･31 2-3-10. 左揃え／中央揃え／右揃え／均等割付 ･･･32 2-3-11. 表組み（テーブル） ･･･33 2-3-12. テンプレートの挿入 ･･･38 2-3-13. 特殊文字 ･･･39 2-4. HTMLモードについて ･･･40 2-5. ブロック表示／非表示設定 ･･･41 3．HOME（トップページ）の作成 ･･･42 4．お知らせページの作成 ･･･44 5．お問い合わせページの作成（メールフォームの設置） ･･･46第３章
データのバックアップ
1. データのバックアップと復元 ･･･52 1-1. データのバックアップ 1-2. データの復元第４章
本番サーバ転送作業
1. 作成したページの公開 ･･･54 1-1. テストサーバ（STAGING SERVER）と 本番サーバ（LIVE SERVER） 1-2. 本番サーバ（LIVE SERVER）への転送第５章
本番サーバファイル管理
1.本番サーバファイル管理 ･･･57第６章
メルマガ配信
1. メルマガ配信リスト作成 ･･･59 2. メルマガ配信 ･･･61第７章
マルチアカウント設定
1.マルチアカウント設定 ･･･661. ホームページの構成と原稿の準備
ホームページの構成案のことをよく「ツリー図」と言います。 トップページを頂点として、カテゴリ、詳細ページと末広がり な形になるからです。 まずは、サイト職人を触る前に、どのようなホームページを作るのか、全体の構成と各ページの原稿を事前に準備しておきましょう。 次に各ページの原稿を準備します。 原稿は、メモ帳など、使い慣れたソフトを使って準備します。必ずデジタルのテキストデータで準備してください。 後でサイト職人でページを作成する際に、簡単にコピーできるからです。1-1. 構成を考える
トップページ カテゴリ1 カテゴリ2 カテゴリ3 詳細ページ1 詳細ページ2 詳細ページ3 手書きでも良いので、まずはホームページの全体像を考え てみましょう。 ポイントはカテゴリの作り方です。今後、ページを増やす予 定がある場合は、ページを増やしやすいようにカテゴリを決 めましょう。1-2. 各ページの原稿を準備する
※WordやPower pointなど、文字フォントの形式（「MS Pゴシック」「Arial」など）を指定できるエディタの場合、
新たに搭載されたWYSIWYG機能（P.20）により、そのソフトで指定している文字フォントの情報がそのままサイト職人で 作成したページにも反映されてしまいますので、メモ帳など、シンプルなテキストエディタでの準備を推奨いたします。
ホームページの原稿を準備するにあたって最大のポイントがあります。それは
ホームページの原稿準備のポイント
タイトル、見出し、文章の構造を意識し、タイトルと見出しにキーワードを上手く入れる
ということです。 「タイトル、見出し、文章の構造を意識した文章」とは、右記のよ うな文章のことを言います。 なぜ、このような文章構造が良いのか、理由は次の2つです。 （１）多くの人が見慣れている文章構造だから タイトル 見出し 本文 雑誌をはじめ、ビジネス書や小説に至るまで、章、節、段落など で文章は構造化されています。見出しなどがなくだらだらと本文 が続く文章は、非常に読みづらく、読み手はスムーズに理解でき なくなります。特に、印刷よりも読み手にストレスを強いるインター ネットでは、小まめに見出しを入れた方がより読みやすくなります。 書き手の自己満足で終わってしまう文章にならないためにも、 きちんとタイトルや見出しを入れましょう。 索結果として表示します。換言すると、キーワードが含まれていないホームページは表示されないということです。で すから、キーワードを上手に文章の中に入れていく必要があります。 その際に、１つコツがあります。それは、検索エンジンが、本文よりも見出しを、見出しよりもタイトルを重要視すると いうことです。例えば、「税理士」というキーワードが本分にしか無いページよりも、見出しやタイトルにも「税理士」と いうキーワードが入っているページの方が、「税理士」というキーワードにとってより重要なページに違いないと判断 して、検索結果に上位に表示される可能性が高いということです。 （２）検索エンジンが理解しやすいから 見出し 本文 見出し 本文 ホームページを立ち上げたからには、できるだけ検索エンジンで ヒットして欲しいものです。 検索エンジンは、入力されたキーワードを含むホームページを検2. 基本設定
当社よりお渡ししたお客様サイト職人管理情報をご用意く ださい。
管理画面URLにアクセスすると右の画面が表示されます ので、Staging Server URLとユーザーID、パスワードを入 力し、「ログイン」ボタンをクリックしてください。
2-1. ログイン
それでは実際にサイト職人を使ってホームページを制作していきます。 各ページの制作をする前に、まずはホームページの基本的な設定を行います。 「ログイン」ボタンをクリックし、右のような管理者トップ画 面が表示されれば、ログイン成功です。2-2. 基本設定
管理者画面上部にあるメニューから「基本設定」ボタ ンをクリックしてください。基本設定画面が表示されま す。 ここでは、ホームページ全体に関する基本的な事項を 設定します。 入力が終了したら「この内容で保存する」ボタンをク リックしてください。 ※この時点では、まだサイトの確認はできません。②
①
③
④
①ホームページのタイトル ホームページ左上に常時表示されるホームページ全 体のタイトルを入力します。 ※②で画像を指定する場合も入力が必要です。 （入力例）株式会社ABC製作所 ②タイトル画像 「参照」ボタンをクリックすると、ダイアログボックスが 開き、あらかじめ準備しておいた画像をタイトル部分 に表示させることができます。ホームページのタイトル 部分に会社のロゴマークなどを入れたい場合に、ここ で画像を指定します。 ③ホームページのキャッチコピー・補足説明 このホームページがどのようなホームページなのか、 簡潔に表現します。検索キーワードを上手く入れ込む ことができれば尚良いです。 ④ページフッターのコピーライトに入れる会社名 ホームページの最下部に表示されるコピーライト表記 を入力します。 （入力例）「ABC corporation」と入力すると、ホーム ページにはCopyright © ABC corporation. All rights reserved. と 表示されます。
①
④
③
②
の指定がある場合 入力した内容は、下記のように反映されます。 ⑤アクセスログ解析ツール 埋め込みコード設定 Google Analytics 等の、アクセスログ解析ツールの設 置に必要な埋め込みコード入力欄です。 サイト職人で作成したすべてのページの</body>タグ の直前に反映されます。 ※<head>～</head>内に記述が必要な埋め込み コード等には対応しておりません、⑤
⑥
⑦
⑥ページ共通 <title> タグ設定 ブラウザのタイトルバーに表示されるページタイトルを 設定します。 ここで入力した情報は、新規のページ作成時にサイト 共通のページタイトルとして反映されます。 （入力例）｜株式会社ABC製作所⑧
⑦ページ共通 <keyword> タグ設定 ホームページの内容に関連するキーワードを入力します。 ここで入力した情報は、新規のページ作成時にサイト共通 のキーワードとして反映されます。 （入力例）ABC製作所, ソフトウェア,サイト職人,HP制作 ⑧ページ共通 <description> タグ設定 ホームページの説明を設定します 。 ここで入力した情報は、新規のページ作成時にサイト共通のページの説明として反映されます。 （入力例）ホームページをブログのように簡単に作成、更新できるＷＥＢコンテンツ管理システム「サイト職人」３. デザインの選択
画面上部のメニューから「デザイン設定」ボタンをク リックしてください。デザイン設定画面が表示されます。 「PCサイトのデザイン設定」の「テンプレートからデザ インを指定する」ボタンをクリックしてください。デザイ ンテンプレートの設定画面が表示されます。 基本装備のデザインテンプレートには、レイアウトが違 う左ナビ／2カラム／3カラムの3種類と、それぞれに青 ／赤／白の3種類のカラーがある基本テンプレートの 他に、業種別のテンプレートがあります。 デザインテンプレート名または画像をクリックすると、ど のようなデザインかを確認することができます。 設定したいデザインが決まったら、選択したデザインに チェックを入れます。 ※当マニュアルの入力例では、以後、2カラムのデ ザインを 選択したことを前提に解説していきます。 ※オリジナルデザイン設計をお申込みのお客様は、このメニューの修正は 行わないでください。デザインレイアウトが崩れる可能性があります。 １．テンプレートからデザインを指定する ２．テンプレートの反映方法を指定する 次に、デザインテンプレートの反映方法を指定します。 下記、テンプレートの反映方法のいずれかを選択して ください。 ●デザインのみ反映する 編集済みのサイトの構成データを保持したまま、デザ インテンプレートのみを反映します。 ●デザインとサイト構成データを反映 デザインテンプレート及びサイトの構成データを反映し ます。 （※「基本設定」、「メニュー／ページ編集」等のサイト 構成データが初期化されます。） 最後に「上書き許可」にチェックを入れ、「この内容で保 存する」ボタンをクリックしてください。（左ナビ） メニューが左に入り、メイン エリアは１列で構成されます。 （２カラム） メインメニューが上に入り、TOP ページはメインエリアが２列で構 成されます。下階層ページでは、 左にサブメニュー、メインエリアは 右に入ります。 （３カラム） メニューが上に入り、TOPペー ジはメインエリアは３列で構成 されます。下階層ページでは、 左にサブメニュー、メインエリア は右に入ります。
デザインの種類について
サイト職人が管 理できるデザイ ンレイアウトにつ いては、大きく右 の3つのタイプが あります。4. オリジナルデザインの作成
①「PCサイトのデザイン設定」の「オリジナルのデザ インを設定する」ボタンをクリックしてください。 HTMLとCSSの編集ができる方は、以下の方法でオリジナルのデザインを作成することもできます。 ※まずは一度基本装備のテンプレートである程度入力をしてから編集することをオススメします。 ②HTMLとCSSの各テンプレートの設定画面が表示 されます。プルダウンで編集するテンプレートを選 択してください。 ■スタイルシート ・サイト構成スタイルシート ・ページ編集画面表示用スタイルシート ※スタイルシートは任意の名前を設定し、複数作成する ことができます。 ■基本HTML ・トップページHTML ・トップページお知らせHTML ・お知らせ一覧HTML ・サイトマップHTML ■下層ページHTML ※下層ページは作成したテンプレートに任意の名前 を設定し、ページ作成時（P.15～）に、ページごと にテンプレートを選択することができます。 ■部分テンプレートHTML ※部分テンプレートHTMLで作成したテンプレートは、 ページ作成時（P.15～）にブロック内に反映することが できます。 ※オリジナルデザイン設計をお申込みのお客様は、このメニューの修正は 行わないでください。デザインレイアウトが崩れる可能性があります。5. ページの書き出し（サイトの再構築）
デザインの変更や、新たにページを追加した場合、サイトの再構築を行なうまでホームページには入力内容が反映されません。 再構築が必要な場合は、「再構築を行ってください」というメッセージが指示されますので、その際は再構築を必ず行ってください。 ① 画面上部のメニューから「サイトの再構築」ボタンを クリックしてください。サイトの再構築画面がポップ アップ表示されます。 ②「サイトを再構築する」ボタンをクリックます。 ③ 再構築の完了のメッセージが表示されたら、画面上 部のメニューから「サイトの確認」ボタンをクリックし、 ホームページを確認してみましょう。なぜ再構築が必要なの？
左図をご覧ください。 サイト職人は、入力データとデザインテンプレートファイルを 別々に管理しています。そして、再構築の指示があると、デザ インテンプレートと入力データをもとに、ホームページの書き出 しを行います。この仕組みはブログと同じです。 入力内容によっては、再構築が必要な場合と、そうでない場 合がります。 例えば、新規にページが増えて、メニューも増えた場合や、 デザインを変更したりした場合は、その反映を複数のページに いっぺんに反映しなければならないので、再構築が必要です。 しかし、とある1ページだけ、文字などを修正した場合は、その ページを保存するだけで、修正内容は反映され、再構築は必 要ありません。 再構築には、時間がかかる場合もあるので、上手に使い分 けてください。 デザインテンプレート 入力データ 再構築 ホームページ （htmlファイル） サイト職人サイト職人を複数人でご利用になる場合のご注意
サイト職人は、プログラムの性質上、1人のユーザーの利用を想定して作られており、複数人で同時に編集作業をする ことを推奨しておりません。例えば下記のようなことが起こる可能性があるからです。 ・担当者Aさんが会社案内ページを編集 ↓ ・担当者Bさんも会社案内ページを編集し始めた ↓ ・Aさんは作業が終わったので、編集内容を保存し公開した ↓ ・Bさんも作業が終わったので、編集内容を保存し公開した しかし、BさんはAさんの作業終了前のデータに対して更新作業を 行ったので、Aさんが編集した内容は失われてしまった 複数人で動作を行った場合、例えば、再構築を実行している間に他のユーザーが保存ボタンをクリックした場合、再構 築が終了するまで他のユーザーの保存動作は保留されます。 そのため、複数人で動作を行った場合、実行中の動作が終了するまで保留となるため、ブラウザやサーバ等のタイム アウト処理で中断する場合があることをご了承ください。 また、実作業者の上司や監督者である人が作業内容を確認したり、サポートのために、弊社担当者が同時にアクセス する可能性がありますため、複数人でアクセスすること自体は可能になっております。1. メニュー／ページ編集画面について
画面上部のメニューから「メニュー／ページ編集」ボタ ンをクリックしてください。メニュー／ページ編集画面が 表示されます。 ページを作成するにあた り、このソート番号が重要 です。次項以降で詳しく説 明します。 メニュー／ページ編集画面は、最も使用頻度の高い画面です。ページの追加・修正・削除は全てこの画面を基点に行います。 入力作業を終えた画面。 ページ構成がサイトマップ状に表示 され、目的のページの編集画面に すぐに移動できます。ソート番号とは
ソート番号とはメニューの並び順を決める番号のことです。 例えば、「3つの特長」,「機能一覧」,「デザイン」という3つのメニューがあったとします。それぞれ 010、020、 030という番号を割り振ると下記のように並びます。 この場合、ソート番号は、メニュー「3つの特長」の“010”からメニュー「機能一覧」の“020”の間であれば、どの番 号でも同じ結果が得られます。 単純に、番号の若いもの順に並びますので、上記の例のように番号は3桁でなくても構いませんが、1,2,3,といっ た具合にあまり連番で入力すると、後から1と2の間にメニューを追加することができなくなります。ですから、010、 020、030といった具合に、今後のページ追加も考慮して番号を振っていってください。 （※ソート番号は後から修正･変更することも可能です。） メニュー/ページ編集画面での表示 できあがりの表示 ここで「3つの特長」と「機能一覧」というメニューの間に「テストメニュー」というメニューを追加します。 そのソート番号を015とすると、下記のようになります。 メニュー/ページ編集画面での表示 できあがりの表示2-1. 新規ページ作成画面について
2. 新規ページの作成
「メニュー／ページ編集」画面から「新規のページ［ノー マル］を追加する」ボタンをクリックすると、「個別のメ ニュー／ページ作成・編集」画面が表示されます。 「個別のメニュー／ページ作成・編集」画面は主に次の 3つの構成になっています。メニュー設定
新規に追加するページのメニューをどのように表示さ せるのかの設定を行います。ページは作るけれども、 メニューには表示したくないという場合は、「メニュー 表示」という項目の「非表示にする」チェックボックスに チェックを入れます。 チェックを入れると、サイトマップにも表示されなくなり ます。ページ基本設定
新規に追加するページのタイトルや検索エンジン用の metaタグの設定、Google ウェブマスターツール（旧 Google サイトマップ）の更新頻度の設定など、ページ の基本的な設定を行います。 入力内容がどのように反映されるかは、次ページをご 参照ください。ブロック
ブロックとは「見出し」「画像」「本文」を一つの塊として 考えたもので、このブロックをいくつも組み上げてホー ムページを作っていきます。ブロックは任意の箇所に 無制限に増やすことができます。 ブロック 本文 見出し 画像2-2. 新規ページの作成
①「メニュー名」 ⑥「ディレクトリ／ファイル名」②
①
③
⑥
⑦
⑨
メニュー設定
②「階層選択・ソート番号入力」ページ基本設定
⑦「<title>タグ設定」⑧
③「メニュー表示」 メニューに表示させたい名前を入力します。 （入力例）製品サービス 作成するページの所属カテゴリとカテゴリ内の 表示順位を指定します。 ページは作るけれども、メニューには表示しない 場合、「非表示にする」の選択項目にチェックを入 れます。 チェックを入れると、サイトマップにも表示されなく なります。 自由に名前をつけられますが、あなたが管理の しやすい名前にしましょう。 ディレクトリ内に格納したい場合は、 【ディレクトリ名】/【ファイル名】と記述します。 （入力例） itemlist.html 、 item/item01.html ※②の『ディレクトリ／ファイル名に反映』ボタン をクリックすると、その階層のディレクトリ／ファイ ル名が自動反映されます。 ブラウザのタイトルバーに表示されます。 例えば“第２階層｜第１階層｜サイト名”とルールを 決め、統一した方が管理しやすいです。 （入力例）製品サービス｜ABC製作所 ⑨「<description>タグ設定」 ⑧「<keyword>タグ設定」 このページの内容に関連するキーワードを入力します。 html内のmetaタグに反映されます。 （入力例）ABC製作所, ソフトウェア,サイト職人,HP制作 このページの説明を入力します。html内のmetaタグに 反映されます。 （入力例）ホームページをブログのように簡単に作成、 更新できるＷＥＢコンテンツ管理システム「サイト職人」 <?xml version="1.0" encoding="Shift_JIS"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head>
<base href="http://1demo.site-shokunin.com/" />
<title>製品サービス｜ABC製作所</title>
<meta name="generator" content="site-shokunin 5.0" />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" lang="ja" content="ABC製作所, ソフトウェア,サ イト職人,HP制作" />
<meta name="description" lang="ja" content="ホームページをブログのよ うに簡単に作成、更新できるWEBコンテンツ管理システム「サイト職 人」" />
<link rel="stylesheet" type="text/css" media="screen" href="design/css/screen.css"/>
<link rel="stylesheet" type="text/css" media="print" href="design/css/print.css" /> </head> <body> ⑦⑧⑨の入力内容は次のようにHTMLに反映されます。
⑦
⑧
⑨
ブロック
⑬「見出し」 ブロックの見出しを入力します。⑬
⑭
⑮「本文」 本文を入力します。 ⑫「更新頻度」 Google ウェブマスターツール用の設定項目です。ク ローラー※を呼び込みたいタイミング（ページの更 新頻度）を指定してください。 ※Googleの巡回ロボット。ネット上の文書や画像な どを周期的に取得し、自動的にデータベース化する プログラム。 ⑪「使用テンプレート選択」 「デザイン設定」-「オリジナルのデザインを設定す る」-「下層ページHTML」から、下層ページのオリ ジナルテンプレートを制作した場合、ページにどの テンプレートを用いるか、選択することができます。※高度な設定
⑩「メニューclass名」 スタイルシートを編集してメニューを画像にす る際などに設定します。 基本的には空白のままで問題ありません。⑪
⑩
⑫
いろいろな形にできるブロックという単位
ブロックは常に「見出し」「画像」「本文」のセットである必要はありません。例えば、「見出し」が無い形も可能ですし、もちろん画像が無い場合もあります。 文章の“一段落”を1ブロックと考えると分かりやすいかもしれません。
2-3. 入力補助機能
サイト職人には、手軽に画像をアップロードしたり、テキストに色を付けたり強調したり等ができる入力補助機能があります。 また、新たに搭載されたWYSIWYG機能により、装飾した内容を、実際のページで表示される通りに確認することができます。 太字（強調） イタリック文字 リンク指定 リンク解除 文字サイズ変更 文字色変更 水平線 番号なしリスト 番号つきリスト 引用 左揃え 中央揃え 右揃え 均等割付 画像アップロード テンプレートの挿入 表組み（テーブル） HTMLタグの表示 WYSIWYGフルスクリーン 背景色変更 ファイル管理 文字スタイル変更 特殊文字 ファイルアップロード「参照ボタン」をクリックし、アップロードする画像を 指定します。 ポップアップウィンドウで、以下のような「ファイルアップロード画面」が表示されます。
②
①
③
④
①ファイルの指定 ②ファイル名の指定2-3-1. 画像・ファイルのアップロード
「画像のアップロード」ボタンをクリックしてください。⑤
⑥
⑦
画像を格納する際のファイル名を入力します。 ※ディレクトリ内に格納したい場合は「ディレクトリ 名/ファイル名」と記述します。 ※空白の場合は指定ファイルの名前がそのまま 付きます。 ※半角英数字以外のファイル名は文字化けしま すので避けてください。 ③画像の説明（alt属性）の指定 画像の説明（alt属性）を指定します。 alt属性とはアクセシビリティ確保のための画像の代替テキストで、画像を閲覧することの出来ない環境にある方でも、テキスト や音声ベースで情報を得ることが出来るようになります。 画像のキャプションを入力します。 入力すると、画像の下に小さな文字で説明文が入ります。 ④キャプションの指定 画像を配置する位置を設定します。 配置したい箇所のチェックボックスにチェックを付けてください。 ※画像をアップロードするだけの場合は、チェックを入れなくても構いません。 ⑤画像と文字のレイアウト指定 ※「右上に配置」を設定した場合「アップロード」ボタンをクリックし、本文入力欄に画像が表示、または画像ファイル管理画面に表示されれば画像のアッ プロードは完了です。 画像をクリックして原寸大の写真を見る形にしたい場合は、入力欄にページに掲載するサムネイル画像の横幅を入力し てください。 ⑥縮小サムネイルの表示の指定 アップロードした画像の反映方法を指定します。 ■ページに反映 本文にアップロードした画像が反映されます。 ■アップロードのみ 本文には反映せず、画像のアップロードのみを行い、ファイル管理画面に格納されます。 ※「アップロードのみ」を選択した場合、④～⑥の内容は失われます。 ⑦反映方法の指定 PDFやWORD文書等、画像以外の各種ファイルをアップロードする場合には、「その他各種ファイルのアップロード」から 操作を行ってください。アップロード方法は基本的に画像と変わりありません。 ※ファイルアップロードには「画像の説明（alt属性）の指定」「キャプションの指定」「画像と文字のレイアウト指定」「縮小 サムネイル表示の指定」がなく、代わりに「ファイルの説明（リンクテキスト）の指定」入力欄があります。
「ファイルの選択」をクリックし、アップロードする画 像を指定します。
※画像ファイルの一括アップロード
「画像のアップロード」ボタンをクリックし、 ポップアップウィンドウで「画像の一括アップロード」を 選択します。 指定した画像ファイルが並べられますので、「アッ プロード」をクリックします。 『ファイル管理』メニューを確認し、画像がアップ ロードされていれば作業は完了です。2-3-２. ファイル管理
アップロード画面から『ファイル管理』のタブをクリックすると、ファイル管理画面が表示されます。 ファイルの管理画面からアップロードした画像の一覧の確認や削除、ページへの反映を行うことができます。 ■ 画像の削除 画像一覧から、削除したい画像にチェックを入れて、「削除」ボタンを クリックしてください。 ■ ページへの反映 画像一覧から、反映させたい画像の右下にある「本文に反映」ボタンを クリックしてください。 画像一覧でファイル名または画像のサムネイルをクリックすると、画像 がオリジナルサイズでポップアップ表示されます。 ポップアップ画面から「本文に反映」ボタンをクリックしても、ページの反 映が可能です。太字（強調）にしたい文字を選択した状態で、上のメニューの「B（太字）」ボタンをクリックします。 <strong>タグが挿入され、太字に設定されました。
2-3-3. 太字／イタリック／文字スタイル変更／文字拡大／文字縮小
※同様の操作で、イタリック文字、文字スタイル変更、拡大文字、縮小文字もカンタンに設定が可能です。 ← イタリック ← 文字スタイル変更（明朝体） ← 文字縮小 ← 文字拡大2-3-4. リンク
リンクを張りたいテキストもしくは画像の該当箇所を選択した状態で、上のメニューの「リンク」ボタンをクリックします。 ポップアップウィンドウが表示されたら、外部リンク先のURL、 もしくはサイト内のリンク先を選択し、「決定」ボタンをクリックし ます。 <a>タグが挿入され、リンクが設定されます。 ※同様の操作で「リンク解除」ボタンをクリックすれば、設定したリンクを解除することができます。ご希望の色を選択してください。 「その他の色」をクリックするとポップアップウインドウが開き、 より詳細な色指定を行うことができます。 色を変更したい文字を選択した状態で、上のメニューの「文字色」ボタンをクリックします。
2-3-5. 文字色の変更
色指定のタグが挿入され、文字色が設定されました。ご希望の色を選択してください。 「その他の色」をクリックするとポップアップウインドウが開き、 より詳細な色指定を行うことができます。 背景色を変更したい文字を選択した状態で、上のメニューの「文字色」ボタンをクリックします。
2-3-6. 背景色の変更
色指定のタグが挿入され、背景色が設定されました。2-3-7. リスト
リスト（箇条書き）を選択した状態で、上のメニューの「番号なしリスト」または「番号つきリスト」ボタンをクリックします。 <ul><li>～</li></ul>または<ol><li>～</li></ol>タグが挿入され、リストが設定されました。 ← 番号つきリスト ← 番号なしリスト2-3-8. 水平線
水平線を挿入したい箇所にカーソルを合わせ、「水平線」ボタンをクリックします。 <hr />タグが挿入され、水平線が設定されました。2-3-9. 引用
<blockquote>タグが挿入され、引用表現に設定されました。
2-3-10. 左揃え・中央揃え・右揃え・均等割付
配置を修正したい文章や画像を選択した状態で、上のメニューの「左揃え」「中央揃え」「右揃え」「均等割付」ボタンをク リックします。ここでは「中央揃え」ボタンをクリックします。 <p style="text-align: center;">タグが挿入され、中央揃えに設定されました。 ※同様の操作で、左揃え、右揃え、均等割付もカンタンに設定が可能です。 ※均等割付･･･文章の両端を揃える機能2-3-11. 表組み（テーブル）
「表を挿入」ボタンをクリックしてください。
ここでは、使用頻度の高い『罫線付き表組み』と『罫線なし表組み』の作成方法について説明します。
ポップアップウィンドウで、
『罫線付き表組み』の作成方法
表組みの設定画面で、任意の列・行数を指定、クラスを 「縁あり」として、「挿入」ボタンをクリックしてください。
以下のような表組みの枠が表示されますので、必要な情報を入力してください。
『罫線なし表組み』の作成方法
表組みの設定画面で、任意の列・行数を指定、クラスを 「縁なし」として、「挿入」ボタンをクリックしてください。 以下のような表組みの枠が表示されますので、必要な情報を入力してください。 右の図のような『罫線なしの表組み』が完成します。 このように、画像を挿入することも可能です。その他の表組み作成補助機能
表組みについては、以下のような作成補助機能も用意されています。 基本設定 選択した表組みの基本設定を変更します。 行のプロパティ 選択した行のプロパティを変更します。 セルのプロパティ 選択したセルのプロパティを変更します。 行を上に挿入 選択した行の上に行を挿入します。 行を下に挿入 選択した行の下に行を挿入します。 行の削除 選択した行を削除します。 列を左に挿入 選択した列の左に列を挿入します。 列を右に挿入 選択した列の右に列を挿入します。 列の削除 選択した列を削除します。 セルの結合 数値を入力して、セルを結合させます。 セルの結合を解除 セルの結合を解除します。<th>
タグ（列／行のタイトル）の作成方法
列／行のタイトルにしたい箇所にカーソルを合わせ、「セルのプロパティ」ボタンをクリックしてください。 右の図のような設定画面が表示されます。 『セル種別』を「ヘッダ」に変更して、更新ボタンをクリック してください。 選択したセルの<td>タグが<th>タグになり、背景色・文字のスタイルが変更されます。 同様の操作を繰り返せば、表組みが完成します。2-3-12. テンプレートの挿入
ECサイトでの「カートに入れる」ボタン等、使用頻度の高いテンプレートを挿入します。 「テンプレートの挿入」ボタンをクリックすると、ポップアップウィンドウで、 右のような「テンプレートの挿入」画面が表示されます。 使用したいテンプレートを選択して、「挿入」ボタンをクリックしてくださ い。 選択したテンプレートが挿入されました。 カートに入れる カートに入れる ※上記は特定のショッピングカートを導入した場合の一例です。 ※「テンプレートの挿入」ボタンで挿入できるテンプレートは、「デザイン設定」＞「オリジナルのデザインを指定する」＞「部分 テンプレートHTML 」で追加・編集することができます。2-3-13. 特殊文字
通常のテキスト入力では表示できない特殊文字を入力します。
「特殊文字入力」ボタンをクリックすると、ポップアップウィンドウで、以下の画面が表示されます。 入力したい特殊文字を選択してください。
2-4. HTMLモードについて
「HTMLタグの表示」ボタンをクリックするとHTMLモードになり、HTMLのタグ要素の確認、記述をすることができます。 「WYSIWYG」ボタンをクリックするとWYSIWYGモードに戻ります。ページ作成に使用できないHTMLタグ要素
サイト職人では、以下のHTMLタグ要素についてはページ作成に使用することができませんのでご注意ください。xmp
xml
wbr
spacer
s
ruby
rtc
rt
plaintext
nobr
layer
frame
bgsound
rp
nolayer
multicol
isindex
dir
bgsound
rbc
noframes
menu
ilayer
commemt
basefont
rb
noembed
listing
frameset
center
applet
2-5. ブロック表示／非表示設定
各ブロックの右側には、「表示」「非表示」という選択項目が用意されています。
「非表示」を選択して入力内容を反映すると、そのブロックの入力内容は実際のページには表示されません。 先に入力内容を作成しておき、後から公開させたいときなどに利用してください。
HOME（トップページ）を編集するには、「メニュー／ページ編集画 面」からHOMEをクリックします。 HOMEの編集画面は、デザイン設定の項目で登場した「カラム」毎 にブロックを入力する以外は、P15で解説の「新規ページ作成」画 面とほとんど同じです。
3. HOME（トップページ）の作成
カラムの数はデザイン設定画面で設定したデザ インで決定されます。利用できるレイアウトに 「○」の表記が入ります。メニュー設定
ページ基本設定
カラムAのブロック
カラムBのブロック
HOME（トップページ）の入力例
ここでは右のようなレイアウトを作成する場合の入力例を見ていきます。 利用できるレイアウトは下のような2カラムのものに「○」の表記が入っ ています。Aカラム
Bカラム
カラム内のブロックの作成 カラム内のお知らせエリアの作成 「お知らせ」を表示する設定は、「お知らせ情報」ボタンをクリックする だけです。するとお知らせ情報をトップページに表示するための一文 が挿入されます。あとは、お知らせを更新すると、地頭的に当エリア に入力内容が反映されます。具体的なお知らせの中身の入力は、 次ページ以降をご参照ください。 1つ目のブロック 2つ目のブロック 3つ目のブロック カラム内の各ブロックの入力は、P15～の「新規ページ作成」方法と 同じです。初期設定では「お知らせ一覧」ページが作成されていますが、こ の下にお知らせトピックスを作っていきます。 「新規のお知らせ情報を追加する」ボタンをクリックしてください。 「個別のお知らせ情報作成・編集」画面が表示されます。 「個別のお知らせ情報作成・編集」画面は、一覧設定部分以外 は、P15で解説の「新規ページ作成」画面とほとんど同じです。
4. お知らせページの作成
画面上部のメニューから「お知らせ情報編集」 ボタンをクリックしてください。「お知らせ情報編 集」画面が表示されます。一覧設定
ページ基本設定
P15で解説の「新規ページ作成」画面と同様です。 ※お知らせの詳細ページを作成せず、HOME及びお知らせ一覧にタ イトルのみ表示したい場合はこの項目は入力不要です。ブロック
P15で解説の「新規ページ作成」画面と同様です。 ※お知らせの詳細ページを作成せず、HOME及びお知らせ一覧にタイ トルのみ表示したい場合はこの項目は入力不要です。②「お知らせのタイトル」 お知らせのタイトルを入力します。 ③「日付」 お知らせの日付を入力します。 ④「HOMEの一覧表示」「お知らせ一覧表示」 HOMEのお知らせ一覧、お知らせ一覧ページにタイトルを表 示させない場合は、それぞれ「非表示にする」にチェックを 入れます。 ①「ページの作成 or 既存ページ・外部サイトへのリンク」 新規でお知らせ情報を作成する場合には「ページの作成」を、タイ トルのみを表示させ、既にあるページもしくは外部のURLにリンク をさせたい場合には、「既存のページ・外部サイトへのリンク」を選 択します。
②
①
③
④
一覧設定
管理画面上部「サイトの確認」ボタンをクリックして、 できあがりを確認してください。 （お知らせ一覧画面） （トップページ）5. お問い合わせページの作成（メールフォームの設置）
お問い合わせページ（メールフォーム）を作成するには、「メニュー ／ページ編集画面」から「新規のお問い合わせページを追加す る」をクリックします。 「お問い合わせページ作成・編集」画面は、P15で解説の「新規 ページ作成」画面に、「送信メールの設定」や入力フォームに関す る「入力項目の設定」が加わったものです。メニュー設定
ページ基本設定
P15で解説の「新規ページ作成」画面と同様です。お問い合わせ詳細設定①
お問い合わせ詳細設定②
①「入力内容確認画面の有無 」 フォームに入力した内容を確認するページの有無を設定し ます。 「あり」を選択すると、「確認画面を編集する」ボタンが表示 され、文言の編集等が行えます。 ②「送信完了画面の有無 」 送信完了画面を別途作成する場合には、「あり」を選 択します。 「あり」を選択すると、「完了画面を編集する」ボタンが 表示され、そこからコンバージョンタグの挿入、文言の 編集等が行えます。 「なし」を選択した場合は、デフォルトの送信完了画面 （「送信が完了しました」のメッセージのみのページ）が 表示されます。 ③「問合せ者リストの保存 」 フォームからの問い合わせ者リストを保存するかどうかを選 択します。保存したリストはCSVファイルでダウンロードでき ます。
②
①
③
ページ基本設定
ファイル名・ページタイトル等、基本的な設定は、P15 で解説の「新規ページ作成」画面と同様です。①「管理者メールアドレス」 お問い合わせメールを受信する管理者のメールアドレスを 入力します。 （入力例） [email protected] ②「メールの件名」 お問い合わせをした方に自動で届く返信メールの件名 として表示されます。 （入力例）お問い合わせありがとうございます ③「配信元名」 お問い合わせされた方に届くメールの差出人として表 示されます。 （入力例）ＡＢＣ製作所 ④「配信元メールアドレス」 お問い合わせされた方に届くメールの差出人のメール アドレスとして表示されます。 （入力例） [email protected] ⑥「メール文頭の文面」 お問い合わせされた方に届くメールの入力内容確認文の前に挿入されます。 （入力例） お問い合わせありがとうございます。 折り返しご連絡差し上げますので、お待ちください。 ⑦「メール文末の文面」 お問い合わせされた方に届くメールの入力内容確認文の後に挿入されます。通常は署名などを記入します。 （入力例） ーーーーーーーーーーーーーーーーーーーーーーーー ABC製作所 お客様窓口 東京都ＸＸ区ＸＸ1-1-1 TEL :03-1111-2222 FAX :03-1111-3333 ⑧「フォーム上部の説明文」 入力フォームの上に表示される説明文を入力します。 （入力例） 必要事項をご入力いただき、「送信する」ボタンをクリックし てください。折返しご連絡させていただきます。
②
①
③
④
⑤
⑥
⑦
お問い合わせ詳細設定①
■ 送信メールの設定 ■ フォーム上部の説明文⑧
⑤「お問い合わせ項目入力内容の確認表示」 お問い合わせをした方に自動で届く返信メールにお問い合わせの各項目への入力内容を表示させるかどうかを選択します 。■ 入力項目の設定 入力項目に指定したい項目の「選択」欄にチェックを入れて くだい。 「必須」をチェックすると登録時の必須項目になります。 表示する項目の名称を変更したい場合は「表示名称」に入 力してください。 「ソート番号」で項目の表示順を決めます。ソート番号には3 桁の数字（010、020、030、、）を入力することを推奨します。 入力が終わったら画面下部にある「入力内容をウェブサイ トに反映する」ボタンをクリックしてください。
お問い合わせ詳細設定②
・文字入力 ・複数選択 ▼ ・文字入力（textarea） ▼ ・単一選択（プルダウン） ▼ ・単一選択（ラジオボタン） ▼ ▼
※フリー項目の作り方
1. データのバックアップと復元
テストサーバ（STAGING SERVER）の「メニュー／ページ編集」データや「デザイン設定」データ等のサイト構築データをバックアッ プして、誤ってページを削除してしまった時、以前のサイトの状態に戻したい時などに、データを復元することができます。1-1. データのバックアップ
1-2. データの復元
②「バックアップする」ボタンをクリックます。 ① 画面上部のメニューから「データのバックアップ」 をクリックしてください。データのバックアップ画 面が表示されます。 ③「データのバックアップが完了しました。」というメッセージが表示されたら、データの復元」欄のプルダウンをクリックしてくださ い。バックアップした日時のデータが保存されます。 ※ データのバックアップは最新の10件までの保存が可能です。 ① 「データの復元」欄のプルダウンから復元したい日時のバックアップデータ を 選択して、「復元する」ボタンをクリックしてください。 ② データの復元完了のメッセージが表示されます。 復元内容をサイトに反映するには「サイトの再構築」が必要になります。 必ず再構築を行ってください。 ※ 選択したバックアップ時点以降の更新内容（バックアップデータ含む）は破棄さ れますのでご注意ください。 ※ データのバックアップはテストサーバ（STAGING SERVER）のデータのみ。また、お問い合わせCSVデータは含みません。1. 作成したページの公開
サイト職人では、テストサーバ（STAGING SERVER）と本番サーバ（ LIVE SERVER）、2つのサーバ環境を提供しています。 テストサーバ（STAGING SERVER）とは管理者専用の確認用サーバ環境を指します、外部からのアクセス制限が掛けられている ため、一般ユーザーには非公開になっています。サイト職人を使って追加・修正したページは、まずテストサーバ環境にのみ反 映されます。公開前のページ作成・確認作業にお使いください。
本番サーバ（ LIVE SERVER）とは、一般ユーザーに公開されるサーバ環境を指します。テストサーバ上で納得のいくまでページ を修正し、最終的に本番サーバ（LIVE SERVER）へファイルを転送することによって一般公開することができます。
1-1. テストサーバ（STAGING SERVER）と本番サーバ（LIVE SERVER）
1-2. 本番サーバ（LIVE SERVER）への転送
テストサーバ内でのページ作成・確認作業が終わったら、本番サーバへ の転送作業を行います。 「本サーバへ転送」メニューをクリックしてください。 ポップアップで右のような画面が表示されます。 転送する部分と1回のセッションで転送するファイル数を選択して、「転送する」ボ タンをクリックしてください。 転送するファイルを設定 ■『更新したファイルのみ』：更新したファイルのみを転送します。 「トップページ」「お知らせ一覧」「下層ページ」「画像・ファイル」の中で、 更新したファイル数が表示されます。転送する項目を選択してください。 ■『全て』：全てのファイルを転送します。 「トップページ」「お知らせ一覧」「下層ページ」「画像・ファイル」の中で、転送す る項目を選択できます。 ※ファイルの転送量や転送先のサーバーによって、時間がかかる場合があり ますので、更新したファイルのみを転送する、1回のセッションで転送する ファイル数を制限する等、転送するファイル数を必要最低限にすることを推 奨します。※この作業で本番サーバへ転送されるのは、作成した各ページ（HTML）と、アップロード機能を使ってアップした画像及びファイ ルのみになります。 テストサーバ内に手動でアップさせたその他のフォルダ及びファイルにつきましては、別途手動で本番サーバへの移行を行っ てください。 「アップロードが完了しました。」というメッセージが表示されれば、本番サーバへの転送作業は完了です。 「サイトの確認」ボタンをクリックして、作成したページが正常に本番サーバに反映されているか確認してください。
1. 本番サーバファイル管理
FTPソフトなどを使ってサーバに直接入ることなく、管理画面から本番サーバ（LIVE SERVER）に格納されているファイルを管理 （確認・削除）することができます。 ②ポップアップ画面にて、本番サーバ（LIVE SERVER）に格納されているファイル／フォル ダを一覧で確認できます。 ① 画面上部のメニューから「Live Serverファイル管 理」をクリックしてください。 ③フォルダ名をクリックすると、フォルダ内のファイ ル確認画面に進みます。 不要なファイルにチェックを入れ、削除ボタンを クリックすると、そのファイルは削除されます。 ※この機能を使えば、、サイト職人以外で作られた ファイルを削除することも可能です。 それらのファイルを削除した場合、サイト職人の 操作では元に戻すことが出来ませんので、ファイ ルを削除する際には本当に不要なファイルか、必 ずご確認ください。1. メルマガ配信リスト作成
お客様に対してメールマガジン（テキスト形式／HTML形式）を配信することができます。 はじめに、メルマガを配信するユーザーリストの作成方法について説明します。 「メルマガ配信リスト」の画面が表示されます。 配信リストは以下の2つの種類があります。 ■メールフォームからのお問い合わせリスト サイト職人で作成したメールフォームから お問い合わせのあったお客様の配信リスト ■手動追加配信リスト 手動で追加するお客様の配信リスト 画面上部のメニューから「メルマガ配信」を クリックしてください。 【メールフォームからのお問い合わせリスト設定方法】 ① 「メルマガ配信リスト」の画面にて、サイト職人で 作成したメールフォームからのお問い合わせ者 リストが表示されています。 メルマガ配信リストとして追加したいリストの 『配信リストに追加』ボタンをクリックしてください。 ② リストの下に「配信リスト」という項目が表示され れば作業は完了です。【手動追加リスト設定方法】 ① 「メルマガ配信リスト」の画面にて、『リスト追加』 ボタンをクリックしてください。 ② 任意のリスト名を入力、リストを作成したCSVファ イルを選択して、『リスト追加』ボタンをクリックし てください。 ③ 「保存しました。」というメッセージが表示されれ ば作業は完了です。 ※ 追加されたリストの『配信リスト編集』ボタンをク リックすると、作成したリストの確認、リスト内で メルマガを送信しないユーザーの個別設定が可 能です。
2. メルマガ配信
次に、メルマガ配信方法について説明します。 「メルマガ配信リスト」の画面で『メルマガ配信』ボタンを クリックしてください。 「メルマガ配信履歴』ページが表示されます。 ※ こちらで過去に送ったメルマガの日付／配信件数／ 文章を確認することができます。 『新規メルマガ配信』ボタンをクリックしてください。各項目を選択・入力して、『確認』ボタンをクリックし てください。 ①「メール形式」 メルマガの配信形式を選択します。 ■テキストメール プレーンなテキストのみのメールを送信します。 ■HTMLメール 画像や表組みなどを含めたHTML形式のメールを送 信することができます。 ※HTMLの知識が必須となります。 ②「配信リスト」 設定されている配信リストの中から、メルマガの配信先 を選択します。 ③「送信元アドレス」 メルマガの送信元とするメールアドレスを入力してくださ い。
②
①
③
④
⑤
⑥
④「タイトル」 メルマガのタイトルを入力してください。 ⑤「本文（HTML）」 ※①で「HTMLメール」を選択した場合委のみ表示されます。 HTML形式でメルマガの文章を入力してください。 ■HTML入力箇所 <!-- コンテンツここから // --> ここにHTMLを記述してください <!-- // コンテンツここまで --> ⑥「本文（テキスト）」 テキストでメルマガの文章を入力してください。 ※「HTMLメール」を選択した場合、HTMLメールの受信を許可していないユーザーにはこちらに入力した内容が配信されます （マルチコンバート）⑦
⑥「配信日時」 すぐに配信する場合は「即時」を、予約配信する場合は「日時指定」を選択して、日付を入力してください。確認画面が表示されます。
問題なければ『配信する』ボタンをクリックしてください。
「メールの配信が完了しました。」というメッセージが表 示されれば作業は完了です。
メルマガの本文入力欄には、お客様の名前や会社名 などを個別に挿入できる機能が付いています。 右のプルダウンを選択すると、[company]、 [username] などが表示されます。 それらのコードをメルマガの文面に挿入しておくことで、 お客様の名前や会社名などを個別に挿入することがで きます。
