14 製 -SU010436-02 第 2 版 :2015 年 5 月 26 日
第 1 章 はじめに... 3 1-1. 本 棚 表 示 キットとは?... 4 1-2. 動 作 環 境 ( 閲 覧 側 )... 5 第 2 章 基 本 的 な 使 い 方... 6 2-1. テンプレートの 構 成... 7 2-2. 作 成 手 順... 11 2-3. コンテンツの 格 納... 12 2-4. 本 棚 表 示 の 設 定 方 法... 13 2-5.リスト 表 示 の 設 定 方 法... 16 2-6.コンテンツ 詳 細 ページの 設 定 方 法... 19 2-7. メニューバーのロゴの 変 更 方 法... 23 2-8.ページタイトルの 設 定... 25 第 3 章 カスタマイズ デザイン 変 更... 27 3-1. 本 棚 の 表 紙 クリックで 直 接 コンテンツを 開 く 場 合... 28 3-2. ヘッダーを 追 加 する... 29 3-3. ヘッダーのデザインを 変 更 する... 31 3-4.バナーを 追 加 する... 33 3-5. 本 棚 のデザインを 変 更 する... 35 3-6.CSS 構 成 について ~ 高 度 なカスタマイズのために~... 40 第 4 章 マルチユースでの 活 用 方 法... 41 4-1. 作 成 した 本 棚 ファイルの 公 開 方 法... 42 4-2.Web ページへの 埋 め 込 み 方 法... 43 4-3.パソコン 閲 覧 用 CD DVD の 作 り 方... 44 4-4.モバイルアプリの 作 り 方 ( 将 来 記 述 予 定 )... 45 お 問 い 合 わせ 更 新 履 歴... 46 お 問 い 合 わせ 窓 口... 47 更 新 履 歴... 48 2 / 48
第 1 章 はじめに 3 / 48
1-1. 本 棚 表 示 キットとは? 本 棚 表 示 キットは ロゴスウェアのコンテンツ 作 成 ソフト(FLIPPER U STORM Maker THiNQ Maker)で 作 成 したコンテンツをデジタル 本 棚 に 並 べて 表 示 するための HTML ファイル 群 です 本 棚 表 示 キットを 利 用 することで 1から HTML CSS を 作 成 することなく コンテンツを 並 べたデジ タル 本 棚 を 作 成 できます 本 棚 表 示 キットを 利 用 して 作 成 したデジタル 本 棚 は パソコン スマートフォン タブレット 等 のマル チデバイスで 表 示 できます 本 棚 表 示 キット 一 式 は 下 記 から 入 手 頂 けます http://download.logosware.com/soft/bookshelf-kit/dl/bookshelf-kit.zip 本 棚 表 示 キットの 利 用 例 最 新 カタログとバックナンバーの 掲 載 に 広 報 紙 とアンケートなどに 必 要 なマニュアルをセットに セミナーの 録 画 と 資 料 の 掲 載 に 4 / 48
1-2. 動 作 環 境 ( 閲 覧 側 ) 本 棚 表 示 キットは 動 作 環 境 ( 閲 覧 側 )として 以 下 を 推 奨 しています パソコン Windows OS Windows 8 8.1 1 Windows 7 Windows Vista Macintosh Mac OS X 10.4 10.5 10.6 日 本 語 版 Windows XP 2 ブラウザ Internet Explorer 8 以 上 3 Firefox 3 以 上 Google Chrome Firefox 3 以 上 Safari 4 以 上 Google Chrome 1 Windows8 特 有 のインタフェース(メトロ 版 )でもご 覧 いただけますが 万 一 想 定 外 の 動 作 をした 場 合 は デスクトップモードで 閲 覧 してください 2 Windows XP マイクロソフト 社 サポート 終 了 に 関 連 した 情 報 はこちらをご 覧 ください 3 Internet Explorer 8 以 下 の 場 合 本 棚 の 表 示 が 崩 れることがあります スマートフォン/タブレット 対 応 機 種 iphone(iphone 4 以 上 ) : ios4.3 以 上 ipad : ios4.3 以 上 Android : Android2.2 以 上 Kindle Fire (Kindle Fire 2nd Generation, Kindle Fire HD) 標 準 ブラウザでの 閲 覧 を 前 提 とします Android 対 応 機 種 リストはこちらをご 覧 ください 5 / 48
第 2 章 基 本 的 な 使 い 方 6 / 48
2-1. テンプレートの 構 成 本 棚 表 示 キットは 以 下 の 3 種 類 の 画 面 で 構 成 されています 1. 本 棚 表 示 2. リスト 表 示 3. コンテンツ 詳 細 ページ 1. 本 棚 表 示 コンテンツの 表 紙 タイトルが 本 棚 に 並 んで 表 示 されます リスト をクリックすると 2.リスト 表 示 に 切 り 替 わります コンテンツの 表 紙 をクリックすると 3.コンテンツ 詳 細 ページ に 切 り 替 わります 7 / 48
2. リスト 表 示 コンテンツの 表 紙 タイトル 説 明 文 がリスト 形 式 で 表 示 されます 本 棚 をクリックすると 1. 本 棚 表 示 に 切 り 替 わります カタログを 開 く をクリックするとコンテンツが 開 きます 8 / 48
3. コンテンツ 詳 細 ページ コンテンツの 表 紙 タイトル ページ 数 説 明 文 コンテンツを 開 くボタン 等 が 表 示 されます 戻 る をクリックすると 1. 本 棚 表 示 に 切 り 替 わります カタログを 開 く をクリックするとコンテンツが 開 きます 9 / 48
本 棚 表 示 キットのファイル 構 成 本 棚 表 示 キットは 以 下 のファイルで 構 成 されています コンテンツ 格 納 用 フォルダ 本 棚 表 示 用 ファイル リスト 表 示 用 ファイル コンテンツ 詳 細 ページ 用 ファイル 10 / 48
2-2. 作 成 手 順 1. デジタル 本 棚 を 作 成 する 前 に 本 棚 に 並 べるコンテンツを 用 意 しておいてください 作 成 には html の 知 識 が 多 少 必 要 です 2. デジタル 本 棚 を 作 成 する 以 下 の 流 れでデジタル 本 棚 を 作 成 します 詳 細 は 次 のページから 説 明 しています 1. コンテンツを 格 納 する 2. 本 棚 表 示 の 設 定 をする 3. リスト 表 示 の 設 定 をする 4. コンテンツ 詳 細 ページの 設 定 をする 5. メニューバーのロゴを 変 更 する 3. 作 成 したデジタル 本 棚 を 公 開 する デジタル 本 棚 HTML テンプレートを 利 用 して 作 成 したデジタル 本 棚 は Web サイトなどに 載 せて 利 用 するオンライン 利 用 CD や DVD に 焼 いて 配 布 するオフライン 利 用 の 両 方 に 対 応 しています 詳 細 は 第 4 章 マルチユースでの 活 用 方 法 で 説 明 しています パソコン 閲 覧 用 CD DVD の 作 成 にはオフライン 閲 覧 キット( 別 売 り)が 必 要 です 11 / 48
2-3. コンテンツの 格 納 本 棚 に 並 べたいコンテンツを 本 棚 表 示 キットの 中 にある contents フォルダの 中 に 入 れます < 本 棚 に 並 べたいコンテンツ> < 本 棚 表 示 キット> 入 れる 本 棚 に 並 べたい 順 に book1 ~ book8 とフォルダ 名 を 連 番 で 付 けておくと その 後 の 設 定 作 業 が 少 し 楽 です フォルダ 名 は 半 角 英 数 字 にしてください 日 本 語 などの 全 角 文 字 は 使 用 しないようご 注 意 ください 12 / 48
2-4. 本 棚 表 示 の 設 定 方 法 各 パーツの 名 称 1 本 棚 タイトル 2 コンテンツ タイトル 3 コンテンツ サムネイル 1. 本 棚 タイトル 2.コンテンツタイトル 3.コンテンツサムネイルの 設 定 方 法 を 説 明 します 13 / 48
1. 本 棚 表 示 キット 内 の index.html を 編 集 用 ソフトで 開 く 本 棚 表 示 キットの 中 にある index.html が 本 棚 表 示 画 面 のファイルです HTML ファイルを 編 集 できるソフトで index.html を 開 いてください Windows にインストールされている メモ 帳 や ワードパット は 使 用 しないようにご 注 意 ください フリーソフトの TeraPad や Crescent Eve などのエディター は 使 用 して 大 丈 夫 です index.html の 内 容 本 棚 タイトル コンテンツタイトル コンテンツサムネイル 14 / 48
2. 本 棚 タイトルを 設 定 する h2 タグで 囲 われた 文 字 を 必 要 に 応 じて 変 更 してください 3. コンテンツタイトルを 設 定 する 1. リンク 先 のコンテンツ 詳 細 ページを 指 定 してください 2. a タグ(class= ctitle )で 囲 われた 文 字 を 変 更 してください 4. コンテンツサムネイルを 設 定 する img タグ(class= thumbnail ) 内 の src でコンテンツサムネイルに 指 定 したい 画 像 ファイルを 指 定 し てください contents フォルダ 内 に 格 納 したコンテンツの 中 にはサムネイル 用 の 画 像 が 入 っているので それを 指 定 してください contents フォルダの 中 に 格 納 したコンテンツフォルダ 名 が book1~book8 の 場 合 は すでに 指 定 された 状 態 になっています (FLIPPER U コンテンツの 場 合 ) < 参 考 :コンテンツの 表 紙 画 像 のパス> FLIPPER U コンテンツの 場 合 :contents/コンテンツフォルダ 名 /page1/thumbnail.jpg STORM コンテンツの 場 合 :contents/コンテンツフォルダ 名 /view.jpg THiNQ コンテンツの 場 合 :contents/コンテンツフォルダ 名 /thumbnail.png 15 / 48
2-5.リスト 表 示 の 設 定 方 法 各 パーツの 名 称 1 コンテンツサムネイル 2 コンテンツタイトル 4 コンテンツを 開 くボタン 3 説 明 文 ここでは 1. コンテンツサムネイル 2.コンテンツタイトル 3. 説 明 文 4.コンテンツを 開 くボタンの 設 定 方 法 を 説 明 します 16 / 48
1. 本 棚 表 示 キット 内 の index_list.html を 編 集 用 ソフトで 開 く 本 棚 表 示 キットの 中 にある index_list.html が リスト 表 示 画 面 のファイルです HTML ファイルを 編 集 できるソフトで index_list.html を 開 いてください Windows にインストールされている メモ 帳 や ワードパット は 使 用 しないようにご 注 意 ください フリーソフトの TeraPad や Crescent Eve などのエディター は 使 用 して 大 丈 夫 です index_list.html の 内 容 コンテンツサムネイル 説 明 文 コンテンツタイトル コンテンツを 開 くボタン 17 / 48
2.コンテンツサムネイルを 設 定 する img タグ(class= thumbnail ) 内 の src でコンテンツサムネイルに 指 定 したい 画 像 ファイルを 指 定 し てください contents フォルダ 内 に 格 納 したコンテンツの 中 にはサムネイル 用 の 画 像 が 入 っているので それを 指 定 してください contents フォルダの 中 に 格 納 したコンテンツフォルダ 名 が book1~book8 の 場 合 はすでに 指 定 さ れた 状 態 になっています (FLIPPER U コンテンツの 場 合 ) < 参 考 :コンテンツの 表 紙 画 像 のパス> FLIPPER U コンテンツの 場 合 :contents/コンテンツフォルダ 名 /page1/thumbnail.jpg STORM コンテンツの 場 合 :contents/コンテンツフォルダ 名 /view.jpg THiNQ コンテンツの 場 合 :contents/コンテンツフォルダ 名 /thumbnail.png 3. コンテンツタイトルを 設 定 する h3 タグで 囲 われた 文 字 を 変 更 してください 4. 説 明 文 を 設 定 する コンテンツタイトル 下 の p タグで 囲 われた 文 字 を 変 更 してください 5. コンテンツを 開 くボタンを 設 定 する 1. リンク 先 のコンテンツを 指 定 してください 2. a タグ(class= btn )タグで 囲 われた 文 字 を 適 宜 変 更 してください ボタンのアイコンは i タグのクラス 指 定 により 変 更 可 能 です glyphicon-book glyphicon-play glyphicon-pencil 18 / 48
2-6.コンテンツ 詳 細 ページの 設 定 方 法 各 パーツの 名 称 本 棚 表 示 キット 利 用 マニュアル 1 コンテンツサムネイル 2 コンテンツタイトル 3 コンテンツを 開 くボタン 4 説 明 文 ここでは 1. コンテンツサムネイル 2.コンテンツタイトル 3. コンテンツを 開 くボタン 4. 説 明 文 の 設 定 方 法 を 説 明 します 19 / 48
1. 本 棚 表 示 キット 内 の intro_book1.html を 編 集 用 ソフトで 開 く 本 棚 表 示 キットの 中 にある intro_book1(~8).html が コンテンツ 詳 細 ページのファイルです ( ) HTML ファイルを 編 集 できるソフトで intro_book1.html を 開 いてください Windows にインストールされている メモ 帳 や ワードパット は 使 用 しないようにご 注 意 ください フリーソフトの TeraPad や Crescent Eve などのエディター は 使 用 して 大 丈 夫 です コンテンツ 詳 細 ページのファイルは intro_book1(~8).html が 初 期 設 定 されていますが ファ イル 名 は 適 宜 変 更 可 能 です( 半 角 英 数 のみ) また コンテンツ 数 に 合 わせてファイルの 増 減 を 自 由 に 行 ってください ファイル 名 を 変 更 した 際 には index.html で 指 定 しているリンク 先 を 合 わせて 変 更 してください 20 / 48
intro_book1.html の 内 容 コンテンツサムネイル コンテンツタイトル 説 明 文 コンテンツを 開 くボタン 2.コンテンツサムネイルを 設 定 する img タグ(class= thumbnail ) 内 の src でコンテンツサムネイルに 指 定 したい 画 像 ファイルを 指 定 してく ださい contents フォルダ 内 に 格 納 したコンテンツの 中 にはサムネイル 用 の 画 像 が 入 っているのでそれを 指 定 してください contents フォルダの 中 に 格 納 したコンテンツフォルダ 名 が book1~book8 の 場 合 は すでに 指 定 された 状 態 になっています (FLIPPER U コンテンツの 場 合 ) < 参 考 :コンテンツの 表 紙 画 像 のパス> FLIPPER U コンテンツの 場 合 :contents/コンテンツフォルダ 名 /page1/thumbnail.jpg STORM コンテンツの 場 合 :contents/コンテンツフォルダ 名 /view.jpg THiNQ コンテンツの 場 合 :contents/コンテンツフォルダ 名 /thumbnail.png 21 / 48
3. コンテンツタイトルを 設 定 する h3 タグで 囲 われた 文 字 を 変 更 してください 4. コンテンツを 開 くボタンを 設 定 する 1. リンク 先 のコンテンツを 指 定 してください 2. a タグ(class= btn )タグで 囲 われた 文 字 を 適 宜 変 更 してください ボタンのアイコンは i タグのクラス 指 定 により 変 更 可 能 です glyphicon-book glyphicon-play glyphicon-pencil 5. 説 明 文 を 設 定 する div(class= info ) 内 の p タグで 囲 われた 文 字 を 変 更 してください 22 / 48
2-7. メニューバーのロゴの 変 更 方 法 メニューバーのロゴ メニューバーのロゴ 23 / 48
表 示 したい 画 像 ファイルを img フォルダ 内 に 上 書 き 保 存 する 本 棚 表 示 キット 利 用 マニュアル <ロゴ 画 像 > < 本 棚 表 示 キット> logo.png 入 れる ロゴ 画 像 名 は logo.png にしてください 高 さ 22 ピクセルが 推 奨 サイズです <logo.png 以 外 のファイル 名 の 画 像 を 使 う 場 合 > 1. 本 棚 表 示 キットの 中 にある index.html と index_list.html を HTML ファイルを 編 集 できるソ フトで 開 いてください 2. div(id= mainmenu )>h1>img の src のファイル 名 を 変 更 してください 3. 必 要 に 応 じて height の 数 字 を 変 更 してください 24 / 48
2-8.ページタイトルの 設 定 ブラウザのタブなどに 表 示 されるページタイトルの 設 定 をしましょう 1. 各 HTML ファイルを 編 集 用 ソフトで 開 く HTML ファイルを 編 集 できるソフトで 各 HTML ファイルを 開 いてください Windows にインストールされている メモ 帳 や ワードパット は 使 用 しないようにご 注 意 くだ さい フリーソフトの TeraPad や Crescent Eve などのエディターは 使 用 して 大 丈 夫 です 25 / 48
2.title タグ 部 分 を 各 ページに 合 ったタイトルにする 本 棚 表 示 キット 利 用 マニュアル title タグで 囲 われた 文 字 を 変 更 してください ページごとにユニークなもの( 固 有 のもの)を 設 定 することをおすすめします 26 / 48
第 3 章 カスタマイズ デザイン 変 更 27 / 48
3-1. 本 棚 の 表 紙 クリックで 直 接 コンテンツを 開 く 場 合 本 棚 の 表 紙 をクリックした 際 コンテンツ 詳 細 ページではなく 直 接 コンテンツを 開 く 場 合 は index.html 内 のコンテンツタイトルとコンテンツサムネイル 画 像 のリンク 先 を 変 更 してください また target= _blank の 指 定 を 追 加 してください リンク 先 ファイル 名 例 :book1 を 直 接 開 く 場 合 コンテンツタイトル 部 分 : <a class= ctitle href= contents/book1/index.html target= _blank >コンテンツタイトル</a> コンテンツサムネイル 部 分 : <a class= cimage href= contents/book1/index.html target= _blank ><img( 省 略 ) /></a> 28 / 48
3-2. ヘッダーを 追 加 する ページの 最 上 部 にヘッダーを 追 加 できます 29 / 48
ヘッダーの 追 加 方 法 各 html ファイル 内 の body タグと div(class= container )の 間 に 下 記 のコードを 追 加 してください ヘッダー 用 のコード <div id= header > <h1>ヘッダーのタイトル</h1> </div> index.html ファイル 内 にはコメントアウトして 記 述 してあるので コメントアウトを 外 してご 利 用 くださ い (コードを 囲 んでいる <!-- と --> を 削 除 するとコメントアウトが 外 れます) 30 / 48
3-3. ヘッダーのデザインを 変 更 する ヘッダーのデザインは 下 記 の CSS ファイルで 指 定 されています 適 宜 CSS および HTML を 書 き 換 えてデザインを 変 更 してください 1. css/shelf-theme.css( 全 デバイスに 適 用 される CSS) 2. css/x-small.css( 幅 320 ピクセル 以 下 のデバイスにのみ 適 用 される CSS) css/shelf-theme.css css/x-small.css 31 / 48
背 景 色 を 変 更 する css/shelf-theme.css の#header{} 内 の background 部 分 の 色 指 定 を 変 更 する 文 字 色 を 変 更 する css/shelf-theme.css の#header{} 内 の color 部 分 の 色 指 定 を 変 更 する 色 は 16 進 数 で 指 定 してください 背 景 色 と 文 字 色 の 明 度 差 に 気 をつけてください 色 選 びの 参 考 に 原 色 大 辞 典 http://www.colordic.org/ 32 / 48
3-4.バナーを 追 加 する 本 棚 の 上 下 にバナーを 追 加 できます 33 / 48
バナーの 追 加 方 法 バナーを 表 示 させたい 箇 所 に 下 記 のコードを 追 加 してください バナー 用 のコード <div class="banner clearfix"> <ul> <li><a href="リンク 先 URL" target="_blank"><img src="img/banner1.png" alt="バナー 名 "></a></li> <li><a href="リンク 先 URL" target="_blank"><img src="img/banner2.png" alt="バナー 名 "></a></li> <li><a href="リンク 先 URL " target="_blank"><img src="img/banner3.png" alt="バナー 名 "></a></li> </ul> </div> index.html ファイル 内 にはコメントアウトして 記 述 してあるので コメントアウトを 外 してご 利 用 くださ い (コードを 囲 んでいる <!-- と --> を 削 除 するとコメントアウトが 外 れます) バナー 画 像 は 全 デバイス 同 じサイズで 表 示 されます 幅 300px 以 下 の 画 像 をお 使 いください 34 / 48
3-5. 本 棚 のデザインを 変 更 する 本 棚 背 景 デザインの 種 類 おすすめ 本 棚 本 棚 タイトル 背 景 本 棚 背 景 通 常 本 棚 本 棚 の 背 景 デザインは2 種 類 あります それぞれ 本 棚 タイトル 背 景 と 本 棚 背 景 を 変 更 できます 1. おすすめ 本 棚 ( 上 段 ) 2. 通 常 本 棚 ( 下 段 ) 本 棚 デザインの 変 更 方 法 img フォルダの 中 の 画 像 を 差 し 替 えることで 本 棚 の 背 景 デザインを 変 更 できます 1. 指 定 したサイズの 背 景 画 像 を 用 意 する 2. img フォルダ 内 の 背 景 画 像 に 上 書 きする 35 / 48
本 棚 デザインに 使 用 する 画 像 img フォルダ 内 の 本 棚 デザインにかかわる 画 像 は 下 記 の6ファイルです 1 2 3 4 4 1. おすすめ 本 棚 タイトル 背 景 img/bg_shelf_title_recommendation.png 2. おすすめ 本 棚 背 景 img/bg_shelf_s_recommendation.png(スマホ 用 ) img/bg_shelf_m_recommendation.png(タブレット PC 用 ) 3. 通 常 本 棚 タイトル 背 景 img/bg_shelf_title.png 4. 通 常 本 棚 背 景 img/bg_shelf_s.png(スマホ 用 ) img/bg_shelf_m.png(タブレット PC 用 ) 36 / 48
各 画 像 のサイズ(おすすめ 本 棚 通 常 本 棚 とも 共 通 ) 各 画 像 は 表 示 するサイズの3 倍 のサイズで 作 成 します 高 解 像 度 のスマートフォン タブレットでの 表 示 のために3 倍 サイズで 作 成 します 等 倍 で 作 成 した 場 合 スマートフォン タブレットでぼやけた 見 え 方 になるのでご 注 意 ください 背 景 画 像 は repeat 指 定 で 縦 横 繰 り 返 し 表 示 しています 表 示 サイズ( 高 さ) 本 棚 タイトル 背 景 : 可 変 ( 参 考 :テキスト1 行 で 34 ピクセル 程 度 ) 本 棚 背 景 全 体 (1 段 ):スマホ 用 146 ピクセル/タブレット PC 用 200 ピクセル 背 面 :スマホ 用 134 ピクセル/タブレット PC 用 184 ピクセル 天 板 上 側 :スマホ 用 6 ピクセル/タブレット PC 用 8 ピクセル 天 板 正 面 :スマホ 用 6 ピクセル/タブレット PC 用 8 ピクセル 37 / 48
作 成 する 画 像 のサイズ( 高 さ) 本 棚 タイトル 背 景 : 模 様 の 区 切 りがいいサイズであればサイズ 問 わず 本 棚 背 景 全 体 (1 段 ):スマホ 用 438 ピクセル/タブレット PC 用 600 ピクセル 背 面 :スマホ 用 402 ピクセル/タブレット PC 用 552 ピクセル 天 板 上 側 :スマホ 用 18 ピクセル/タブレット PC 用 24 ピクセル 天 板 正 面 :スマホ 用 18 ピクセル/タブレット PC 用 24 ピクセル カスタマイズ 例 その1: 無 地 本 棚 背 景 を 画 像 A のようなものにすると 本 棚 の 表 示 は 右 の 図 のようになります 画 像 A のように 模 様 がない 背 景 の 場 合 横 幅 は 1px あれば 十 分 です < 画 像 A> < 本 棚 の 表 示 > 3 分 の1に 縮 小 表 示 & XY 軸 方 向 に 繰 り 返 し 表 示 38 / 48
その2: 模 様 付 き 1 段 ずつ 色 違 い 本 棚 背 景 を 画 像 B のようなものにすると 本 棚 の 表 示 は 右 の 図 のようになります < 画 像 B> < 本 棚 の 表 示 > 3 分 の1に 縮 小 表 示 * & XY 軸 方 向 に 繰 り 返 し 表 示 *マニュアルの 表 示 スペースの 都 合 上 説 明 図 が3 分 の1になっていませんが 実 際 の 画 面 表 示 は3 分 の1に 縮 小 されます 本 棚 背 景 デザインカスタマイズ 用 ファイルの 提 供 本 棚 背 景 色 やテクスチャを 気 軽 にカスタマイズするためのソースファイルをご 用 意 しています 本 棚 表 示 キットに 同 梱 されている bookshelf_background.fw.png をご 利 用 ください 編 集 には Adobe Fireworks が 必 要 です 本 棚 っぽい 立 体 感 を 出 すためのレイヤー 色 テクスチャを 敷 くためのレイヤー 39 / 48
3-6.CSS 構 成 について ~ 高 度 なカスタマイズのために~ 本 棚 表 示 キット 利 用 マニュアル CSS の 構 成 は 下 記 の 通 りです import.css 以 下 の CSS 読 み 込 み 用 html ファイルはこの CSS を 読 み 込 む normalize.css ブラウザスタイルのリセット 用 font.css アイコン Web フォント 指 定 用 (Glyphicons Halflings 利 用 ) shelf-theme.css 本 棚 デザインの 基 本 CSS x-small.css 319px 以 下 の 表 示 調 整 用 iframe での 細 いエリアへの 表 示 などに medium.css 670px 以 上 の 表 示 調 整 用 タブレット PC 表 示 用 レスポンシブ ブレークポイントについて 表 示 幅 に 合 わせて 表 示 を 調 整 するレスポンシブな 作 りとなっています 幅 320~669px までをスマートフォン 向 け 670px 以 上 をタブレット PC 向 けのスタイルとしてい ます 319px 以 下 のサイズは iframe で 細 いエリアに 表 示 するためのスタイルとしています カスタマイズする 際 には デザインをカスタマイズする 際 は 別 途 customize.css などを 作 成 してスタイルを 上 書 きしてくださ い 各 CSS ファイルを 直 接 変 更 してもかまいません お 客 さまのメイン 閲 覧 対 象 デバイスに 応 じてブレークポイントを 変 更 してもかまいません ブレークポ イントは import.css shelf-theme.css x-small.css medium.css の4ファイル 内 で 指 定 してあり ます 注 意 事 項 font.css の2~6 行 目 はフォント 利 用 のためのライセンス 表 記 なので 削 除 しないでください デザインを 自 由 にカスタマイズするためには CSS の 知 識 が 必 要 です 40 / 48
第 4 章 マルチユースでの 活 用 方 法 41 / 48
4-1. 作 成 した 本 棚 ファイルの 公 開 方 法 本 棚 表 示 キット 利 用 マニュアル 本 棚 表 示 キットを 利 用 して 作 成 したデジタル 本 棚 は Web サイトなどに 載 せて 利 用 するオンライン 利 用 CD や DVD に 焼 いて 配 布 するオフライン 利 用 の 両 方 に 対 応 しています 1. オンラインで 利 用 する オンラインで 利 用 するためには FTP ソフトなどでサーバーにアップロードしてください 表 示 には 以 下 の2 種 類 の 方 法 があります 1. サーバーにアップロードしてそのまま 公 開 する(デジタル 本 棚 をそのまま 表 示 する) 2. アップロードしたデジタル 本 棚 を 既 存 の Web サイトに 埋 め 込 んで 表 示 する( 項 目 4-2 で 解 説 ) オンライン 公 開 したデジタル 本 棚 はパソコン スマートフォン タブレット 等 のマルチデバイスで 閲 覧 できます 2. オフラインで 利 用 する オフラインで 利 用 するためには 以 下 の2 種 類 の 方 法 があります 1. パソコン 閲 覧 用 の CD DVD を 作 成 して 配 布 する( 項 目 4-3 で 解 説 ) 2. スマートフォン タブレット 用 のアプリを 作 成 して 配 布 する( 将 来 対 応 予 定 ) パソコン 閲 覧 用 CD DVD の 作 成 にはオフライン 閲 覧 キット( 別 売 り)が 必 要 です 42 / 48
4-2.Web ページへの 埋 め 込 み 方 法 作 成 した 本 棚 ファイルは 既 存 の Web サイトやブログ 記 事 に 埋 め 込 んで 利 用 できます 埋 め 込 み 方 法 1. 作 成 した 本 棚 ファイル 一 式 をサーバーへアップロードする 2. Web サイトやブログ 記 事 の 埋 め 込 みたい 部 分 に iframe タグを 追 加 する 例 : アップロード 先 が http://www.xxxxx/bookshelf01/ の 場 合 埋 め 込 みタグは 以 下 のようになります <iframe src="http://www.xxxxx/bookshelf01/" style="width:550px; height:400px;"></iframe> コンテンツの 表 示 サイズは width と height で 指 定 してください スクロールバーが 出 ないサイズを 指 定 すると サイト 内 での 一 体 感 が 高 まります ios のブラウザでは 表 示 サイズの 高 さ 指 定 がききません 本 棚 の 中 身 をすべて 表 示 するサイズで 表 示 されます 43 / 48
4-3.パソコン 閲 覧 用 CD DVD の 作 り 方 本 棚 表 示 キット 利 用 マニュアル 作 成 した 本 棚 ファイルは CD や DVD に 焼 いてオフライン 閲 覧 に 利 用 できます パソコン 閲 覧 用 CD DVD の 作 成 にはオフライン 閲 覧 キット( 別 売 り)が 必 要 です オフライン 閲 覧 キットの 仕 組 みや 使 い 方 についての 詳 細 は オフライン 閲 覧 キットのマニュアルを ご 覧 ください CD DVD 作 成 方 法 1. 作 成 した 本 棚 ファイル 一 式 をオフライン 閲 覧 キットの 中 に 格 納 する 2. 1を CD や DVD に 焼 く 入 れる 焼 く 作 成 した 本 棚 ファイル 一 式 オフライン 閲 覧 キット CD DVD オフライン 閲 覧 キットへの 格 納 方 法 オフライン 閲 覧 キットの contents フォルダの 中 に 作 成 した 本 棚 ファイルをすべて 入 れてください < 作 成 した 本 棚 ファイル 一 式 > <オフライン 閲 覧 キット> 44 / 48
4-4.モバイルアプリの 作 り 方 ( 将 来 記 述 予 定 ) 作 成 した 本 棚 ファイルをモバイルアプリ 作 成 に 利 用 するための 方 法 は 将 来 記 述 する 予 定 です 45 / 48
お 問 い 合 わせ 更 新 履 歴 46 / 48
お 問 い 合 わせ 窓 口 製 品 に 関 してご 不 明 な 点 などございましたら お 気 軽 にお 問 い 合 わせください 製 品 名 : URL: E-mail: 本 棚 表 示 キット http://suite.logosware.com/flipper-maker/developer/bookshelf-kit/ support@logosware.com TEL: 03-5818-8011 受 付 時 間 : 10:00~18:00 ( 土 日 祝 祭 日 は 除 く) ロゴスウェア 株 式 会 社 http://www.logosware.com 東 京 オフィス 110-0016 東 京 都 台 東 区 台 東 4-13-21 TOWA SKY BLDG3F 47 / 48
更 新 履 歴 版 数 第 1 版 第 2 版 更 新 日 / 変 更 内 容 2014 年 12 月 12 日 新 規 2014 年 5 月 26 日 動 作 環 境 Internet Explorer のバージョンを 変 更 注 意 事 項 追 加 48 / 48