PowerPoint プレゼンテーション

自 由 HTMLでコンテンツを 追 加 する Copyright Diverta inc. All right reserved.

目 次. 自 由 HTMLとは - 自 由 HTMLとは - 機 能 概 要. 自 由 HTMLでコンテンツを 追 加 する - 自 由 HTMLを 開 く - カテゴリを 追 加 する - 自 由 HTMLでコンテンツを 作 成 する -4 閲 覧 編 集 制 限 を 設 定 する. 自 由 HTMLの 活 用 例 - バナーとして 使 用 するための 自 由 HTMLを 作 成 する - 自 由 HTMLを 使 ってコンテンツを 作 成 する - Twitterのウィジェットを 作 成 する Copyright Diverta inc. All right reserved.

. 自 由 HTMLとは - 自 由 HTMLとは 自 由 HTMLモジュールは 文 字 通 り 自 由 にHTMLでコンテンツを 作 成 できるモジュールです WYSIWYGを 使 用 していますので HTMLの 知 識 が 無 くてもご 利 用 頂 けます また HTMLの 知 識 がある 方 なら 直 接 HTMLを 編 集 する 事 で より 柔 軟 にコンテンツを 作 成 する 事 ができます さらに 自 由 HTMLモジュールでは JavaScriptを 記 述 する 事 や Flashファイルを 挿 入 する 事 もできますので 上 手 に 活 用 することでサイト 表 現 の 幅 を 広 げることができます - 機 能 概 要 自 由 HTMLモジュールは 自 由 にコンテンツを 作 成 する 事 を 目 的 としたモジュールですので その 使 い 方 に 特 に 決 まりはなく 他 のモジュールでは 表 現 しきなれない 部 分 を 補 完 したり 独 自 のページを 作 成 したり 等 ご 自 由 にご 利 用 下 さ い 自 由 HTMLモジュールで 作 成 したコンテンツは 複 数 のページに 表 示 する 事 ができますので サイドメ ニューやバナーなど 複 数 ページで 同 じコンテンツを 表 示 したい 場 合 に 利 用 するとメンテナンスが 楽 になります バナー 用 に 作 成 した 自 由 HTML 設 置 後 のサイ トイメージ Copyright Diverta inc. All right reserved.

. 自 由 HTMLでコンテンツを 追 加 する - 自 由 HTMLを 開 く [コンテンツ 更 新 ] を 開 きます [ 自 由 HTML] をクリックします 自 由 HTMLの 検 索 自 由 HTMLの 検 索 自 由 HTMLの 一 覧 自 由 HTMLをタイトル カテゴリ 使 用 ページ コンテンツ 内 の 文 字 などから 検 索 する 事 ができます 自 由 HTMLの 一 覧 既 に 自 由 HTMLモジュールで 作 成 されているコンテンツを 一 覧 表 示 しています それぞれのタイトルをクリッ クすると 再 度 編 集 する 事 ができます また それぞれの 自 由 HTMLごとに 使 用 しているサイト 上 のページ も 一 覧 表 示 されますので どのページでどの 自 由 HTMLが 利 用 されているのか 把 握 する 事 ができ 修 正 作 業 の 参 考 にする 事 ができます Copyright Diverta inc. All right reserved. 4

- カテゴリを 追 加 する 作 成 した 自 由 HTMLをカテゴリにより 区 分 管 理 する 事 ができます 自 由 HTMLが 多 くなったときに カテゴリ 分 けしておくとカテゴリ 検 索 ができるようになりますので 便 利 です [カテゴリ 一 覧 ]をクリックします [カテゴリ 追 加 ]をクリックします 4 [カテゴリ 名 ]にカテゴリの 名 前 を 記 入 します 4 [ 追 加 する]をクリックして カテゴリを 追 加 します - 自 由 HTMLでコンテンツを 作 成 する [ 自 由 HTML 追 加 ] をクリックします Copyright Diverta inc. All right reserved. 5

4 必 要 事 項 を 記 入 します WISIWYGエディタ に 画 像 や 文 章 など 内 容 を 記 入 します 記 入 方 法 の 詳 細 については WISIWYGエディタ マニュアルをご 参 照 ください http://rcms-support.r-cms.jp/download/ 4 [ 追 加 する] をクリックし 自 由 HTMLでコンテンツを 追 加 します 各 項 目 の 内 容 につきましては 次 のページにあります HTML 編 集 の 内 容 をご 確 認 ください Copyright Diverta inc. All right reserved. 6

--の 設 定 内 容 項 目 説 明 タイトル カテゴリ 自 由 HTMLのタイトルになります 作 成 する 自 由 HTMLのコンテンツのカテゴリを 指 定 する 事 により カテゴリで 自 由 HTMLを 検 索 する 事 ができます サイトのデザインを 引 き 継 ぐ このボックスがONの 場 合 は サイトに 適 用 されているCSSが 自 由 HTMLにも 適 用 さ れ 自 由 HTMLのタイトルがサイト 上 に 表 示 されます OFFの 場 合 はCSSは 適 用 さ れず 自 由 HTMLのタイトルも 表 示 されません 下 記 は 自 由 HTMLで 画 像 を 表 示 するだけのHTMLを 記 述 し バナーとしてサイト 上 に 表 示 した 例 です サイトのデザインを 引 き 継 ぐと 画 像 のまわりにデザインが 施 され 自 由 HTMLのタイトルである バナー の 文 字 が 表 示 されている 事 が 確 認 できます 表 示 設 定 PC 版 で 使 用 自 由 HTMLをPCで 利 用 する 場 合 にはONにします 携 帯 版 で 使 用 自 由 HTMLを 携 帯 版 で 利 用 する 場 合 にはONにします 携 帯 向 けだけに 表 示 した いコンテンツの 場 合 には PC 版 で 使 用 のチェックボックスをOFFにし 携 帯 版 で 使 用 のチェックボックスをONにします スマートフォン 版 で 利 用 する 自 由 HTMLをスマートフォンで 利 用 する 場 合 にはONにします Smarty 使 用 ページ 有 効 にする を 選 択 することによって 自 由 HTMLにSmartyを 適 用 する 事 ができま す 作 成 した 自 由 HTMLが 現 在 使 用 されているページです クリックするとそのページを 表 示 する 事 ができます Copyright Diverta inc. All right reserved. 7

-4 閲 覧 編 集 制 限 を 設 定 する 自 由 HTMLごとに 閲 覧 編 集 制 限 を 設 定 できます 閲 覧 制 限 : 閲 覧 を 許 可 するかしないかを グループごとに 設 定 します 編 集 制 限 : 自 由 HTMLを 編 集 する 制 限 をグループごとに 設 定 します [ 閲 覧 編 集 制 限 ] をクリックします [ 閲 覧 制 限 ]もしくは[ 編 集 制 限 ] [ 制 限 有 り] にチェックを 入 れると グループが 表 示 されます 許 可 するグループを 選 択 します 閲 覧 制 限 の 詳 しい 説 明 については 会 員 限 定 ページを 作 成 する マニュアルをご 参 照 ください http://rcms-support.r-cms.jp/download/ 4 [ 追 加 ( 更 新 )する] をクリックします 4 Copyright Diverta inc. All right reserved. 8

. 自 由 HTMLの 活 用 例 - バナーとして 使 用 するための 自 由 HTMLを 作 成 する RCMSでバナーを 作 成 する 場 合 は 主 にナビゲーションモジュールを 使 用 しますが 自 由 HTMLを 使 用 して 作 成 することもできます ここでは 自 由 HTMLを 使 ってバナーを 作 成 する 方 法 をご 紹 介 します バナーだけでなく タイトルに 画 像 を 使 用 する 場 合 などにも 利 用 できます タイトルは 非 表 示 にしたいので [サイトのデザインを 引 き 継 ぐ]のチェックを 外 します バナーとして 使 用 する 画 像 をファイルマネージャから 選 択 し 配 置 します 配 置 した 画 像 を 選 択 し [リンク 挿 入 / 編 集 ]をクリックしてリンク 先 を 挿 入 します 4 [ 追 加 する]をクリックして 自 由 HTMLを 作 成 します Copyright Diverta inc. All right reserved. 9

ページ 構 成 に 自 由 HTMLで 作 成 したバナーを 配 置 する [サイト 基 本 設 定 ] [ページ 構 成 ] を 開 き バナーを 設 置 したいページの [ 設 定 ]を 開 きます 4 [コンテンツ 設 定 ] をクリックして 開 きます [サブコンテンツ 設 定 ]に [ 自 由 HTML]を 選 択 し バナーとして 作 成 した 自 由 HTMLのタイトル を 選 択 します 4 [コンテンツを 設 定 したら 配 置 を 確 認 ]をクリックし [ 配 置 ]タブを 開 きます Copyright Diverta inc. All right reserved. 0

5 6 5 ドラッグして 任 意 の 場 所 に 配 置 します 6 [ 更 新 する]をクリックして 最 新 の 情 報 に 更 新 します 設 置 後 のサイトイメージ Copyright Diverta inc. All right reserved.

- 自 由 HTMLを 使 ってコンテンツを 作 成 する RCMSでは コンテンツの 更 新 頻 度 が 高 いものは 記 事 モジュールを 利 用 し コンテンツの 更 新 をほぼしな いものに 関 しては 自 由 HTMLで 作 成 することをお 勧 めしております ここでは 自 由 HTMLを 使 ったコン テンツを 作 成 する 方 法 をご 紹 介 します タイトルは 非 表 示 にしたいので [サイトのデザインを 引 き 継 ぐ]のチェックを 外 します 画 像 や 文 章 の 入 力 を 行 います [ 追 加 する]をクリックして 自 由 HTMLを 作 成 します Copyright Diverta inc. All right reserved.

ページ 構 成 に 自 由 HTMLで 作 成 したコンテンツを 配 置 する [サイト 基 本 設 定 ] [ページ 構 成 ] を 開 き バナーを 設 置 したいページの [ 設 定 ]を 開 きます 4 [コンテンツ 設 定 ] をクリックして 開 きます [メインコンテンツ 設 定 ]に [ 自 由 HTML]を 選 択 し バナーとして 作 成 した 自 由 HTMLのタイト ルを 選 択 します 4 [コンテンツを 設 定 したら 配 置 を 確 認 ]をクリックし [ 配 置 ]タブを 開 きます Copyright Diverta inc. All right reserved.

5 6 5 メインモジュールは 移 動 できないので 配 置 されていることを 確 認 してください 6 [ 更 新 する]をクリックして 最 新 の 情 報 に 更 新 します 設 置 後 のサイトイメージ Copyright Diverta inc. All right reserved. 4

- Twitterのウィジェットを 作 成 する Twitter 側 から 提 供 されたコードを 使 用 して RCMS 内 にTwitterのウィジェットを 配 置 する 方 法 をご 紹 介 します Twitterのウィジェットだけではなく JavaScriptなども 使 用 できます タイトルは 非 表 示 にしたいので [サイトのデザインを 引 き 継 ぐ]のチェックを 外 します [ソース]をクリックし HTMLモードに 切 り 返 します Twitter 側 から 割 り 当 てられたウィジェットのコードを 貼 り 付 けます 4 [ 追 加 する]をクリックして 自 由 HTMLを 作 成 します Copyright Diverta inc. All right reserved. 5

ページ 構 成 に 自 由 HTMLで 作 成 したTwitterのウィジェット 枠 を 配 置 します [サイト 基 本 設 定 ] [ページ 構 成 ] を 開 き バナーを 設 置 したいページの [ 設 定 ]を 開 きます 4 [コンテンツ 設 定 ] をクリックして 開 きます [メインコンテンツ 設 定 ]に [ 自 由 HTML]を 選 択 し バナーとして 作 成 した 自 由 HTMLのタイト ルを 選 択 します 4 [コンテンツを 設 定 したら 配 置 を 確 認 ]をクリックし [ 配 置 ]タブを 開 きます Copyright Diverta inc. All right reserved. 6

5 6 5 ドラッグして 任 意 の 場 所 に 配 置 します 6 [ 更 新 する]をクリックして 最 新 の 情 報 に 更 新 します 設 置 後 のサイトイメージ Copyright Diverta inc. All right reserved. 7