KITENN 編集操作マニュアル

KITENN 編 集 操 作 マニュアル 目 次 操 作 方 法 基 本 編 自 分 のページをブラウザで 開 く ログイン 方 法 編 集 画 面 の 開 き 方 文 章 を 入 力 する 画 像 メディアファイルを 挿 入 する 文 字 スタイル( 太 字 斜 体 )を 変 更 する 文 字 配 置 ( 左 揃 え 中 央 揃 え 右 揃 )を 変 更 する リンクを 作 成 する 画 像 横 への 文 字 回 り 込 み(LeftBox,RightBox)を 使 用 する 操 作 方 法 応 用 編 文 字 サイズを 変 更 する 文 字 色 を 変 更 する GoogoleMap の 貼 り 方 メールアドレスのクリックでメールソフトを 起 動 させる 自 動 改 行 を 禁 止 する 方 法 メイン 画 像 を 変 更 する 方 法 1

自 分 のページをブラウザで 開 く ホームページアドレスは 下 記 のような URL になっています http:/www.kitenn.jp/*****/ *****の 部 分 はお 客 様 ごとに 異 なり ご 契 約 完 了 後 にお 届 けするメールに 記 載 されています ログイン 方 法 フッター 部 分 にあるフォームに ID とパスワードを 入 力 してログインしてください ID はお 申 し 込 み 時 にお 客 様 が 指 定 したものです お 申 し 込 み 直 後 の 自 動 返 信 メールにも 記 載 されています パスワードはご 契 約 完 了 後 にお 届 けするメールに 記 載 されています 編 集 画 面 の 開 き 方 ログインした 状 態 でホームページを 表 示 すると 編 集 可 能 領 域 には 編 集 という 文 字 が 表 示 されていますので そこをクリックして 編 集 画 面 を 開 いてください ログインしていない 状 態 では 編 集 は 表 示 されません 2

文 章 を 入 力 する タイトル 本 文 の 部 分 にワープロ 感 覚 で 文 字 を 入 力 してください 編 集 画 面 の 本 文 の 文 章 で 改 行 を 行 なうと 実 際 のホームページ 上 でも 改 行 が 入 ります テンプレートによっては タイトル の 内 容 がメニュ ー 部 分 になっている 場 合 もあります その 場 合 タ イトル が 長 くなるとレイアウトが 乱 れる 事 もありま すので 調 整 してください 画 像 メディアファイルを 挿 入 する 編 集 画 面 の 本 文 で 画 像 やメディアファイルを 挿 入 したい 位 置 にカーソルを 合 わせておき 画 像 貼 り 付 けボタンをクリックします ファイルリストから 挿 入 するファイル 名 をクリックすると 画 像 の 説 明 を 入 力 する 画 面 が 開 きます メディアファイルの 場 合 はここで 入 力 した 文 字 列 に 参 照 リンク が 付 くので 必 ず 入 力 してください 画 像 ファイルの 一 覧 が 表 示 されます 貼 り 付 けたい 画 像 がリストにある 場 合 は1からファイル 名 をクリックし 無 い 場 合 は2をクリックして 画 像 をアップロードします 3

OK を 押 すと 画 像 を 表 示 するためのタグ(<%image(******)%>)が 挿 入 されます 編 集 画 面 を 保 存 し てページを 確 認 すると 画 像 が 表 示 されています 画 像 をアップロードする 場 合 は 1を 押 してファイルを 選 択 した 後 2を 押 します すると 上 図 の ファイルリストに 追 加 されて 貼 り 付 けが 可 能 となります ご 注 意 アップロードするファイルに 全 角 文 字 は 使 用 しないでください ( 正 しく 表 示 できません) アップロード 可 能 なファイルサイズは 2MByte 以 内 となります 文 字 スタイル( 太 字 斜 体 )を 変 更 する 編 集 画 面 の 本 文 で 文 字 スタイルを 変 更 したい 文 字 列 を 選 択 し 太 字 または 斜 体 のボタンをク リックします 太 字 なら B 斜 体 なら I をクリック! 選 択 していた 文 字 列 の 前 後 に 文 字 スタイルを 変 更 するためのタグ<b></b>( 斜 体 の 場 合 は <i></i>)が 挿 入 されます 4

文 字 配 置 ( 左 揃 え 中 央 揃 え 右 揃 )を 変 更 する 編 集 画 面 の 本 文 で 文 字 配 置 を 変 更 したい 文 字 列 を 選 択 し 左 揃 え 中 央 揃 え または 右 揃 えのボタンをクリックします 希 望 する 配 置 ボタンをクリック! 例 は 中 央 揃 えの 場 合 選 択 していた 文 字 列 の 前 後 に 文 字 配 置 を 変 更 するためのタグ <div style="text-align:center"></div> が 挿 入 されます 左 揃 えは left, 中 央 揃 えは center, 右 揃 えは right がそれぞれ 入 ります 5

リンクを 作 成 する 編 集 画 面 の 本 文 でリンクを 挿 入 したい 文 字 列 を 選 択 し リンク 作 成 ボタンをクリックします クリック! リンク 先 を 入 力 する 画 面 が 開 くので URL を http:// から 入 力 して OK ボタンを 押 してください 6

画 像 横 への 文 字 回 り 込 み(LeftBox,RightBox)を 使 用 する 左 図 のように 画 像 の 横 に 文 字 列 を 回 りこみさせて 表 示 したい 場 合 は 編 集 画 面 にて 回 り 込 みさせる 文 章 の 前 位 置 に まず 画 像 を 挿 入 します そして 挿 入 した 画 像 の 文 字 列 を 選 択 状 態 にしたら LeftBox ボタンまたは RightBox ボタンをクリックします 左 側 に 画 像 を 置 く 場 合 が LeftBox 右 側 に 画 像 を 置 く 場 合 が RightBox ご 注 意 選 択 していた 画 像 の 前 後 に 回 り 込 みタグ <div class="rightbox"></div> が 挿 入 されます leftbox, rightbox のいずれかが 入 ります 回 り 込 み 設 定 を 行 なった 後 は 回 り 込 みが 不 要 となる 文 章 の 前 か 記 事 の 一 番 最 後 に 解 除 タグ <br style="clear:both"> を 入 れてください 7

文 字 サイズを 変 更 する <Font Size="1">~</Font> を 挿 入 して 文 字 サイズを 指 定 します 数 字 が 大 きくなるほど 文 字 サイズも 大 きくなります 例 <Font Size="1"> 文 字 サイズを 変 更 したい 文 章 を 挟 むように 記 述 </Font> 1 : <Font Size="1">1</Font> 2 : <Font Size="2">2</Font> 3 : <Font Size="3">3</Font> 4 : <Font Size="4">4</Font> 5 : <Font Size="5">5</Font> 6 : <Font Size="6">6</Font> 文 字 色 を 変 更 する <Font Color=" ">~</Font> を 挿 入 して 文 字 色 を 指 定 します には 色 を 表 す 文 字 又 は #+16 進 数 カラーコード (HTML が 分 かる 方 のみ)を 指 定 しま す 色 色 を 表 す 文 字 記 述 例 赤 サンプルテキスト Red <Font Color="Red">サンプルテキスト</Font> マロン サンプルテキスト Maroon <Font Color="Maroon">サンプルテキスト</Font> 黄 色 サンプルテキスト Yellow <Font Color="Yellow">サンプルテキスト</Font> オリーブ サンプルテキスト Olive <Font Color="Olive">サンプルテキスト</Font> ライム サンプルテキスト Lime <Font Color="Lime">サンプルテキスト</Font> 緑 サンプルテキスト Green <Font Color="Green">サンプルテキスト</Font> 8

アクア サンプルテキスト Aqua <Font Color="Aqua">サンプルテキスト</Font> 濃 緑 サンプルテキスト Teal <Font Color="Teal">サンプルテキスト</Font> 青 サンプルテキスト Blue <Font Color="Blue">サンプルテキスト</Font> ネイビー サンプルテキスト Navy <Font Color="Navy">サンプルテキスト</Font> ピンク サンプルテキスト Fuchsia <Font Color="Fuchsia">サンプルテキスト</Font> 紫 サンプルテキスト Purple <Font Color="Purple">サンプルテキスト</Font> シルバー サンプルテキスト Silver <Font Color="Silver">サンプルテキスト</Font> グレー サンプルテキスト Gray <Font Color="Gray">サンプルテキスト</Font> GoogoleMap の 貼 り 方 GoogleMap のサイトで 目 的 の 地 図 を 表 示 し 地 図 右 上 にある リンク をクリ ックします 地 図 へのリンクを 表 示 する 場 合 ( こちらを 推 奨 しています) このリンクをメールに 貼 り 付 けて 地 図 を 共 有 でき ます のコードをコピーし て 記 事 編 集 でリンクを 作 成 したい 文 字 列 を 選 択 して 通 常 の リンクを 作 成 する の 操 作 を 行 ない リンク 先 URL に 貼 り 付 けてください 地 図 を 埋 め 込 み 表 示 する 場 合 HTML を 貼 り 付 けてサイトに 地 図 を 埋 め 込 みます のコードをコピーして 記 事 編 集 で 埋 め 込 みた い 場 所 にカーソルを 置 き 貼 り 付 けてください KITENN サービスでは 地 図 へのリンク 表 示 を 推 奨 しています 埋 め 込 み 表 示 にすると 地 図 のサイズによってレイアウトが 乱 れたり ホームページの 表 示 に 時 間 が 掛 かったりするのでご 注 意 ください 9

メールアドレスのクリックでメールソフトを 起 動 させる 編 集 画 面 の 本 文 でメールアドレスの 文 字 列 を 選 択 し リンク 作 成 ボタンをクリックします リンク 先 を 入 力 する 画 面 が 開 くので URL 入 力 の http://を 消 して mailto:*****@icomt.jp のよう に mailto: を 先 頭 に 記 述 し その 後 にメール 送 信 するアドレスを 入 力 して OK ボタンを 押 してくださ い 自 動 改 行 を 禁 止 する 方 法 編 集 画 面 本 文 の 入 力 エディタ 部 分 で 改 行 す ると 実 際 のホームページ 表 示 でも 改 行 が 入 り ます 通 常 ワープロ 感 覚 で 文 章 を 入 力 している 際 には 便 利 な 仕 様 ですが 左 図 の 例 のように HTML タグを 利 用 されるお 客 様 の 場 合 不 要 な 改 行 が 入 ってしまい この 機 能 が 邪 魔 になる 場 合 があります その 際 は 特 殊 タグ<%nobr%>と<%/nobr%>を 記 述 すると そのタグで 挟 んでいる 範 囲 において 自 動 改 行 が 行 なわれなくなります 10

逆 に その 範 囲 で 改 行 したい 場 合 は<br>タグを 書 く 必 要 があります メイン 画 像 を 変 更 する 方 法 ご 契 約 時 はデフォルトのメイン 画 像 が 表 示 されており ホームページ 上 の メイン 画 像 を 変 更 をクリックすると 本 文 には <img src="/lib/images/main_01.jpg" /> のような 記 述 がされて います メイン 画 像 を 全 く 表 示 したくない 場 合 には この 記 述 を 以 下 のように 変 更 します <img src="/lib/images/main_01.jpg" /> <!-- <img src="/lib/images/main_01.jpg" /> --> オリジナルの 画 像 を 貼 り 付 けたい 場 合 は まず 上 記 の 変 更 を 行 なったうえで その 下 に 通 常 の 画 像 貼 り 付 け 手 順 でオリジナルの 画 像 を 貼 り 付 けてください デフォルトのメイン 画 像 に 戻 したい 場 合 は <!-- <img src="/lib/images/main_01.jpg" /> --> 上 記 のように 変 更 したものを <img src="/lib/images/main_01.jpg" /> に 戻 し それ 以 外 のオリジナル 画 像 を 貼 り 付 ける 為 の 記 述 等 がある 場 合 は 削 除 してください KITENN 2009.11.17 初 版 2013.1.10 改 訂 11