動画ページSP版テストアップ

a5809829 · o.kimura · 25d55dc3 · a5809829 · a5809829
Commit a5809829 authored Apr 12, 2022 by o.kimura
Showing with 114 additions and 94 deletions
sp/clean/public/index.html → sp/clean/public/index.php
sp/shared/css/common.css
--- a/sp/clean/public/index.html
+++ b/sp/clean/public/index.html
@@ -28,33 +28,8 @@
 </script>
 <!-- End Google Tag Manager -->
- <script type="text/javascript" src="/shared/js/commonparts.js"></script>
+  <!--original -->
- <script type="text/javascript" src="/shared/js/jquery.js"></script>
+<link rel="stylesheet" href="/sp/shared/css/common.css?v=20220412" type="text/css" media="all">
- <script type="text/javascript" src="/shared/js/common.js"></script>
- <link rel="stylesheet" href="/shared/css/reset.css" type="text/css" media="all">
- <link rel="stylesheet" href="/shared/css/common.css" type="text/css" media="all">
- <link rel="stylesheet" href="/shared/css/parts.css?v=220127" type="text/css" media="all">
- <!--original -->
- <link rel="stylesheet" href="/clean/css/parts.css?v=220127" type="text/css" media="all">
- <!--original -->
- <script type="text/javascript">
-  //<![CDATA[
-  (function($) {
-   $(function() {
-    $(".pngfix").fixPng();
-    $("input[type='button']").click(function() {
-     $(".pngfix, #normal").animate({
-      opacity: "toggle"
-     });
-    });
-   });
-  })(jQuery);
-  //]]>
- </script>
- <!--[if lt IE 7]>
-<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
-<![endif]-->
 </head>
@@ -63,22 +38,7 @@
 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4F24ZD" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->
 <div id="container">
-  <div id="head_area">
+  <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/sp/shared/inc/header.php'; ?>
-   <h1><a href="/"><img src="/shared/images/head/site_logo.png" width="478" height="60" alt="トイレナビ" /></a></h1>
-   <!-- head gmenu -->
-   <script type="text/javascript">
-    <!--
-    includeHead();
-    includeGmenu();
-    //
-    -->
-   </script>
-   <noscript>
-    <p>当サイトはJavaScriptをonにしてご覧ください。</p>
-   </noscript>
-   <!-- /head gmenu -->
-  </div>
  <div id="contents_area">
   <div id="pan" class="pan">
    <ul>
@@ -93,14 +53,14 @@
     <h2 class="pngfix"><span class="pngfix"><img src="/shared/images/title_clean.png" width="140" height="17" alt="トイレのお手入れ" class="pngfix" /></span></h2>
     <h3 class="pngfix"><span class="pngfix"><img src="/shared/images/content/title_text/content_title_clean01.png" width="222" height="24" alt="トイレのお掃除方法" class="pngfix" /></span></h3>
     <div id="section_read02">
-      <p>トイレを美しく保ち、長持ちさせるために毎日のお手入れが大事です。<br />
+      <p>トイレを美しく保ち、長持ちさせるために毎日のお手入れが大事です。<br>
-       トイレ掃除の際は、トイレ内を十分換気するようにしましょう。<br />
+       トイレ掃除の際は、トイレ内を十分換気するようにしましょう。<br>
-       「お掃除をらくにする」新技術は、下記のページでご覧いただけます。
+       「お掃除をらくにする」新技術は、下記のページでご覧いただけます。<br>
-       <span class="link_type_a"><a href="/clean/technology.html">お掃除らくらく新技術（「お掃除をらくにする」新技術の一例をご紹介しています）</a></span>
+       <span class="link_type_a"><a href="/clean/technology.html">⇒お掃除らくらく新技術（「お掃除をらくにする」新技術の一例をご紹介しています）</a></span>
      </p>
     </div>
-     <div class="section_menu">
+     <!--<div class="section_menu">
      <p class="index"><img src="/shared/images/common/icon_inex_blue.png" class="pngfix" alt="" width="86" height="32" /></p>
      <ul class="clearfix">
       <li class="menuTitle01"><a href="/clean/" class="ttl">大便器・温水洗浄便座のお掃除方法（住宅向け）</a></li>
@@ -113,16 +73,17 @@
       <li><a href="#section_b" class="pageLink">日常清掃 清掃手順とポイント動画</a></li>
       <li><a href="#section_c" class="pageLink">定期清掃 清掃手順とポイント動画</a></li>
      </ul>
-     </div>
+     </div>-->
     <!--パブリック -->
     <div class="section">
-      <h3 class="pt">大便器・温水洗浄便座のお掃除方法（パブリック施設向け）</h3>
+      <h3 class="pt">大便器・温水洗浄便座のお掃除方法</h3>
+      <h3 class="txtright">（パブリック施設向け）</h3>
      <div class="content clearfix">
       <p class="normal">不特定多数の方が利用される公共建築物のトイレにも温水洗浄便座の設置が増えてきています。</p>
       <p class="normal">一般社団法人 日本レストルーム工業会では、公益社団法人全国ビルメンテナンス協会と共同で、ビルメンテナンスに携わっておられる方向けに公共建築物のトイレに設置されている大便器・温水洗浄便座を対象とした清掃マニュアルを作成いたしました。</p>
       <p class="normal">マニュアルは公益社団法人全国ビルメンテナンス協会のホームページからダウンロードできます。また、こちらでは動画による清掃方法もご覧いただけます。</p>
-       <p class="normal">→<a href="https://www.j-bma.or.jp/publications/manual#jseia1" target="_blank">全国ビルメンテナンス協会「大便器・温水洗浄便座清掃マニュアル」ページへのリンク</a></p>
+       <p class="normal"><a href="https://www.j-bma.or.jp/publications/manual#jseia1" target="_blank">⇒全国ビルメンテナンス協会「大便器・温水洗浄便座清掃マニュアル」ページへのリンク</a></p>
       <p class="normal">※こちらのマニュアルは清掃事業者様向けのため、ご家庭でのお掃除ではお薦めしていない内容が含まれています。ご家庭でのお掃除については「大便器・温水洗浄便座のお掃除方法（住宅向け）」の内容をご覧ください。</p>
      </div>
     </div>
@@ -138,11 +99,11 @@
       <p class="normal">・はじめに、指示に従って防護具を着用ください。</p>
       <p class="normal">・洗剤拭き用、洗剤拭き後の仕上げ水拭き用、水拭き用、ノズル水拭き用に色分けされた４枚の<br class="pc-only">　マイクロファイバークロスを使い分けて清掃する。</p>
       <p class="txt_c"><img src="/clean/public/images/02.jpg" alt="" width="300" height="auto" /></p>
-       <p class="normal"><br><br>・洗剤拭き、水拭き等各々その作業においては原則として「きれいな箇所」から「汚れた箇所」へと<br class="pc-only">　一方向拭きで清掃する。</p>
+       <p class="normal">・洗剤拭き、水拭き等各々その作業においては原則として「きれいな箇所」から「汚れた箇所」へと<br class="pc-only">　一方向拭きで清掃する。</p>
       <p class="normal">・マイクロファイバークロスの拭き取り面が汚れたら、拭き取り箇所が変わるタイミングで<br class="pc-only">　新たな面に替えて作業する。</p>
       <p class="txt_c"><img src="/clean/public/images/03.jpg" alt="" width="480" height="auto" /></p>
      </div>
-      <p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>
+      <!--p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>-->
     </div>
@@ -159,10 +120,10 @@
       <div class="">
        <p class="normal"><b>① ノズル清掃</b></p>
        <img src="/clean/public/images/04.jpg" alt="" width="250" height="auto" />
-        <p class="txt_r mt10"><a href="/clean/#section_c" target="_blank">＜参考＞ノズルの出し・戻し方法へ</a></p>
+        <p class="txt_r mt10"><a href="/clean/#section_c" target="_blank">⇒＜参考＞ノズルの出し・戻し方法へ</a></p>
       </div>
       <div class="">
-        <p>ノズルを出し、ノズルに手を添えて「ノズル水拭き用マイクロファイバークロス（緑）」でノズル全体を清拭する。その後、ノズルを戻す。</p>
+        <p class="normal">ノズルを出し、ノズルに手を添えて「ノズル水拭き用マイクロファイバークロス（緑）」でノズル全体を清拭する。その後、ノズルを戻す。</p>
        <p class="notice">便器ボウル部の清掃用ブラシでノズルを清掃しない。</p>
        <div class="video-wrapper">
         <video controls src="/clean/public/mov/nozzle.mp4" preload="auto" class="movie-player-image" id="movie-preview" height="100%" width="100%" muted="" playsinline="" poster="/clean/public/mov/nozzle.png"></video>
@@ -192,8 +153,8 @@
      </div>
      <div class="flex_wrapper mb40">
-       <p><img src="/clean/public/images/010.jpg" alt="" width="200" height="auto" class="mr10" /></p>
+       <p><img src="/clean/public/images/010.jpg" alt="" width="200" height="auto"  /></p>
-       <p><img src="/clean/public/images/008.jpg" alt="" width="230" height="auto" class="mr10" /></p>
+       <p><img src="/clean/public/images/008.jpg" alt="" width="230" height="auto" /></p>
       <p><img src="/clean/public/images/009_02.jpg" alt="" width="230" height="auto" /></p>
      </div>
@@ -201,7 +162,7 @@
       <div class="">
        <p class="normal"><b>③ 便座の裏面,ケース下部,便器リム・側面の清掃</b></p>
        <img src="/clean/public/images/06.jpg" alt="" class="mb30" width="300" height="auto" />
-        <img src="/clean/public/images/07.jpg" alt="" width="300" height="auto" />
+        <img src="/clean/public/images/07.jpg" alt="" width="300" height="auto" class="mb20" />
       </div>
       <div class="">
        <p class="normal mb20">上げた便座の裏面、便座本体ケース下部、便器リム部、便器側面を適度な濃度に水で希釈された中性洗剤を含ませかたく絞った「洗剤拭き用マイクロファイバークロス(赤)」で清拭する。</p>
@@ -215,7 +176,7 @@
      <div class="flex_wrapper mb20">
       <div>
        <p class="normal mb20"><b>④ 便座表面,ケース上部,操作部などの清掃</b></p>
-        <img src="/clean/public/images/08.jpg" alt="" width="300" height="auto" />
+        <img src="/clean/public/images/08.jpg" alt="" width="300" height="auto" class="mb20" />
       </div>
       <div class="">
        <p class="normal">手袋交換または非着用（素手）にて以下の順番にかたく絞った「水拭き用マイクロファイバークロス（白）」で水拭きする。<br>
@@ -229,7 +190,7 @@
        </div>
       </div>
      </div>
-      <p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>
+      <!--<p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>-->
     </div>
     <div class="section" id="section_c">
@@ -244,7 +205,7 @@
      <div class="flex_wrapper mb20">
       <div>
        <p class="normal mb20"><b>① 電源プラグを抜く</b></p>
-        <img src="/clean/public/images/09.png" alt="" width="150" height="auto" class="ml30" />
+        <img src="/clean/public/images/09.png" alt="" width="150" height="auto" class="" />
       </div>
       <div class="mt30">
        <p class="normal">運転ランプの点灯を確認し電源プラグを抜く。</p>
@@ -256,7 +217,8 @@
       <div>
        <p class="normal mb20"><b>② 温水洗浄便座を取り外す</b></p>
        <img src="/clean/public/images/10.jpg" alt="" width="300" height="auto" />
-        <p class="txt_r mt10"><a href="/clean/#section_d" target="_blank">＜参考＞便座の取り外し方・便座のリフトアップへ</a></p>
+        <p class="txt_r mt10"><a href="/clean/#section_d" target="_blank">⇒ 
+        &lt;参考&gt;便座の取り外し方・便座のリフトアップへ</a></p>
       </div>
       <div class="mt30">
        <p class="normal">温水洗浄便座を、所定の操作方法で便器から取り外す。</p>
@@ -268,11 +230,10 @@
       <div>
        <p class="normal mb20"><b>③ 便座本体底面,便座接続部の清掃</b></p>
        <img src="/clean/public/images/11_1.jpg" width="300" height="auto" alt="" class="mb30" />
-        <img src="/clean/public/images/11_2.jpg" width="300" height="auto" alt="" />
+        <img src="/clean/public/images/11_2.jpg" width="300" height="auto" alt="" class="mb30" />
       </div>
       <div class="">
-        <p class="normal mb20">便器上面の便座接続部を適度な濃度に水で希釈された中性洗剤を含ませかたく絞った「洗剤拭き用マイ
+        <p class="normal mb20">便器上面の便座接続部を適度な濃度に水で希釈された中性洗剤を含ませかたく絞った「洗剤拭き用マイクロファイバークロス（赤）」で清拭する。便座本体を立て、便座本体底面を清拭する。</p>
-         クロファイバークロス（赤）」で清拭する。便座本体を立て、便座本体底面を清拭する。</p>
        <div class="video-wrapper">
         <video controls src="/clean/public/mov/filter.mp4" preload="auto" class="movie-player-image" id="movie-preview" height="100%" width="100%" muted="" playsinline="" poster="/clean/public/mov/benza_filter.png"></video>
        </div>
@@ -317,16 +278,17 @@
      <div class="flex_wrapper mb20">
       <div>
        <p class="normal mb10"><b>⑦ 定期清掃のあとで日常清掃を行う場合</b></p>
-        <p class="txt_l ml20"><a href="/clean/public/#section_b" class="pageLink">日常清掃 清掃手順とポイント動画へ</a></p>
+        <p class="txt_l ml20"><a href="/clean/public/#section_b" class="pageLink">⇒日常清掃 清掃手順とポイント動画へ</a></p>
       </div>
       <div class=""></div>
      </div>
-      <p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>
+      <!--<p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>-->
     </div>
     <div class="section">
-      <h4 class="label"><span>ビルクリーニング科 実技訓練 DVD教材のご紹介</span></h4>
+      <h4 class="label">ビルクリーニング科 実技訓練</h4>
+      <h4 class="txtleft label">DVD教材のご紹介</h4>
      <div class="content clearfix">
       <p class="normal">ポイント動画は、「2 級ビルクリーニング科実技訓練」 DVD 教材を二次利用して編集したものです。<br>
        DVD 教材は、一般財団法人 建築物管理訓練センターから販売されています。トイレ清掃など必要な清掃手順を学べる動画があります。床やガラス面清掃などの実技動画もあり、ビルクリーニング技能検定受験準備や社内教育に活用できます。詳しくは、「申込ページへ」からご覧ください。</p>
@@ -337,49 +299,31 @@
        <img src="/clean/public/images/15.png" alt="" width="300" height="auto" />
       </div>
       <div>
-        <a href="https://bmtc-books.shop-pro.jp/" class="btn btn-primary mb30" target="_blank">申込ページへ</a>
+        <a href="https://bmtc-books.shop-pro.jp/" class="btn btn-primary mb30" target="_blank">⇒申込ページへ</a>
       </div>
      </div>
-      <p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>
+      <!--<p class="pagetop clear"><a href="#container" class="pageLink">ページ上部へ</a></p>-->
     </div>
    </div>
-    <!-- side toilet -->
-    <script type="text/javascript">
-     <!--
-     includeSideToilet();
-     //
-     -->
-    </script>
-    <noscript>
-     <p>当サイトはJavaScriptをonにしてご覧ください。</p>
-    </noscript>
-    <!-- /side toilet -->
   </div>
-   <div id="pan_b" class="pan">
+   <!--<div id="pan_b" class="pan">
    <ul>
     <li class="page_g"><a href="/">トイレナビHOME</a></li>
     <li class="page_g"><a href="/clean/">トイレのお手入れ</a></li>
     <li>トイレのお掃除方法</li>
    </ul>
-   </div>
+   </div>-->
  </div>
  <!--/content-->
  <!-- foot -->
-  <script type="text/javascript">
+  <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/sp/shared/inc/footer.php'; ?>
-   <!--
-   includeFoot();
-   //
-   -->
-  </script>
-  <noscript>
-   <p>当サイトはJavaScriptをonにしてご覧ください。</p>
-  </noscript>
  <!-- /foot -->
 </div>
+ <script type="text/javascript" src="/shared/js/jquery.js"></script>
+ <script type="text/javascript" src="/sp/shared/js/common.js"></script>
 </body>
 </html>
--- a/sp/shared/css/common.css
+++ b/sp/shared/css/common.css
@@ -2257,3 +2257,79 @@ table#table02 td.no {
 .main-MV img {
 width: 99%;
 }
+/* 20220412 add */
+h2.pngfix {
+ margin: 30px 0 10px 0;
+ background-color: #01b7cd;
+ padding: 10px;
+}
+h3{
+ font-size: 18px;
+}
+h3.pngfix {
+ margin: 20px 0 20px 0;
+}
+h3.txtright,
+h4.txtright {
+ text-align: right;
+}
+h3.txtleft,
+h4.txtleft {
+ text-align: left;
+}
+#main_contents {
+ padding: 0 12px;
+}
+div.section {
+ margin: 15px 0;
+}
+.section .pt:before {
+ content: "\e904";
+ display: inline;
+ margin-right: 6px;
+ padding: 0px 2px 1px 1px;
+ vertical-align: sub;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#7ddeeb), to(#08b9d0));
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ font-size: 22px;
+ font-family: 'icomoon' !important;
+}
+p.normal {
+ margin: 5px 0;
+}
+h4.label {
+ font-size: 16px;
+}
+.section h6,
+.section h5 {
+ font-size: 16px;
+}
+p img {
+ margin: 20px auto;
+}
+p.notice {
+ color: #fb0000;
+}
+.video-wrapper {
+ margin: 15px 0;
+}
+.max h5 {
+ color: #15c0f2;
+ font-weight: bold;
+ font-size: 16px;
+}