From e0d3a25bc766992a686f19d0de4973f615238276 Mon Sep 17 00:00:00 2001 From: hororo Date: Sun, 30 Sep 2018 12:55:54 +0900 Subject: [PATCH] =?UTF-8?q?v3.04=20=E7=B8=A6=E6=9B=B8=E3=81=8D=E5=AF=BE?= =?UTF-8?q?=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- image/tip_mark_vertical.png | Bin 0 -> 3929 bytes init.ks | 5 +- readme.txt | 7 +- tip.css | 207 +++++++++++++++++++++++++++++++++--- tip.js | 4 +- 5 files changed, 205 insertions(+), 18 deletions(-) create mode 100644 image/tip_mark_vertical.png diff --git a/image/tip_mark_vertical.png b/image/tip_mark_vertical.png new file mode 100644 index 0000000000000000000000000000000000000000..60a489425b16fe35514f63c19d61ee774892a44c GIT binary patch literal 3929 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 literal 0 HcmV?d00001 diff --git a/init.ks b/init.ks index 412dbff..d094f1b 100644 --- a/init.ks +++ b/init.ks @@ -1,4 +1,4 @@ -;【TIPプラグイン ver.3.03】2018/8/22 +;【TIPプラグイン ver.3.04】2018/9/30 ; by hororo http://hororo.wp.xdomain.jp/22/ ; [iscript] @@ -14,7 +14,7 @@ TG.kag.tmp.tip = { "log_se" : mp.log_se || "false", //バックログのTIP に SE を入れるか "log_plugin" : mp.log_plugin || "false", //バックログプラグインと併用するか "pagefeed" : mp.pagefeed || "true", //TIPリストをページ分けするか - "pagenum" : mp.pagenum || "auto", //リスト1ページあたりの件数 + "pagenum" : mp.pagenum || "auto", //リスト1ページあたりの表示数 "auto"で自動 "tip_clickse" : mp.tip_clickse || "none", //TIPのクリック音 "tip_enterse" : mp.tip_enterse || "none", //TIPにマウスカーソルが乗った時 "tip_leavese" : mp.tip_leavese || "none", //TIPからマウスカーソルが外れた時 @@ -27,6 +27,7 @@ TG.kag.tmp.tip = { "navi_clickse" : mp.navi_clickse || "none", //ナビのクリック音 "navi_enterse" : mp.navi_enterse || "none", //ナビにマウスカーソルが乗った時 "navi_leavese" : mp.navi_leavese || "none", //ナビからマウスカーソルが外れた時 + "vertical" : mp.vertical || TG.config.vertical, //縦書き表示にするか "data" : [] //data定義 }; diff --git a/readme.txt b/readme.txt index 3bb1ccb..2c4d374 100644 --- a/readme.txt +++ b/readme.txt @@ -1,7 +1,7 @@ -【TIPプラグイン ver.3.03a】 +【TIPプラグイン ver.3.04】 http://hororo.wp.xdomain.jp/22/ -2018/9/24更新 v470対応版 +2018/9/30更新 v470対応版 ------------------------------------------------------------------------------------------------- ■ 概要 @@ -25,6 +25,7 @@ http://hororo.wp.xdomain.jp/22/ 　・バックログからもTIP表示するかを指定できます。※3.00以降 　・バックログにTIPで指定した。カラー・マーク・SEを反映するか指定できます。※3.00以降 　・TIP詳細・TIP一覧はhtmlファイルで編集可能です。 +　・縦書き対応。※3.04以降 ------------------------------------------------------------------------------------------------- ■ 使い方 @@ -71,6 +72,7 @@ http://hororo.wp.xdomain.jp/22/ navi_clickse oggファイル none ナビのクリック音 navi_enterse oggファイル none ナビにマウスカーソルが乗った時の音 navi_leavese oggファイル none ナビからマウスカーソルが外れた時の音 + vertical true/false config.vertical 縦書きにするか 　◆ [tip] 用パラメーター @@ -182,6 +184,7 @@ http://hororo.wp.xdomain.jp/22/ ------------------------------------------------------------------------------------------------- ■ 更新履歴 ------------------------------------------------------------------------------------------------- +　2018/09/30 ver3.04 縦書き対応。 　2018/09/24 ver3.03a 解像度変更に自動対応するようCSSを修正。 　2018/08/22 ver3.03 テンプレート読み込みをGETへ修正。 　2018/03/24 ver3.02 セーブ・ロード画面からTIP詳細が開く不具合修正。バックログプラグインと併用時の挙動修正。 diff --git a/tip.css b/tip.css index e15b1a5..65bf71f 100644 --- a/tip.css +++ b/tip.css @@ -1,9 +1,11 @@ -/* 【TIPプラグイン ver.3.03a】2018/9/24 */ +/* 【TIPプラグイン ver.3.04】2018/9/30 */ /* by hororo http://hororo.wp.xdomain.jp/22/ */ * { box-sizing: border-box; } + + /******************************************* TIPテキスト ********************************************/ @@ -17,18 +19,32 @@ /* マーク */ .tip.mark { - margin-right:15px; + position: relative; + margin-right: 15px; } -.tip.mark:before { +.tip.mark:after { content:""; - position:absolute; + position: absolute; right:-15px; top:-5px; width:14px; height:14px; + display: inline-block; background:url(image/tip_mark.png); background-size:14px; } +/* 縦書き */ +.vertical_text .tip.mark { + margin-right: 0; +} +.vertical_text .tip.mark:after { + position: relative; + top: 1px; + right: -12px; + margin-bottom: 3px; + background:url(image/tip_mark_vertical.png); + background-size:14px; +} @@ -55,6 +71,7 @@ border-radius: 10px; box-shadow:0 0 0 1px rgba(255, 255, 255, .3); } + /* Tip ID */ .tip_id{ font-size:75%; @@ -132,10 +149,13 @@ background-image: url(../../../image/title/hoge.png); */ } +/* 縦画面用 */ @media (max-width: 768px) and (orientation:portrait) { .tips_item {width: 96%;} } -.tips_item:before { /* リストの背景2 黄色い部分 ※画像使う場合は不要 */ + +/* リストの背景2 黄色い部分 ※画像使う場合は不要 */ +.tips_item:before { content: ""; position: absolute; background-color:#fff001; @@ -147,7 +167,9 @@ top:-2px; left:3px; } -.tips_item p { /* リストの背景3 ストライプ ※画像使う場合は不要 */ + +/* リストの背景3 ストライプ ※画像使う場合は不要 */ +.tips_item p { position: absolute; width:100%; height:44px; @@ -178,7 +200,7 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( .tip_list_none{ } -/* ナビ */ +/* ページナビ全体 */ .tips_nav { position: absolute; top: 90px; @@ -186,6 +208,7 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( width:100%; text-align:center; } +/* 縦画面用 */ @media (max-width: 768px) and (orientation:portrait) { .tips_nav { top: 100px; @@ -193,10 +216,12 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( text-align:left; } } +/* ページナビボタン */ .tips_nav li { display: inline-block; margin-right: 5px; } +/* ページナビボタン クリック部分 */ .tips_nav a { display: inline-block; width:45px; @@ -246,6 +271,7 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( border-radius:50%; border:3px solid #fff; box-shadow: 0 0 8px #000; + z-index: 1; } /* 全体 */ @@ -273,6 +299,16 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( border:1px solid #fff; border-radius: 6px; box-sizing:border-box; + position: relative; +} +/* 縦画面用 */ +@media (max-width: 768px) and (orientation:portrait) { + #tip_container { + width: 90%; + } + .tip_close_button { + right:1%; + } } /* li */ @@ -280,7 +316,8 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( position:relative; height: 100%; } -.tip_area:before { /* 見出しの背景1 グラデーション */ +/* 見出しの背景1 グラデーション */ +.tip_area:before { content: ""; position: absolute; width:100%; @@ -290,6 +327,8 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( border-radius:6px; background: linear-gradient(to bottom, #02afea, #0077c1); } + +/* 詳細表示部分 */ .tip_item { position: absolute; width:100%; @@ -297,7 +336,8 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( top:0px; left:0px; } -.tip_item:before {/* 見出しの背景2 ストライプ */ +/* 見出しの背景2 ストライプ */ +.tip_item:before { content: ""; position: absolute; width:100%; @@ -331,6 +371,7 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( overflow:auto; height: 80%; } +/* 縦画面用 */ @media (max-width: 768px) and (orientation:portrait) { .tip_body { margin:5% 0; @@ -339,17 +380,22 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( height: 85%; } } -/* ナビ */ + +/* ページナビ全体 */ .tip_nav { position: absolute; bottom: 0; left: 0; font-size:18px; } + +/* ページナビボタン */ .tip_nav li { display: inline-block; margin-right: 5px; } + +/* ページナビクリック部分 */ .tip_nav a { color:#0077c1; display: inline-block; @@ -378,8 +424,138 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( } +/***************************************************** + 縦書き +******************************************************/ +/* リスト */ +.vertical .tip_list_area { + height:100%; + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; + margin: 0 auto; +} +.vertical .tips_item { + width: 45px; + height:95%; + margin: 2% 13px; + background: linear-gradient(to left, #02afea, #0077c1); /* 画像を使う場合は background-image で画像指定 */ +} +/* 縦画面用 */ +@media (max-width: 768px) and (orientation:portrait) { + .vertical .tips_item {height: 46%;} +} +/* リストの背景2 黄色い部分 ※画像使う場合は不要 */ +.vertical .tips_item:before { + transform:rotate(-2deg); + height:101%; + width:50px; + top:3px; + left:-2px; +} + +/* リストの背景3 ストライプ部分 ※画像使う場合は不要 */ +.vertical .tips_item p { + width:44px; + height:100%; + padding: 15px 8px; +} +.vertical .tip_id { + height: 3.7em; +} +/* 影方向調整 */ +.vertical .tips_body .tip_list:hover { + text-shadow: -2px 2px 0px rgba(0,0,0,0.7); +} + + +/* 詳細 */ +.vertical .tip_area { + writing-mode: vertical-rl; + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; + position: relative; + height: 100%; + width: 100%; +} +/* 見出しの背景1 グラデーション部分 ※画像を使う場合は不要 */ +.vertical .tip_area:before { + width:44px; + height:100%; + right:0; + left:auto; + background: linear-gradient(right left, #02afea, #0077c1); +} + +.vertical .tip_item { + left:auto; + right:0; +} +/* 見出しの背景2 ストライプ部分 ※画像を使う場合は不要 */ +.vertical .tip_item:before { + width:44px; + height:100%; + left:auto; + right: 0; +} + +/* 見出し */ +.vertical .tip_head { + padding: 15px 7px; + height:100%; + width: 44px; + /* 画像を使う場合は background-image で画像指定 */ +} +.vertical .tip_head .tip_id { +} +.vertical .tip_head .tip_title { + text-shadow: -2px 2px 0px rgba(0,0,0,0.7); /* 影方向調整 */ +} + +/* 本文 */ +.vertical .tip_body { + margin: 0 2%; + padding: 10px 0; + height: 100%; + width: 85%; +} +/* 縦画面用 */ +@media (max-width: 768px) and (orientation:portrait) { + .vertical .tip_body { + padding:10px 0; + width: 80%; + } +} + +/* ナビ */ +.vertical .tip_nav { + bottom: 0; + left: 0; +} +.vertical .tip_nav li { + margin-right: auto; + margin-bottom: 5px; +} +.vertical .tip_nav a { + width:40px; + height:36px; + line-height:36px; + padding-top: 9px; + -webkit-text-combine: horizontal; + -ms-text-combine-horizontal: all; + text-combine-upright: all; +} + + +/* 縦中横 */ +.vertical .tcy { + -webkit-text-combine: horizontal; + -ms-text-combine-horizontal: all; + text-combine-upright: all; +} + -/* サンプルシナリオ用 */ +/* サンプルシナリオ用 ※不要になったら削除してください */ .tiplist_button { left: auto !important; top: auto !important; @@ -393,17 +569,22 @@ rgba(255,255,255,0) 25%, rgba(0,120,190,0.7) 25%, rgba(0,120,190,0.7) 50%, rgba( } .tipsumple .message_inner { top: auto !important; - bottom: 140px !important; + bottom: 40px !important; width: 90% !important; + height: 190px !important; } .tipsumple .chara_name_area { top: auto !important; bottom: 180px !important; } +/* サンプルシナリオ用ここまで */ + + + /***************************************************** 以下削除・変更禁止 - ※メッセージ上でクリックさせたくない場合は以下を削除 + ※メッセージ上でクリックさせたくない場合のみ削除 ******************************************************/ .message_inner { z-index:auto !important diff --git a/tip.js b/tip.js index 7923958..7809bc9 100644 --- a/tip.js +++ b/tip.js @@ -1,4 +1,4 @@ -/* 【TIPプラグイン ver.3.03】2018/8/22 */ +/* 【TIPプラグイン ver.3.04】2018/9/30 */ /* by hororo http://hororo.wp.xdomain.jp/22/ */ @@ -62,6 +62,7 @@ tyrano.plugin.kag.menu.displayTiplist = function() { layer_menu.html($(data)); $("#tip_list_wrap").css("font-family", that.kag.config.userFace);//デフォルトフォント指定 $("#tip_list_container").html($("#tiplist_tmp").render(tipdata)); //テンプレート指定 + if(that.kag.tmp.tip.vertical=="true") $("#tip_list_wrap").addClass("vertical"); //縦書き //クリック var click_on = false; @@ -184,6 +185,7 @@ tyrano.plugin.kag.menu.displayTip = function(key) { $("#tip_wrap").html($(data)); $("#tip_container").css("font-family", that.kag.config.userFace); $("#tip_container").html($("#tip_tmp").render(tip)); + if(that.kag.tmp.tip.vertical=="true") $("#tip_wrap").addClass("vertical"); //縦書き //閉じるボタン var click_on = false;