WYSIWYG HTMLエディタ搭載スマホ完全対応版

contents playerの機能と改訂マニュアル
正規版ver4.6■今後も機能拡張や修正により､内容が変更される場合があります｡(2019/4/27現在)■WYSIWYG HTMLエディタの利用にはWYSIWYGパッチ適応済みの必要があります｡

画像部位 ■スマホ時代の画像サイズ指定はPX(ピクセル)指定から%(等分)へページを構成するBOXと画像サイズの基本/画像の登録方法

1-

本文部位 本文部位の配置一覧

2-■文字サイズ･太さ･色｡CP文法を施す事で､表現が豊かになります｡■SEO的な重要度も高い見出し｡装飾を切り替えてサイト表現を強化｡

見出部位 見出部位の装飾一覧

3-

表組部位 表組部位の装飾一覧

4-■デザイン化された表組みを効果的に利用してサイトを見やすく｡

BOXの背景機能①(汎用BOX)/②(特殊BOX)

5-[新機能] WYSIWYG HTML エディタ機能/基本知識

6-1-[本文]部用ツールーバーの解説①～⑥

6-2-[画像]部用ツールーバーの解説/枠拡張CP文法①～⑥[タグ]部用ツールーバーの解説①～④

6-3-

6-46-5-[メニュー関連]グローバル&サイドメニューの装飾/

7-1[上級機能]タグによるの特殊機能/

8-1[新機能]テンプレートを編集する機能

9-1

エディタ使用上の注意/ WYSIWYG機能は､HTML生成補助ツール

10-1

株式会社onelife[ワンライフ]

スマホ対応版contents player部位装飾及び新機能設定書

画像部位

1-1

■画像サイズの指定はPX(ピクセル)指定から%(等分)指定へ

iPhoneやAndroid系スマホやタブレットなど様々なデバイスの表示を可能にするため､従来の固定された画像サイズ指定であるピクセルを%指定で制御します｡

初期設定サイズ(1/1)
画像部位の下に余白が無い

横幅708px未満の画像は原寸(自動拡大されません)中央揃え
横幅708px以上は､幅100%に縮小

画像サイズ01(1/1)

subBOX及びmainBOX1～4の全幅(100%)に対して画像の横幅を指定します。
装飾タイプ

PC&タブレット時の横幅

スマホ480px以下の横幅

初期に設定された画像装飾

BOX幅1/1(max100%)※画像下に余白無BOX幅1/1(100%)※画像下に余白無

画像サイズ01

BOX幅1/1(100%)

BOX幅1/1(100%)

画像サイズ02

BOX幅1/2(50%)

BOX幅1/1(100%)

画像サイズ03

BOX幅1/3(33.3%)

BOX幅1/2(50%)

画像サイズ04

BOX幅1/4(25%)

BOX幅1/2(50%)

画像サイズ05

BOX幅1/5(20%)

BOX幅1/2(50%)

画像サイズ06

BOX幅1/1(100%)
画像サイズが1/6(16.6%)

BOX幅1/1(100%)
画像サイズが1/2(1%)

横幅100%未満の画像を登録した
場合は､原寸中央揃えとなります｡

画像サイズ02(1/2)

01～06の画像サイズの下には余白があります｡

画像サイズ03(1/3)

画像サイズ04(1/4)
画像サイズ06(1/1)画像1/6

画像サイズ05(1/5)

スマホ対応版contents player部位装飾及び新機能設定書

ページを構成するBOXと画像サイズの基本 コンテンツを作成するためにページのサイズを把握します｡
スマホ対応版contents playerのサイト基本寸法516px

1ページはsubBOX(1)・mainBOX(4つ)､計5つのBOXで1ページは構成されています｡

subBOX領域

1032px
ページは､3つのBOXレイアウトパターンを持っています｡
編集中でも､BOXレイアウトを変更すると､ページは変化します｡

288px

708px
100%(12カラム)

naviL領域
mainBOX領域

342px
50%

220px
25%

1-2

スマホ対応版contents player部位装飾及び新機能設定書

画像の登録方法①①

1-3

目安になるサイズで画像を登録しておけば､後々サイズの変更は､｢画像サイズ｣を変えるだけです｡【注意】高画質の画像をそのままアップロードするとサイトの読み込みが遅くなりますので､必ずリサイズして下さい!!

スマホやデジカメ､フリー素材で画像を用意します。

画像を
②リサイズ

③
④

フォトショップ等の画像加工ソフトで右の基本寸法を参考にリサイズします｡

目的に応じたリサイズ③
利用が多いのは､■708px(mainBOX全幅)■342px(mainBOX･1/2)■992px(subBOX全幅)

画像ソフト使わずファイルを直接リサイズします｡

画像の容量や品質に応じて､リサイズを活用して下さい｡

ファイルをアップロード。

画像の説明を入れます⑤⑤

リサイズしアップロードされた画像に対して､サイト上でどの大きさで表示するかを決定するのが｢画像サイズ｣です｡
画像サイズ02を選択(サイズ50%)

初期まま変更しない場合

画像ファイルをアップロード
した後､｢画像サイズ｣の変更
で､サイト上の

画像サイズはいつでも変更可能です｡

リサイズ後の画像が小さい場
合､大きくするとぼけますので､注意が必要です。

⑥ 画像下に文章を入れる場合は､文章を入力し装飾します｡※必要ない場合は､この工程をパスして下さい｡
100%で表示

⑦

50%
で表示

スマホ対応版contents player部位装飾及び新機能設定書

画像の登録方法②

1-4

ページレイアウトで重要な余白指定は､contents player内にあらかじめ用意されています｡■画像下の余白の取り方[基本機能]

画像部位のOPTIONを利用し､回り込みの有る無しで画像下の隙間の大きさが変わります｡
一区切り段落を開けたい場合は､回り込みしないの初期設定を使用して下さい｡

初期設定及び画像サイズ01～06の右左回り込み有

上下余白が小さい(12px)

初期設定の右左回り込み無

画像サイズ01～06の右左回り込み無上下余白が大きい(24px)

上下余白が無い※初期設定装飾で､回り込みしない場合のみ､余白はありません｡画像をくっつけて並べる時に便利です｡■回り込みについてHTMLにおける｢回り込み｣の指定には特有の規則があります｡この規則を把握することでレイアウトがスムーズに行えます｡｢回り込み｣を指定せず､2つの画像を登録すると上下に並びます｡

A

Aに対して､次の部位であるBを回り込みさせるため｢回り込み指定｣をする｡

AA

次の部位であるCが本文の場合は､新聞や雑誌のように流し込みになります｡

B

A
C

B

B

Bが回り込んでAが左に表示されます｡

スマホ対応版contents player部位装飾及び新機能設定書

画像の登録方法③

1-5

デバイスに応じた2枚の画像を用意することで､表示切替が可能になります｡■PC&タブレット用とスマホ用の画像を切り替える[CP文法]
画像部位(画像+文章のセット)をまるごとデバイスに応じて表示を切り替えます。

横長で使うことの多いPCでは､横対比の大きい画像を使います｡しかし､縦長で見る事の多いスマホで見た場合､画像が小さく感じます｡
スマホ用に縦長の画像を用意することで解決することできます｡

PCで見る

PC&タブレット用の横型の画像と文章

スマホ用の縦型の画像と文章

スマホ
で見る

手順

PC用とスマホ用の画像を2枚用意します｡

480px以下のスマホで表示!

表示切替

PC用画像を入れた[画像]部位

スマホ用画像を入れた
画像部位

管理画面で､分かりやすいように[画像]部位を並べておくと便利です｡[PC用画像]
半角

半角[スマホ用画像]
全角PCで表示する画像部位とスマホで表示する部位を別々のモノにすることプロモーションにも使えます｡

CP記号

表示と非表示のタイミング[PC用画像]481px以上のデバイス[スマホ用画像]480px以下のデバイス

スマホ対応版contents player部位装飾及び新機能設定書

本文部位
初期設定
装飾

■基本文字サイズ+配列にCP文法を施す事で､表現が豊かになります｡

従来文字を装飾する場合<span>や<strong>タグを挿入していましたが､予め決められた特定文字(CP文法)を入れる事で､文字の大きさや色､それらの背景色などが指定できるようになりました｡

左揃え

本文装飾
01

本文装飾
02

CP EDITOR画面
中央揃え

本文装飾
03
右揃え
本文装飾
04

本文装飾
05

50%ブロック化
回り込み有

本文装飾
06

下余白が大きい(24px)

余
白

左右に48pxの余白

余白
下余白が小さい(12px)

2-1

スマホ対応版contents player部位装飾及び新機能設定書

本文部位の一行リンクの設定 本文部位には､予めひとつのリンクボタンが用意されています｡
改行したい場所にCP文法｢¶(だんらくで変換される記号)｣を入れると改行されます｡
CP文法の指定が無い場合の一行リンク¶

改行したい場所に｢¶｣を入れます｡

改行用記号

CP文法｢¶｣の指定がある場合の一行リンク

先頭に色指定のCP文法を入れる事で､ボタンの色を変更することができます

先頭に色指定CP分法

2-2

スマホ対応版contents player部位装飾及び新機能設定書

見出部位■SEO的な重要度も高い見出し装飾を切り替えてサイト表現を強化｡<span>タグやSPAN系CP文法を挿入して文字の大きさや色を変更可能です｡

CP文法を使用しない状態の[見出]部位
初期装飾
見出装飾01
見出装飾02
見出装飾03
見出装飾04

見出装飾05

見出装飾06■色指定用CP文法を挿入して[見出]部位の装飾を変える｡

例:色指定用のCP文法｢＠Ｒ｣と｢＠｣で範囲を指定すると赤色系に変わります｡

例:色指定用のCP文法｢＠Ｒ｣に入れ､閉じ記号が無い場合は､全体が赤系に変わります｡

¶

改行用記号

改行したい場所にCP文法｢¶(だんらくで変換される記号)｣を入れると改行されます｡

3-1

スマホ対応版contents player部位装飾及び新機能設定書

4-1

表組部位 ■デザイン化された表組みを効果的に利用してサイトを見やすく｡

スマホ時代のレイアウトは､デバイスに応じて表示サイズが可変します｡可変に不向きなテーブルを可変可能にしました｡■スマホで表組みが可変します。
初期装飾

表組装飾01

表組装飾02

表組装飾04

表組装飾05

表組装飾06

PCで最適に作られた表も縦長のスマホサイズ(480px以下)で見た場合見づらくなります｡表の配列を並び変えることで見やすさを追求しています｡
装飾タイプ名

スマホ可変
480px以下

初期に設定された表組装飾

×

表組装飾01○

表組装飾02○

表組装飾03○

表組装飾04○

表組装飾05○

表組装飾06○PC用からスマホ用配列への並び順ルール
表組装飾03
PC配列

注意

固定レイアウトから可変レイアウトへ※テーブルによるレイアウトはなるべく避けて下さい｡

5インチ等のスマホを縦表示で見る事の多い現在､テーブルによるレイアウトは､極力使用しないで下さい｡
どうしてもの場合は､スマホ可変しない初期に設定された表組装飾を使用して下さい｡
デバイスによる様々な画面サイズ

スマホ配列

スマホ対応版contents player部位装飾及び新機能設定書

表組部位のCP文法① ●部位のレイアウトに関する仕様及び､CP文法(特殊記号)の挿入により､部位自体の装飾やレイアウトを変更する事が出来ます｡■表組を更に装飾したり､機能を付加します[CP文法]■CP文法により色変更された[表組]の例

情報を整理するのに便利な表組にスクロールや行の交互表示や全体に色を配置する機能が増えます｡

空のセルには薄いグ
レーが入ります。

先頭に色指定CP分法[scroll□]
表を縦にスクロール

Scroll200
Scroll300
scroll400
スクロールバー
表示

指定の高さ分表示

下に長くなりがちな表の一部を見せてスクロールする時に便利｡指定した数字(200,300,400)のPX分だ
け表示します｡[注意]表内の文字が折り返しを含め､フルに入力されていないと､表の横幅が100%で表示されません｡[□%]

66% (2/3幅)
50% (1/2幅)
33% (1/3幅)
通常100%の横幅を変更

4-2

スマホ対応版contents player部位装飾及び新機能設定書

表組部位のCP文法② ●部位のレイアウトに関する仕様及び､CP文法(特殊記号)の挿入により､部位自体の装飾やレイアウトを変更する事が出来ます｡■表組全体の背景色を変更します[CP文法]

4-3■CP文法により色変更された[表組]の例

先頭に表紙背景色指定CP分法[W□]
表の背景色指定[□]
隙間指定[WH] 白[WR] 薄い赤系[WY] 薄い黄系[WG] 薄い黄緑系[WD] 薄い濃緑系[WB] 薄い青系[WN] 薄い濃紺系[WP] 薄い紫系[WM] 薄い赤紫系[WK] 薄い灰色

通常のボーダー有の指定
通常のボーダー無の指定
ボーダー有と同じ隙間が存在します｡「□｣ CP記号使用(隙間無し)[■]

文字縮小指定
通常の表組内の文字「■｣ CP記号使用(文字小)スマホ対応版contents player部位装飾及び新機能設定書

5-1

BOXの背景機能① ●subBOX1つ､mainBOX4つ､計5つあるBOXの背景を適切に設定することでレイアウトに変化を与えます｡■汎用BOX指定[基本機能]
初期設定には､背景色も枠もありません

画像に隙間の無い特異なBOX[汎用枠01]

上にすき間無し

次ページ

画像にすき間無し

通常は初期設定BOX装飾を使用[汎用枠01]は配置された画像に隙間が無くなる特異なBOXです｡[汎用枠02～04]は罫と余白で構成されたBOX背景[BOX内パーツ色変更]はBOX内の強調や囲み装飾･見出等の色を一度に統一する指定方法です｡

通常のBOX内編集

BOX内を一瞬で色統一

スマホ対応版contents player部位装飾及び新機能設定書

5-2

BOXの背景機能② ●subBOX1つ､mainBOX4つ､計5つあるBOXの背景を適切に設定することでレイアウトに変化を与えます｡■特殊BOX指定[半自動レイアウト機能]
汎用BOX背景と同じ設置方法で､特殊BOXを設定｡BOXごとに決められたレイアウトルールが存在し､通常編集のルールが一部無視されます｡
部位を均等に揃えるBOX[特殊枠01(自動均等)]

縦の部位の隙間を自動計算し繋ぎます部位の間隔を狭くするBOX[特殊枠02(間隔狭)]部位の中央揃えにするBOX[特殊枠03(中央配置)][画像]部位の隙間が狭い[画像]部位のみセンター配置

1.[画像][本文][見出]部位を強制的に1/3にし､大きさの違う部位の間の隙間が埋まるように並べ替えます｡
2.デバイスの横幅に応じて適切な縦サイズを計算します｡
部位の順番は故意に決められません｡

通常部位の隙間は24pxありますが､このBOXを選択す
ると[画像]部位の隙間が狭くなります｡

サイドメニュー無しBOXの場合は4列
スマホでは2列自動可変[画像]部位が左右中心にならびます｡

画像以外の部位はセンターになりません｡[本文]部位の場合は装飾タイプでセンターにして下さい｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

基本知識①

6-1-1

■情報(画像や文章)を加工することで､ページの訴求力を増やす2つの手法｡
ワープロソフトのような操作性と複雑な装飾を実現するマークアップ記号(CP分法)を実装しました｡

現在､サイトを編集する際に用いられる手法として大きく二つ存在します｡①WYSIWYG EDITOR(ウィジウィグエディタ)を使用してワープロ感覚の視覚編集をする｡多くのブログサイトで用いられ､編集エリアにツールーバーがあるのが特徴｡タグのミスが多い｡②BBコードと呼ばれる特殊記号を使用し､文字を装飾する｡ WYSIWYG EDITORのような視覚操作ではありませんが､wikiのようなテキスト系に優れた編集法｡タグのミスが少ない｡

スマホ版contents playerでは､専用WYSIWYG EDITOR(CP EDITOR)と専用BBコード(CP文法)の二つを利用して､ページを編集&デザインすることが可能です｡

テキスト入力エリア内の編集には専用WYSIWYG EDITOR

専用のツールバーを表示

CP EDITOR※マウスの範囲を指定後､ツールアイコンで装飾専用設計されたCP EDITORでは､様々なブラウザで同一の書体表現を実現す
るWEBフォントの指定や最新CSS3のスタイルを適応して､装飾することができます｡
テキスト入力エリア

一行入力エリアでの利用が多い
専用BBコード

CP分法用の記号は単純な全角文字の組み合わせで構成されています｡※通常使用されることの無い記号に役割を与えています｡本文中に使用しないで下さい｡

CP文法

複雑な装飾デザイン&レイアウトを簡略化された記号の組み合わせで表現可能にしたのがCP文法です｡※CP文法用の記号は､部位の種類により異なりますので､各部位の解説をご覧下さい｡

上記の場合､

仝①が､CP分法記号になります｡※仝は｢おなじ｣で変換される全角記号文字です｡[ご注意]WYSIWYG EDITORはあくまでも入力を補助するツールです｡思い通りの表示が出来ない場合は､最初から始めるかソース画面で修正して下さい｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

基本知識②

6-1-2

■見た目を気にしながら､ワープロ感覚でサイトを更新する専用CP EDITOR｡

WYSIWYG EDITOR(ウィジウィグエディタ)とは､更新の際にMSワードのような操作性でHTML書式を付ける事ができる補助ツールです。

■使用するための基本①エディタ領域に一旦､全て文字を入力②その後､アイコンで装飾して下さい｡※WYSIWYG EDITORの特性上､入力しながら装飾挿入や装飾消去を繰り返すと､複雑なタグの入れ子が起こり､正常に表示されない状態が頻繁に起きますので､表示が崩れたら最初からやり直して下さい｡

文字の範囲を指定し､ツールを利用してテキストを装飾します｡

プレーンなテキストを一旦全て入力領域に打ち込む

HTMLソース画面

HTMLを理解している場合､手動によるソースコードの修正や追加ができます｡

CP EDITOR画面部位の特性を活かした3つのツールバー

エディタ画面・
ソースコード画面
切替アイコン

HTMLソース画面

不必要なタグや不足なタグがあると､ページの大きな乱れとなりますので､ご理解の上使用して下さい｡
エデッタ機能を使用中､カーソルが思う位置に動かなかったり､一旦キレイに消去したい
場合は､ソースコード画面で､移動や全消去を行って下さい｡[画像][本文][タグ]部位の入力の際､ WYSIWYG EDITORが利用出来るツールバーが表示されます｡
ツールバーは部位固有の機能に応じて､利用できる機能が違います｡[本文]部位専用ツールバー※本文(テキスト)を装飾するのに特化したツール群のアイコン[画像]部位専用ツールバー※画像に対する文章装飾に特化したツール群のアイコン[タグ]部位専用ツールバー※本文と画像に対する装飾+特殊な機能や独自レイアウトを実現するツール群のアイコン[ご注意]WYSIWYG EDITORはあくまでも入力を補助するツールです｡思い通りの表示が出来ない場合は､最初から始めるかソース画面で修正して下さい｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

本文部位用ツールバー①

囲み装飾01-09

6-2-1■文章をわかりやすくするための囲い罫や強調させる装飾を指定する。
文章を章ごとに囲ったり､指定単語を強調させるためのcontents player専用のCSSを施すことが出来ます｡

囲み装飾11-19

囲み装飾01～09は､通常の囲い装飾タイプ

囲み装飾11～19は､文章中に通常より多めの余白を取る装飾のため､罫線やボーダーの色は無彩色のグレーが設定されています｡

横幅1/1
100%のBOX

横幅2/3
のBOX

横幅1/2
のBOX

CP EDITOR上では､左記の色でそれぞれ固定表示されます｡※実際のサイト上でも同様の色で表示されます｡

囲み装飾01～09は､濃紺色(CP記号｢＠Ｎ｣指定色)
囲み装飾11～19は､グレー色

スマホ対応版[contents player] WYSIWYG HTML エディタ

本文部位用ツールバー②

強調装飾00-09

6-2-2■文章を強調させる<strong>装飾と<bold>装飾を指定する。
文章を章ごとに囲ったり､指定単語を強調させるためのcontents player専用のCSSを施すことが出来ます｡

指定された範囲を強調して装飾する機能

指定した範囲は<strong>を使用するため､SEO的に重要なキーワードや文章に使用するのが適切です｡<strong>系の強調は､重要なキーワード等が含まれる場合に有効。
<bold>系の強調は､デザイン的な視覚表現をする場合に使用します｡※使い分けにご注意下さい｡

太字

文字を太くする<bold>表記となります｡

SEOに有効な<strong>ではありませんので､ただ文字を太くした
い時にのみご使用下さい｡

強調装飾00を指定

線も背景も無い｢強調装飾00｣を指定することで｢太字｣と同じ表記となり､<strong>効果も生まれます｡

CP EDITOR上では､左記の色でそれぞれ固定表示されます｡※実際のサイト上でも同様の色で表示されます｡

強調装飾01～09は､緑系の色(CP記号｢＠Ｇ｣指定色)

スマホ対応版[contents player] WYSIWYG HTML エディタ

本文部位用ツールバー③
囲み装飾

6-2-3

■CP文法で｢囲み装飾｣｢強調装飾｣に特色8色を指定可能｡

CP文法記号を使用する事で｢囲み装飾｣｢強調装飾｣にあらかじめ用意された個別の色を設定することができます｡

強調装飾

CP文法の指定がない場合は､デフォルト(初期設定)の色がサイトで表示されます｡

通常の表示
初期状態
※CP記号を使用していない状態

CP記号を挿入する

CP文法の指定がある場合は､記号に応じて色に変換されてサイト上で表示されます｡

CP記号を枠内の最初と最後に指定して色を変更します｡｢＠｣は開始の記号｢Ｒ｣は赤系文字を指定する記号｢＠Ｒ｣と二文字セットにして先頭に挿入します｡

色指定に使用するCP記号一覧｢＠｣の一文字で閉じるの記号となります｡

＠Ｒ囲み装飾のエディタ上の表示＠

全角＠+全角アルファベット

全角＠

入力した文字の前後に全角のCP記号を入れてくくります｡※半角英数字･記号では動作しません｡

色指定用のCP記号は､●本文部位の｢囲み装飾｣｢強調装飾｣の他､●画像部位の｢画像枠｣●見出部位の｢見出線｣に使用することが出来ます｡※この基本8色は､｢サイトのテンプレートを編集する｣画
面で､変更可能｡

＠Ｒ

赤系

＠Ｙ

黄色系

＠Ｇ

黄緑系

＠Ｄ

濃緑系

＠Ｂ

青系

＠Ｎ

濃紺系

＠Ｐ

紫系

＠Ｍ

赤紫系

＠Ｋ

黒罫

スマホ対応版[contents player] WYSIWYG HTML エディタ

本文部位用ツールバー④

文字装飾セット■WEBフォントを活用した豊富な文字表現を可能にする｡

デバイスやブラウザによりまちまちな標準フォントによる表示ではなく､全て同じ表現を可能にするWEBフォントを利用可能にしました｡

下付文字

取り消し線

6-2-4

上付文字

書体+太さ+サイズのセット
文字装飾01
文字装飾02

英文書体

文字装飾03
文字装飾04
文字装飾05
文字装飾06

英数字の書体のみ

文字サイズ

noto sans japanese
Gravitas One

文字装飾07
文字装飾08
文字装飾09
文字装飾10

Cantata One
Petrona
Marcellus
Ramaraja

文字装飾11

OswaldAnton

文字装飾12

Russo OneDays One

文字装飾13Homenaje｢設定された文字セット｣及び｢文字サイズ｣で装飾された文字に対して､｢文字色｣｢文字背景色｣を施す事が出来ます｡

Baloo Bhaina
文字装飾14
文字装飾15

文字装飾16

Passion One
Oleo Script
Playball
Averia Libre

文字装飾17
文字装飾18
文字装飾19Fredericka the Great
Marck Script

装飾アイコンを使用して､二重の指定や入れ子の指定が可能｡※複雑な指定は､元に戻せない場合があります
ので､HTMLソース画面で､修正するかソースを全消去してやり直して下さい｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

本文部位用ツールバー⑤

6-2-5■テキストに色や背景色を指定したり､リンクを設置する｡[本文]入力エリアには､本文＝テキストを装飾するためのツールバーアイコン群が表示されます。

水平線

装飾の取り消し

リンク

文字色

戻す

進める

リンク解除

文字背景色

テキストのみコピー｢文字色｣+｢文字背景色｣の二重囲いができます｡※三重以上の複雑な囲い指定は､ソースコードの乱れの元となりますのでご注意下さい｡

ブラウザーの文字をコピーすると､付随するタグもコピーされるため､純粋なテキスト配列だけを編集エリアにコピーするためにこの｢テキストのみコピー｣の機能を使用して下さい｡

文字サイズ

リンク

リンク解除

範囲指定した文字列に対して､文字自体に色を指定したり､その文字の背景に色をひくことができます｡カラーパレットの中から色を指定します｡※解除する場合は｢装飾の取り消し｣アイコンで解除することが可能です｡｢文字背景色｣は､インライン要素のため､文数分の横幅しか適応されません｡蛍光ぺんのようなマーカーに近い装飾です｡

リンクさせたい文字列を選択し､｢Enter URL｣を入力することで､本文内にリンクを設置することが出来ます｡※一度設置したリンクの範囲を｢リンク解除｣アイコンで解除することが可能です｡｢文字背景色｣を並べると下記のような表現が可能です｡
装飾の取り消し

何重にもなる複雑な装飾の囲い込みを指定の場合､｢装飾の取り消し｣を行ってもキレイに削除出来ない場合があります｡その場合は､｢HTMLソース画面｣で､修正するか全消去して､やり直すことをお勧めします｡※不要なタグが残っていると､レイアウトが崩れる元となります｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

本文部位用ツールバー⑥
文字色

文字背景色

6-2-6

■｢文字色｣｢文字背景色｣にCP記号を施す事で装飾を拡張する｡
インライン要素の文字背景色の装飾をブロック要素に拡張して表現の幅を広げることができます｡にCP文法｢■/□①～□⑨｣を挿入しブロック要素で表現する｡

文字の先頭にCP文法｢□①～□⑨｣を挿入する｡□③インライン要素である｢文字背景色｣は､文章を改行した場合に横幅は文字数分しかありません｡
通常はインライン要素のため
横幅は文字数分しかありません。

例:先頭に｢□③｣を挿入した場合の表現※薄い背景色の方がより効果があります｡□①□②

文字の先頭にCP文法｢■｣を挿入する｡□③■インライン要素である｢文字背景色｣は､文章を改行した場合に横幅は文字数分しかありません｡□④□⑤

囲み装飾11～19の装飾が文字背景色にミックスされて表示
されます｡

□⑥
□⑦
□⑧
CP記号｢■｣で文字背景色はブロック要素となり､横幅いっぱいに広がります｡□⑨

囲み装飾11～19の指定+
文字背景色を同時に指定することで､同じ効果が生まれます｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用ツールバー①

6-3-1■SEO効果の高い画像の上に文字を重ねるlayerBOXを実現｡
装飾された文字を画像の上に配置する機能が､[画像]部位特有の機能として追加されます｡

画像の上に文字BOX｢画像外先頭にBOX｣を選択するとこの位置に文字を表示することができます｡

指定された範囲の文字を画像の上に表示させる機能(layerBOX)
画像の上に文字表示と画像の下に文字表示の表現を混在させることが可能｡

通常の入力の場合

エディタ内に｢重ね領域｣のlayerBOXが表示されます｡

layerBOXが生成されます｡｢重ね領域｣の内外には文字装飾も可能です｡

画像に対して文字の位置や文字の背景の組み合わせで計9つの種類｡
背景が透明①基点･上(背景透明)②基点･中央(背景透明)③画像･下(背景透明)

背景が白半調⑦基点･上(背景白半調)⑧基点･中央(背景白半調)⑨基点･下(背景白半調)

背景が黒半調④基点･上(背景黒半調)⑤基点･中央(背景黒半調)⑥基点･下(背景黒半調)｢基点･下｣の場合の位置

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用ツールバー②

画像の上に文字BOX■画像にマウスオーバーした時､レイヤーを表示するoverlayを実現｡
装飾された文字を画像にマウスオーバーした時に表示させる機能が､[画像]部位特有の機能として追加されます｡｢マウスオーバーBOX｣を選択。

のマウスオーバーBOXを選択するとエディ
タ内に領域が表示されます｡

使用上の注意×6-3-2

マウスオーバーBOXを挿入すると､領域外の文字が重なり合い､誤表示します!!

画像に対して､マウスオーバー機能は特殊です｡●この機能を使用する場合は､｢マウスオーバーBOX｣外に文字を入力しないで下さい｡●複数の｢マウスオーバーBOX｣を設定しないで下さい｡●｢マウスオーバーBOX｣内は､通常の文字装飾ができます｡

通常の状態
マウスオーバーしていない状態

マウスオーバーの状態
画像にマウスを当てた状態

文字は常に上下左右中央揃えとなります｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用CP文法①

6-4-1■CP文法[仝①]～[仝⑨]を挿入することで様々な枠装飾を実現
手間のかかる複雑なCSSによる枠装飾を簡単なCP文法で実現し､文字装飾も併用することが出来ます｡■CP文法[仝①]～[仝⑨]の各対応枠装飾一覧

仝①

仝②

仝③

仝④

仝⑤

仝⑥

[画像]部位編集で｢画像の説明｣の先頭にCP記号を挿入

左記の枠一覧から対応する｢仝①｣～｢仝⑨｣のCP文法を先頭に挿入します｡※｢キャプションあり｣にした場合､この記号はサイト上では表示されません仝は｢おなじ｣で変換される全角記号です｡①～⑨も全角丸数字

仝⑦

仝⑧

仝⑨

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用CP文法②

6-4-2■CP文法[◎○◇■●①～⑨] を挿入することで画像に様々な縁装飾を実現
手間のかかる複雑なCSSによる枠装飾を簡単なCP文法で実現し､文字装飾も併用することが出来ます｡■画像の縁を装飾する[CP文法]｢画像の説明｣の入力欄の先導にCP記号(特殊記号)を一文字入れる事で画像周りに縁を付けたり､画像に角丸の処理(トリミング)を自動で行うことが出来ます｡◎○◇■●①～⑨使用される記号はすべて全角記号です｡■CP文法との画像の縁装飾一覧

○

◎

◇

□

●①

●②

●④
●③

｢画像の縁装飾｣と｢画像の枠装飾｣を入力すると｢画像の枠装飾｣が上書きされて画像の縁効果が消えますので注意して下さい｡

×

画像の縁装飾+ 画像の枠装飾

＝

●⑤

●⑥

●⑦

●⑧
●⑨

画像の枠装飾のみ

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用CP文法③6-4-3■CP文法[☆①･☆②] を挿入することで画像と文章を横並びレイアウトを実現
手間のかかる複雑なCSSによる枠装飾を簡単なCP文法で実現し､文字装飾も併用することが出来ます｡■[画像]部位内の画像と文章を横に並べる[CP文法]
本来[画像]部位内は､画像の下に文章が並び､一枚のカードのように機能します｡
一枚のカードにすることで部位の移動が楽になる便利な部位ですが､さらに便利な機能として､縦並びを横並びのカードとして機能させるのがこのCP文法です｡

横を全幅(100%)として､画像のサイズ指定により､画像と文章の比率が変わります｡※画像の上にある文字(layerBOX)は自動で画像と同じサイズになります｡

初期の画像サイズ
画像サイズ01～02☆①画像が左/文章が右☆②文章が左/画像が右画像サイズ03

画像サイズ01の場合の例

画像サイズ04

画像サイズ05

画像サイズ06
画像サイズ06のみ､全幅ではなく､½の50%で表示されます｡☆①を指定

画像のサイズを1/2に縮小

画像下の文章を右へ回り込み｢☆②｣の場合は､左へ回り込みます｡☆②を指定の場合

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用CP文法④6-4-4■CP文法[★①･★② ･★③] を挿入することで画像と文章の特殊レイアウトを実現
手間のかかる複雑なCSSによる枠装飾を簡単なCP文法で実現し､文字装飾も併用することが出来ます｡■[画像]部位内の画像と文章をずらして重ねる[CP文法]

layerBOX60%と画像サイズ60%がずれて重なるレイアウト一覧

layerBOX(画像の上に配置する文字)を画像とずらして重ねることでデザイン性のあるレイアウトを実現することが出来ます｡
初期の画像サイズ・01★①★②

画像が左のずらし重ね

画像が右のずらし重ね★③

画像サイズ02

画像が中央のずらし重ね

画像サイズ03

画像サイズ04

画像サイズ01の場合の例

画像サイズ05
画像サイズ06のみ､全幅で
画像が1/6で表示されます｡
画像サイズ06★①を指定の場合(画像左)★②を指定の場合(画像右)画像のサイズを60%に縮小

layerBOXサイズを60%に縮小

画像下の文章はそのまま★③を指定の場合(画像中央)

layerBOXは全幅100%として重なります｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用CP文法⑤6-4-5■CP文法を3つ組み合わせて[画像]部位に複雑なデザインを施す｡
手間のかかる複雑なCSSによる枠装飾を簡単なCP文法で実現し､文字装飾も併用することが出来ます｡■枠装飾10種(仝①～⑨)をベースにして､色と配置をCP文法で組み合わせる｡

ベース
を決定

CP文法が何もない初期配置[画像]部位の枠[画像]部位の枠用の色

layerBOX配置

無し
仝①
仝②
仝③
仝④
仝⑤
仝⑥
仝⑦
仝⑧
仝⑨

無し
＠Ｒ
＠Ｙ
＠Ｇ
＠Ｄ
＠Ｂ
＠Ｎ
＠Ｐ
＠Ｍ
＠Ｋ

無し
☆①
☆②
★①
★②
★③

+

のどれか

CP文法[仝④]で枠装飾決定のどれか

CP文法[＠Ｇ]を色指定

+

[＠Ｒ]

[画像]部位の色指定

ＲＹＧＤＢＮＰＭＫの9色
全角文字の組み合わせ

CP文法[☆①]を配置を決定

最終
装飾

初期
設定

｢仝④｣｢☆①｣｢＠Ｇ｣三種類を組み合わせることで､複雑なレイアウトデザインができます｡※CP文法の順番は､自由です｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用CP文法⑥6-4-6■CP文法を2つ組み合わせて[画像]部位に複雑なデザインを施す｡
手間のかかる複雑なCSSによる枠装飾を簡単なCP文法で実現し､文字装飾も併用することが出来ます｡■画像枠 (◎○◇■●①～⑨)をベースにして､配置をCP文法で組み合わせる｡→[画像]部位の隙間に矢印を表示[注意]
色指定のCP文法を挿入しても画像縁には､元々色情報が無い
ため反映されません｡

CP文法が何もない初期配置

初期
設定

画像の縁

layerBOX配置

◎○◇■●
●①
●②
●③
●④
ベース
のどれか
を決定
●⑤
●⑥
●⑦
●⑧
●⑨

無し
☆①
☆②
★①
★②
★③

CP文法[●⑧]で画像の縁決定

CP文法[★①]で配置を指定

+

最終
装飾
｢●⑧｣｢★①｣の二種類を組み合わせることで､複雑なレイアウトデザインができます｡※CP文法の順番は､自由です｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

画像部位用CP文法⑦6-4-7■CP文法で[画像]部位の高さを調整する｡

手間のかかる複雑なCSSによる枠装飾を簡単なCP文法で実現し､文字装飾も併用することが出来ます｡■画像枠 の初期配列は自動で高さを調整します｡
1

3

2

高さを
自動
調整

1､2､3のように高さが異なる画像を横に並べた場合､自動でそれぞれの高さを判断し､均一に並ぶよう初期設定されています｡
3が高さ調整されているため､4の画像は下段に改行されます｡

4

5■画像枠の高さを調整しない場合は､CP文法の｢〓｣(ニゲタマーク･全角)使用します｡

1

2

3｢〓｣(ニゲタマーク･全角)使用
4

5

高さを
調整
しない
3､4､5に対して､CP文法を使用することで､高さの自動調整が行われず､3の下4の画像が配置されます｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

タグ部位用ツールバー①
汎用領域

領域の挿入

<style>の入力補助

6-5-1■(上級者向け)WYSIWYG機能の全てを網羅した高機能エディタ[タグ]部位に表示されるツールは､あらゆる表現を可能にします。高機能なだけに取り扱いには注意が必要です｡

インデントを増やす[本文]部位の挿入

インデントを減らす

箇条書き[見出]部位の挿入[タグ]部位用エディタを使うための準備(各領域の確保)[タグ]部位は本来､HTMLのコードを直接入力するための領域です｡そのためツールによる装飾機能を利用するためには､領域を確保しその中に内容を入れる必要があります｡

見出･画像･本文などの入れる場合､各アイコンを使用するとエディタ内に領域の種類の応じて色分けされたBOXが表示され構造がわかりやすくなります｡←[見出]部位の挿入をすると現れるBOX[見出]部位の挿入←[本文]部位の挿入をすると現れるBOX[本文]部位の挿入

汎用領域

段落番号

画像の挿入

領域が指定された場所に画像を挿入[タグ]部位のオプションである｢タグに対応するファイルをアップロー
ドする｣を利用し挿入したい画像をアップロードします｡(最大4枚まで)

画像URLはアップロードした際に表示される､このURLをコピーして使用します｡

領域の挿入←[領域の挿入]で現れるBOX野中には､
見出や本文のBOXを入れて複雑なレイアウトが可能になります｡

貼り付け例[ご注意]WYSIWYG EDITORはあくまでも入力を補助するツールです｡思い通りの表示が出来ない場合は､最初から始めるかソース画面で修正して下さい｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

タグ部位用ツールバー②
汎用領域

領域の挿入

<style>の入力補助

6-5-2■(上級者向け)WYSIWYG機能の全てを網羅した高機能エディタ[タグ]部位に表示されるツールは､あらゆる表現を可能にします。高機能なだけに取り扱いには注意が必要です｡[本文]部位の挿入[見出]部位の挿入[本文]部位の挿入

汎用領域
HTMLコードによるclass等を挿入するための領域確保の機能ため､理解できる方のみ使用して下さい｡
領域の挿入[本文]部位の機能オプションである｢本文装飾01～本文装飾06｣と同等の機能です｡[見出]部位の挿入

コンテンツの全幅に対して､1/1･1/2･1/3･1/4･1/5･1/6の横幅を持つ領域を確保します｡※[画像]部位の機能オプションである｢画像装飾01～画像装飾06｣と同等の機能です｡[見出]部位の機能オプションである｢見出装飾01～見出装飾06｣と同等の機能です｡<style>の入力補助
ページ全体の背景色や各BOXの背景色を自由に設定するためのCSS補助機能です｡※初期値は#eeeeeeで薄いグレーとなっています｡

youtube及びgooglemapのスマホ対応タグの設置方法

ページ全体の背景色#subbox全体の背景色#box1全体の背景色#box2全体の背景色#box3全体の背景色#box4全体の背景色#subbox枠内の背景色#box1枠内の背景色#box2枠内の背景色#box3枠内の背景色#box4枠内の背景色

1.Youtubeやgooglemapの<iframe>*** </iframe>を挿入後(必ず先に挿入)
2.アイコンを利用し｢youtebe領域の挿入｣｢googlemap領域の挿入｣を行って下さい｡

HTMLソースコード画面で色指定部分を自由に変更して下さい｡
領域内に動画やマップが表示されれば正常です｡※エディタ画面には表示されません｡※カラーコードは#を先頭にして6桁の英数字が並びます｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

タグ部位用ツールバー③

6-5-3■(上級者向け)WYSIWYG機能の全てを網羅した高機能エディタ[タグ]部位に表示されるツールは､あらゆる表現を可能にします。高機能なだけに取り扱いには注意が必要です｡

スライダー領域の挿入①｜[スライダー領域の挿入]を行うと4つの領域が表示されます｡
この領域内に画像を入れます｡②

Slider ID

スライダーの動き

slider1

左から右へスライド(自動)slider2

下から上へスライド(自動)slider3

左から右へスライド(手動)表の設置

簡易的な表を設置する機能

画像を挿入する位置にカーソル画像を挿入されます⑤

アップロードされた画像のURLをコピーし､｢画像挿入｣アイコンのEnter URLへ貼り付けます｡

横列×縦列の数字入力画面
本来は､[表組]部位を使用して表を作成しますが､画像下の文章にワンポイントで表を差し込むための機能です｡
表の装飾は､[表組]部位のように選べません｡
初期の灰色線の表となります｡③[タグ]部位のオプションである｢タグに対応するファイルをアップロードする｣を利用し挿入したい画像をアップロードします｡(最大4枚まで)④[DIV]領域を使用する上での注意
画像等を挿入する前に､領域内に改行や文字等がひとつでもあることを確認して下さい｡無いとDIVの領域が確保されない場合があります｡
DIVの領域が消えないよう､文字をを入れ､挿入が終わったら､消して下さい｡挿入した画像が文字の変わりとして認識され､DIVの領域は消えません｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

タグ部位用ツールバー④

6-5-4■(上級者向け)WYSIWYG機能の全てを網羅した高機能エディタ[タグ]部位に表示されるツールは､あらゆる表現を可能にします。高機能なだけに取り扱いには注意が必要です｡

特殊領域の挿入特殊領域の挿入アコーディオン機能の挿入

クリックすると隠れた文字が表示されます｡

Enterを押すことで､質問欄が表示され､入力しEnterを押すと､回答欄が表示されます｡

特殊領域の挿入カスタムフィールドの挿入
項目名と内容を頭揃えで揃えるフィールドを生成します｡

Enterを押すことで､項目欄が表示され､入力しEnterを押すと､内容欄が表示されます｡

スマホ対応版contents player部位装飾及び新機能設定書

7-1[メニュー関連] サイドメニュー(左naviのリンクボタン)の装飾の仕方①■文字のみの場合のサイドメニュー(シンプルな方法)
サイトの左側に位置する｢サイドメニュー｣は､サイト内コンテンツへの導線を作る重要なパーツです｡目的に応じて装飾を施して下さい｡①文字(バナーのテキスト)③形(画像の装飾)を指定してメニューを装飾する。
※初期装飾には､形状がありません｡

色を変更する場合は､②色(領域の色)を指定する｡①バナーのテキストを指定②色の指定③形状の指定｢タグ<>を挿入｣を利用する①バナーのテキストに続く文章を追加する場合に使用する利用域です｡HTMLタグが利用できるため自由度は高くなります｡●他のサービスで吐き出されたタグをそのまま貼り付けて利用できます｡(SNSや広告用バナータグ等)●簡単にに文章を入れる方法は､<p> 入れたい文章 </p>でくくり､挿入します｡

スマホ対応版contents player部位装飾及び新機能設定書

7-2[メニュー関連] サイドメニュー(左naviのリンクボタン)の装飾の仕方②■サイドメニューを画像に置き換える(シンプルな方法)｢サイドメニューを編集する｣で画像を登録した場合､｢バナーのテキスト｣は自動でALTタグ(画像をマウスオーバーした時に表示される文字)に変換されますので注意して下さい｡
CP文法が無い､通常状態①画像を登録②文字を指定画像があると②文字の指定はALTタグに変わり､サイト上には､表示されません｡

画像がある場合､色と形は無視されます。
CP文法を利用した画像サイドメニュー

CP文法を挿入画像がある場合､｢バナーのテキスト｣の文字は表示されませんので､｢タグを挿入｣を利用して文章を入力します｡

CP文法｢☆①｣を挿入

画像を40%に縮小し､左に配置､文字回り込み

CP文法｢☆②｣を挿入

画像を40%に縮小し､右に配置､文字回り込み

スマホ対応版contents player部位装飾及び新機能設定書

7-3[メニュー関連] サイドメニュー(左naviのリンクボタン)の装飾の仕方③■サイドメニューに画像付きのボタン風に置き換える(拡張機能)
画像をアイコン化するバリエーションのひとつとして､周りに罫線を配置し､ボタン風の変換する機能です｡

CP文法｢□｣で､②③の指定が初期の場合

指定する場合の注意③形状｢画像の装飾指定｣が､初期及び画像装飾01～04の場合､②の色｢領域の色指定｣を行っても､変化はありません｡①CP文法を挿入

CP文法｢∥①｣(全角)を挿入②の色｢領域の色指定｣を､ボタンの背景色として有効にするには､③の形状｢画像の装飾指定｣を05と06に指定した場合のみです｡②色の指定

CP文法｢□｣を利用したボタン作成 具体例③形状の指定画像がある場合､｢バナーのテキスト｣の文字は表示されませんので､｢タグを挿入｣を利用して文章を入力します｡

予約された<p class=“text”>と<span>を利用し､ボタンにリンクの設定をした場合の具体例です｡<p><span>説明する文章を入力する</span>
バナーにリンクを設置</p>

スマホ対応版contents player部位装飾及び新機能設定書

7-4[メニュー関連]CP文法によるローカルメニューの特殊装飾■自動配列されるローカルメニューのワンポイントアイコン化のCP文法
サイト構成図で第二階層に位置づけられたページは､親である第一階層を基準にして､自動でローカルメニューが表示されます｡
自動生成されるため､通常は装飾不可能ですが､CP文法である｢→ ← ↑ ↓｣(全角矢印)を使用することでアイコンの装飾をする事が出来ます｡
第一階層

第二階層(ローカルメニュー)

手順

各ページのページのラベルを設定する画面で｢ページのラベル｣にCP文法を挿入

アイコン化するためのCP文法(全角矢印)

→
←
↑
↓

CP文法が無い場合

CP文法がある場合は､階層が一つ下がったように表示されます｡

スマホ対応版contents player部位装飾及び新機能設定書

8-1[上級機能]タグによるの特殊機能① ●指定されたタグを利用する事で､特殊なコンテンツ表現を可能にします｡■コンテンツスライダー機能 (画像スライダー機能を応用したコンテンツ版機能)
通常の部位編集で作られた複数の部位をひとかたまりにして､かたまりごとに横スライドさせることが出来ます｡
スライダーの挙動について※画像スライダーと同じSlider ID

スライダーの動き

slider1

左から右へスライド(自動)slider2

下から上へスライド(自動)slider3

左から右へスライド(手動)手順1コンテンツスライダーを使用する宣言分※スライドさせるコンテンツ全体を<div id=“slider●”>で始め､必ず</div>で終了宣言します｡
手順

2

スライドさせる一つの固まりを作る｡<div>で始め</div>で終了宣言してください｡<div></div>で囲まれた部位の固まり(スライドさせる
ひとかたまり､ページ)は､複数作成する事ができます｡

実際の部位配列をサンプルとして､タグの意味を理解して下さい｡<div id="slider3">
<div>

注
意

部位はいくつでも配置可能

1つ目の中身複数のページをスライドさせる場合、コンテンツ量が一番多い
ページの高さに自動で固定されます。部位の数やコンテンツ量を調整して、無駄な余白を出さないようにするのがポイントです。

1つ目のコンテンツの中身(1ページ目)</div><div>
部位はいくつでも配置可能

2つ目の中身2つめのコンテンツの中身(2ページ目)</div></div >

Unicode:
スマホ対応版contents player部位装飾及び新機能設定書

8-2[上級機能]タグによるの特殊機能② ●指定されたタグを利用する事で､特殊なコンテンツ表現を可能にします｡■Font Awesome採用/アイコンタグの設置方法

コンテンツの表現力を高めるため外部のアイコンライブラリーFort Awesomeにある600以上のアイコンが利用可能です｡

手順

1

手順

2

アイコンライブラリーサイト｢Font Awesome｣にアクセス

https://fontawesome.com/v4.7.0/icons/

使用したいアイコンを選択してクリック<i class=“fa fa-arrow-circle-right fa-4x”></i>クリック
Fort Awesome専用サイズ指定可能

手順3

アイコン詳細ページから
そのアイコン表示用タグをコピー

手順

5

サイズを拡張する場
合は…

手順

4

[本文][画像][表組]部位のテキストエリアに挿入
タグをコピー<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>スマホ対応版contents player部位装飾及び新機能設定書

9-1[新機能]テンプレートを編集する機能 ●あらゆるデバイスに対応したコンテンツプレイヤー専用パーツを入れ替えます｡■サイトの文字や背景､表や囲み罫等のCSSを自由に変更

ROOT及びグループごとに変更可能です｡

様々な大きさや比率に対応しなければならないスマホには､画像のみで作られたデザインは不向きです｡
コンテンツプレイヤーでは､これらのパーツを全て可変可能なCSSであらかじめ準備しました｡

スマホ対応版にはこのボタンが追加されています

手順1■適応済みCSSを確認する｢サイトテンプレートを編集する｣で変更されたCSSを実際のサイトで確認することが出来ますので､ページを編集する際にご利用下さい｡

http://契約ドメイン名/グループ名/cp.html
グループが無い場合(ROOTのみ使用)
http://契約ドメイン名/cp.htmlとなります｡※このページは検索されないようになって
います｡

手順

2

初期値に戻す場合は､00:デザイン用テンプレート(F01)で最新版に適応して下さい｡

00:デザイン用テンプレートを適応後細部の各パーツを適応して下さい｡

01～07デザイン用テンプレート(F01)①装飾パーツの形状を確認
現在のCSS
一覧ページ②装飾パーツの色をチェック③[デザインを反映する]を押して､実際のサイトをF5で再読込をして確認｡

スマホ対応版[contents player] WYSIWYG HTML エディタ

エディタ使用上の注意①

10-1■(上級者向け)WYSIWYG機能は､HTML生成補助ツール

難しいHTMLタグをアイコン一つで挿入する補助機能のため､複雑な入れ子状態のタグ指定は､時として思う通りになりません｡■ 画像の上に色指定した文字を表示するlayerboxの挿入の仕方
解説2

解説1

解説1

●画像下の文章を画像の上にのせるlayerboxを指定した場合は､下記のよう赤文字のタグが挿入されます｡<span class=“layerbox lcen lbgb”>[画像]部位の……SEOにも有効です｡</span>●文字が黒のため､白文字にして見やすくするためには､
通常では､文字範囲を指定して文字色を指定しますが､HTML配列のルールー上､このままだと､色指定(緑タグ)がレイアウト指定(赤タグ)の外にくくられて正常に表示されません｡

× <span style="color: rgb(255, 255, 255);"><span class=“layerbox lcen lbgb”>[画像]部位の……SEOにも有効です｡</span></span>○
解説2<span class=“layerbox lcen lbgb”><span style="color: rgb(255, 255, 255);"> [画像]部位の……SEOにも有効です｡</span></span>●layerBOXを指定した後､中の文章の最後にエンターキーを挿入して､文字の色指定を行ってください｡レイアウト指定(赤タグ)色指定(緑タグ)の順番が変わり正常に表示されます｡

文章の改行位置や最後にエンターキーを挿入