ブックにオリジナルスキンを使用する場合、編集データをダウンロードの上、
スキンを編集いただき、ブックにスキンを適用します。
詳細につきましては以下のリンクからご確認をお願いいたします。
1.オリジナルスキン編集データをダウンロードする
- 次の3箇所のいずれかのボタンを押して、デザインスキンをダウンロードする画面にアクセスします。
・マイページ画面左側の「デザインスキンダウンロード」
・ブック管理画面左側の「カスタマイズ用スキン一覧」
・各ブック編集画面の「カスタマイズ用スキン一覧」
※各ブック編集画面からアクセスされた場合は手順3にお進みください。 - デザインスキンダウンロード画面でブックバージョンを選択し、
「ダウンロードページへ移動」ボタンを押します。 - ブックスキン画面で「ダウンロード」ボタンを押して、
オリジナルスキン編集データをダウンロードします。
2.オリジナルスキンを編集する(よくある編集内容)
2-1.ブックのリンクアイコンを変更する
リンクアイコンはオリジナルスキン編集データを解凍して生成されるフォルダの
次の場所にアイコンファイルがございますので、対象ファイルを画像編集ソフトなどで
編集(または差し替え)ください。
バージョン7.0より
- PC用
[スキンフォルダ名]/common_parts/link_icons - タブレット・スマートフォン用
[スキンフォルダ名]/common_parts/link_icons-sd
バージョン6.0
- PC用
[スキンフォルダ名]/book/common/img/parts/link_icons/ - タブレット・スマートフォン用
[スキンフォルダ名]/book/common/img/parts/link_icons-sd/
詳細につきましてはマニュアル「リンクアイコンを変更する」をご覧ください。
2-2.ブックのアイコンデザインを変更する
アイコンデザインはPC・タブレット・スマートフォン用の一式を1つのSVGファイルとして
管理しております。
アイコンデザインを編集する場合はSVGファイルの元データであるAIファイルを
Adobe Illustratorで編集いただき、SVGファイルとして書き出しをお願いいたします。
AIファイルの詳細につきましてはマニュアル「アイコンデザインを変更する」をご覧ください。
AIファイルはオリジナルスキン編集データを解凍して生成されるフォルダの
次の場所にsprites.ai(アイコンデザイン編集用ファイル)がございます。
- sprites.aiファイルの場所
[スキンフォルダ名]/sprites.ai
編集されたsprites.aiからSVGファイルとして書き出しの上、
次の場所にSVGファイルがございますので、差し替えください。
- アイコンデザインSVGファイルの場所
- バージョン7.0より
- [スキンフォルダ名]/sprites.svg
- バージョン6.0
- [スキンフォルダ名]/book/common/img/sprites.svg
- バージョン7.0より
2-3.ブックのデザインを変更する
ブックのデザインはオリジナルスキン編集データを解凍して生成されるフォルダの
次の場所にCSSファイルがございますので、テキストを編集するアプリケーションなどで
開き編集ください。
- CSSファイルの場所
- バージョン7.0より
- [スキンフォルダ名]/css/labelon.css (説明あり)
- [スキンフォルダ名]/css/labeloff.css (説明なし)
- バージョン6.0
- [スキンフォルダ名]/book/common/css/viewer.min.css
- バージョン7.0より
スタイルにつきましては、各パーツの名称を [(機能名)用CSS] の形でコメントを
記載しておりますので、変更対象の機能名を検索いただきスタイルを編集ください。
例）ヘッダーの場合、[ヘッダー用CSS] になります。
※スタイルとして定義されていない要素につきましては、お客様側で要素を指定いただきスタイルの追加をお願いいたします。
2-4.ブックで使用しているメッセージを変更する
ブックで表示されるメッセージはオリジナルスキン編集データを解凍して生成されるフォルダの
次の場所にメッセージファイルがございますので、テキストを編集するアプリケーションなどで
開き編集ください。
- メッセージファイルの場所
- バージョン7.0より
- [スキンフォルダ名]/locale/【言語 jp|en|sc】/message/message-core.json
- バージョン6.0
- [スキンフォルダ名]/book/settings/message-core.json
- バージョン7.0より
メッセージにつきましては、ファイル内で各テキストを "(ダブルクォーテーション)で
囲っておりますのでテキスト部分のみ編集ください。
例）キーワード検索に表示されている「検索キーワードを入力」を変更する場合
"検索キーワードを入力" という形で記載しております。
3.オリジナルスキンを適用する
3-1.ブック個別に適用する
編集したオリジナルスキンをブック個別に適用する手順は下記になります。
- オリジナルスキン編集データを解凍して生成されたフォルダ内の
[スキンフォルダ名]フォルダをzip圧縮します。 - ブック管理から適用するブックの編集ボタンを押します。
- ブック編集 > ブックデザイン設定にアクセスします。
- ブックデザイン設定画面左側の「オリジナルスキン追加」ボタンを押します。
- 「オリジナルスキン追加」ウィンドウより、zip圧縮したオリジナルスキン編集データを選択し、
スキン名を入力の上「アップロード」ボタンを押してオリジナルスキンを追加します。 - ブックデザイン設定画面右側のスキン一覧より「オリジナル」タブを押し、
追加したオリジナルスキンを選択の上「完了」ボタンを押します。
3-2.作成済みのブックにまとめて適用する
編集したオリジナルスキンを作成済みのブックにまとめて適用する手順は下記になります。
※クラウドプラン プレミアムコース以上もしくは無料トライアルでご利用いただけます。
※バージョン6.0未満のブックは選択できませんので、ブックバージョンを引き上げるか
「3-1.ブック個別に適用する」で個別に適用をお願いいたします。
- オリジナルスキン編集データを解凍して生成されたフォルダ内の
[スキンフォルダ名]フォルダをzip圧縮します。 - ブック管理画面左側の「ブック一括編集」ボタンを押します。
- オリジナルスキンを適用するブックのバージョンを選択します。
- オリジナルスキンを適用するブックにチェックを入れ、「次へ」ボタンを押します。
- ブックデザイン設定にアクセスします。
- 画面左側の「オリジナルスキン追加」ボタンを押します。
- 「オリジナルスキン追加」ウィンドウより、zip圧縮したオリジナルスキン編集データを選択し、
スキン名を入力の上「アップロード」ボタンを押してオリジナルスキンを追加します。 - [ブックデザイン設定]を "ON" に切り替え、画面右側のスキン一覧より
「オリジナル」タブを押し、追加したオリジナルスキンを選択の上「確認」ボタンを押します。 - 適用するブックIDおよび変更内容を確認し「実行」ボタンを押します。
- 処理の進捗状況が表示され、処理完了後は画面上に "ブック一括編集が完了しました。" と
表示されます。
3-3.ブック作成時の初期選択スキンとして使用する
編集したオリジナルスキンをブック作成時の初期選択スキンとして使用する手順は下記になります。
- オリジナルスキン編集データを解凍して生成されたフォルダ内の
[スキンフォルダ名]フォルダをzip圧縮します。 - ブック管理画面左側の「初期ブックデザイン設定」ボタンを押します。
- オリジナルスキンを適用するブックバージョンを選択し、
初期ブックデザイン設定画面左側の「オリジナルスキン追加」ボタンを押します。 - 「オリジナルスキン追加」ウィンドウより、zip圧縮したオリジナルスキン編集データを選択し、
スキン名を入力の上「アップロード」ボタンを押してオリジナルスキンを追加します。 - 初期ブックデザイン設定画面右側のスキン一覧より「オリジナル」タブを押し、
追加したオリジナルスキンを選択の上「完了」ボタンを押します。
4.ご利用時のご注意点
4-1.「アップロードファイルのバージョンが異なります。」のメッセージが表示される
オリジナルスキンのバージョンがブックのバージョンと異なる場合
もしくはオリジナルスキンのバージョンが6.0以上の場合にアイコン編集用ファイルが含まれている場合に
該当メッセージが表示されます。
詳細につきましては「【エラーメッセージ】アップロードファイルのバージョンが異なります。」をご覧ください。
4-2.「アップロードファイルの構成が異なります。」のメッセージが表示される
zip圧縮したオリジナルスキンのフォルダ構成が異なっている場合に該当メッセージが表示されます。
詳細につきましては「【エラーメッセージ】アップロードファイルの構成が異なります。」をご覧ください。
4-3.オリジナルスキンを適用してもスキンが反映されない
ブラウザが古いキャッシュを使用して、オリジナルスキンの内容が表示されないことが考えられます。
詳細につきましては「設定変更した内容が、ブックに反映されません。」をご覧ください。