item.htmlのリニューアル（2021/01/15）

※2021/01/15以降のindex.phpと、.sqliteファイルの更新も必要です。

旧ファイルからの更新内容

以下の解説でよく分からない場合は、最新のCMS専用テンプレートをDLして比較してみて下さい。

1. head内にパノラマ動作用のスクリプトの読み込みタグを２行追加。
   
   ↓以下をコピペして使って下さい。
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"> <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
2. PDFから音声ブロックまでの出力タグを入れ替え。
   
   ↓以下をコピペして使って下さい。
   <!--{def item/pdf}--> <tr> <th>PDF資料</th> <td> <a href="?act=get_file&id={val item/pdf}">{val item/pdf_file/title}</a><br></td> </tr> <!--{/def}--> <!--{def image}--> <!--{each image}--> <tr> <th>{val image/file/title}</th> <td> <img src="user_data/{val image/file_file/save_name}" alt="{val image/file_file/title}"> </td> </tr> <!--{/each}--> <!--{/def}--> <!--{def audio}--> <!--{each audio}--> <tr> <th>{val audio/file/title}</th> <td> <audio controls="" src="user_data/{val audio/file_file/save_name}">{val audio/file_file/title}</audio> </td> </tr> <!--{/each}--> <!--{/def}--> <!--{def video}--> <!--{each video}--> <tr> <th>{val video/file/title}</th> <td> <video controls="" src="user_data/{val video/file_file/save_name}">{val video/file_file/title}</video> </td> </tr> <!--{/each}--> <!--{/def}--> <!--{def panorama}--> <!--{each panorama}--> <tr> <th>{val panorama/file/title}</th> <td> <div class="ofx"> <div id="panorama{val panorama/no}" class="panorama-img"></div> <script> pannellum.viewer('panorama{val panorama/no}' , { "type": "equirectangular", "panorama": "user_data/{val panorama/file_file/save_name}", "autoLoad": true }); </script> </td> </tr> <!--{/each}--> <!--{/def}--> <!--{def other}--> <!--{each other}--> <tr> <th>{val other/file/title}</th> <td> <a href="?act=get_file&id={val other/file/value}">{val other/file_file/title}</a> </td> </tr> <!--{/each}--> <!--{/def}-->
3. style.cssの編集をします。
   「全端末（PC・タブレット・スマホ）共通設定」のブロック内に以下の２行を追加。
   .ofx {overflow-x: hidden;}
   .panorama-img {max-width: 600px !important;height: 400px !important;}
   
   さらに、下の方の「画面幅800px以下の設定」のブロック内に以下の１行を追加して下さい。
   もし800pxがない場合は、それに近い数値のブロックに追加します。
   .panorama-img {max-width: 450px !important;height: 300px !important;}
4. 以上です。