https://www.iizuka-library.jp/about/language.html

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4          <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="format-detection" content="telephone=no">
8
9    <link rel="icon" type="image/x-icon" href="/common/images/com/icon.ico">
10    <meta name="description" content="福岡県飯塚市立図書館のホームページです。飯塚市立図書館の所蔵検索、住所、電話番号、営業時間、地図などの情報を見ることができます。">
11    <meta name="keywords" content="飯塚市立図書館,福岡県飯塚市,飯塚市,図書館,飯塚図書館,ちくほ図書館,庄内図書館,穂波図書館,頴田図書館," />
12    <title>Forrign Language - 飯塚市立図書館</title>
13    <meta content="飯塚市立図書館のホームページ" type="description">
14    
15
16    <!-- CSS ここから-->
17    <link href="/common/css/iizuka_main.css" rel="stylesheet" title="styles1" media="all">
18    <link href="/common/css/iizuka_main_black.css" rel="alternate stylesheet" title="styles2" media="screen">
19    <link href="/common/css/iizuka_main_gray.css" rel="alternate stylesheet" title="styles3" media="screen">
20    <!-- CSS ここまで-->
21
22    <!-- JS群 ここから-->
23    

23<script type="text/javascript" src="/common/js/jquery-3.4.1.min.js"></script>

23
24    

24<script type="text/javascript" src="/common/js/common.js"></script>

24
25    

25<script type="text/javascript" src="/common/js/styleswitch.js"></script>

25
26    <!-- JS群 ここまで-->
27
28    <!-- Google tag (gtag.js) -->

28
29    <script async src="https://www.googletagmanager.com/gtag/js?id=

29G-TYQ4Y0XFQM

29"></script>
30    

30<script>
31      

31window.dataLayer = window.dataLayer || [];
32      function gtag(){dataLayer.push(arguments);}
33      gtag('js', new Date());
34
35      gtag('config', '

35G-TYQ4Y0XFQM

35');
36    

36</script>

36  </head>
37
38  
39  <body>
40    <noscript>
41      <p>このサイトはJavaScriptを使用しています。JavaScriptを無効にされている場合、正しく機能しない、もしく正しく表示されないことがございます。ブラウザ設定でJavaScriptを有効にしていただきますようお願いいたします。</p>
42    </noscript>
43    <div id="ie">
44      <p class="title">最新のブラウザをご使用ください</p>
45      <p>古いブラウザにてご利用いただいた際に、部分的に機能が制限されたり、また正常にページが表示されない場合がございます。</p>
46    </div>
47    
48    <div class="body_wrap bgc_gray" id="toTop">
49              <div class="header">
50        <div class="container">
51          <div class="headerMain">
52            <h1 class="logo">
53              <a href="/index.html"><img src="/common/images/com/logo.png" width="341" height="62" alt="飯塚市立図書館"></a>
54            </h1>
55            <!-- //.logo -->
56            <div class="link_area_header is-pc">
57              <ul class="btn_fontsize">
58                <li class="text">文字の大きさ</li>
59                <li class="btn" id="normal">標準</li>
60                <li class="btn" id="enlarge">拡大</li>
61              </ul>
62              <!-- //.btn_fontsize -->
63              <ul class="btn_backcolor">
64                <li class="text">背景色</li>
65                <li class="bg1"><a href="?style=styles2" rel="styles2" class="styleswitch" id ="styles2">Ａ</a></li>
66                <li class="bg2"><a href="?style=styles1" rel="styles1" class="styleswitch" id ="styles1">Ａ</a></li>
67                <li class="bg3"><a href="?style=styles3" rel="styles3" class="styleswitch" id ="styles3">Ａ</a></li>
68              </ul>
69              <!-- //.btn_fontsize -->
70              <p class="btn_foreign"><a href="/about/language.html">Foreign Language</a></p>
71            </div>
72            <!-- //.linkAreaHeader -->
73          </div>
74          <!-- //.headerMain -->
75
76<!-- PC版グローバルメニュー -->
77          <nav class="nav">
78<!--            <ul class="navList" id="navList">
79-->
80            <ul class="globalMenu is-pc">
81              <li class="menu01"><a href="/riyou/index.html">ご利用案内</a></li>
82              <li class="menu02"><a href="/search/index.html">資料検索</a></li>
83              <li class="menu03"><a href="/calendar/index.html">行事カレンダー</a></li>
84              <li class="menu04"><a href="/kids/index.html">こどものページ</a></li>
85              <li class="menu05"><a href="/about/index.html">図書館案内</a></li>
86              <li class="menu06"><a href="/access/index.html">アクセス</a></li>
87            </ul>
88          </nav>
89          <!-- //.nav -->
90<!-- //PC版グローバルメニュー -->
91<!-- スマホ版グローバルメニュー -->
92
93
94            <div class="navBox is-sp">
95              <ul class="navList" id="navList">
96                <li><a class="navItem" href="/riyou/index.html">ご利用案内 </a></li>
97                <li><a class="navItem" href="/search/index.html">資料検索</a></li>
98                <li><a class="navItem" href="/calendar/index.html">行事カレンダー</a></li>
99                <li><a class="navItem" href="/kids/index.html">こどものページ</a></li>
100                <li><a class="navItem" href="/about/index.html">図書館案内</a></li>
101                <li><a class="navItem" href="/access/index.html">アクセス</a></li>
102              </ul>
103              
104              <div class="ud-sp mt_M"> 
105                <dl class="btn_fontsize-sp"> 
106                 <dt class="text">
107                  文字の大きさ
108                 </dt> 
109                 <dd class="btn" id="normal">
110                  標準
111                 </dd> 
112                 <dd class="btn" id="enlarge">
113                  拡大
114                 </dd> 
115                </dl> 
116                <dl class="btn_backcolor-sp mt_M"> 
117                 <dt class="text">
118                  背景色
119                 </dt> 
120                 <dd class="btn" id="bg1">
121                  <a href="?style=styles2" rel="styles2" class="styleswitch" id="styles2">黒</a>
122                 </dd> 
123                 <dd class="btn" id="bg2">
124                  <a href="?style=styles1" rel="styles1" class="styleswitch" id="styles1">白</a>
125                 </dd> 
126                 <dd class="btn" id="bg3">
127                  <a href="?style=styles3" rel="styles3" class="styleswitch" id="styles3">灰</a>
128                 </dd> 
129               </dl> 
130               <p class="btn_foreign-sp pt_M pb_M"><a href="/about/language.html">Foreign Language</a></p>
131             </div>
132             
133
134            </div>
135
136          <div class="hamburger is-sp" id="navBtn"><span class="navLine navLine_1"></span><span class="navLine navLine_2"></span><span class="navLine navLine_3"></span></div>
137          <div class="black-bg" id="navlist"></div>
138<!-- //スマホ版グローバルメニュー -->
139
140
141        </div>
142        <!-- //.container -->
143      </div>
144      <!-- //.header -->      
145      <div class="container" id="contents">
146        <div class="container">
147          <div class="pc" id="breadc">
148            <ol class="mt_XS">
149             <li><a href="/index.html">TOP</a></li>
150                          &gt; <li><a href="/about/index.html">図書館案内</a></li>                          &gt; Forrign Language            </ol>
151          </div>
152          <!-- /#breadc-->
153        </div>
154        <!-- /#container-->
155      </div>
156      
157       <div class="container editarea">
158                <h1 class="h_1">Forrign Language</h1> 
159<h2 class="h_2">Google Translating Sevice</h2> 
160<p>グーグルによる自動翻訳サービスもご利用になれます。<br> 自動翻訳のため、必ずしも正確な翻訳ではあるとは限りません。<br> 本来の内容と異なる場合もありますので、同意の上ご利用ください。</p> 
161<p>Automatic translation service provided by Google is available.<br> It is automatic translation and may differ from the original intent of the Japanese page.<br> Please use this service with your consent.</p> 
162<ul class="list_ul"> 
163 <li><a href="/index.html">日本語</a></li> 
164 <li><a href="https://www-iizuka--library-jp.translate.goog/?_x_tr_sch=http&amp;_x_tr_sl=auto&amp;_x_tr_tl=en&amp;_x_tr_hl=ja">English</a></li> 
165 <li><a href="https://www-iizuka--library-jp.translate.goog/?_x_tr_sch=http&amp;_x_tr_sl=ja&amp;_x_tr_tl=zh-CN&amp;_x_tr_hl=ja">中文(簡体字)</a></li> 
166 <li><a href="https://www-iizuka--library-jp.translate.goog/?_x_tr_sch=http&amp;_x_tr_sl=ja&amp;_x_tr_tl=zh-TW&amp;_x_tr_hl=ja">中文(繁体字)</a></li> 
167 <li><a href="https://www-iizuka--library-jp.translate.goog/?_x_tr_sch=http&amp;_x_tr_sl=auto&amp;_x_tr_tl=ko&amp;_x_tr_hl=ja">한국어</a></li> 
168 <li><a href="https://www-iizuka--library-jp.translate.goog/?_x_tr_sch=http&amp;_x_tr_sl=ja&amp;_x_tr_tl=vi&amp;_x_tr_hl=ja">Việt</a></li> 
169</ul>
170      </div>
171<!-- フッター -->
172      <footer class="footer" id="footer">
173          <div class="container"> 
174 <ul class="footList"> 
175  <li><a href="https://twitter.com/iizukacity_lib?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img alt="" style="height:50px;" src="/templates/images/twitter_logoblue.png"></a>　　<a href="https://twitter.com/iizukacity_lib?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img alt="飯塚市立図書館" src="/templates/images/bnr_sns1.png"></a>　　<img alt="" src="/templates/Instagram_Glyph_Gradient_RGB.png" style="width:50px;"><a href="https://www.instagram.com/iizuka_library_official/"><img alt="" style="width:50px;" src="/templates/images/Instagram_Glyph_Gradient_RGB.png"></a></li> 
176 </ul> 
177 <h1 class="logo mt_XS"><a href="/index.html"><img alt="飯塚市立図書館" height="62" width="341" src="/common/images/com/logo.png"></a></h1> <!-- //.logo --><a class="toTop" href="#toTop" id="topBtn"><img height="34" width="34" src="/common/images/com/to-top.png"></a> <!-- 図書館情報欄 --> 
178 <div class="grid"> 
179  <div class="gridItem x8"> 
180   <p class="icon_map icon_map_iizuka"><a class="link_a" href="/access/iizuka.html">飯塚図書館</a><span>（mail：info★iizuka-library.jp（★は@に置き換えてください））</span></p> 
181   <p>〒820-0041　福岡県飯塚市飯塚14番67号（イイヅカコミュニティセンター1階）<br> TEL：0948-22-5552<br> FAX：0948-22-5770</p> 
182   <div class="grid"> 
183    <div class="gridItem x4"> <a class="link_a" href="/about/menseki.html">リンク・免責事項</a><a class="link_a" href="/about/menseki.html">など</a> 
184    </div> 
185    <div class="gridItem x4"> <a class="link_a" href="/sitemap.html">サイトマップ</a> 
186    </div> 
187    <div class="gridItem x4"> <a class="link_a" href="/link.html">リンク集</a> 
188    </div> 
189   </div> 
190  </div> 
191  <div class="gridItem x4"> 
192   <p class="f_bold icon_map icon_map_chikuho"><a class="link_a" href="/access/chikuho.html">ちくほ図書館</a></p> 
193   <p class="f_bold icon_map icon_map_shonai"><a class="link_a" href="/access/shounai.html">庄内図書館</a></p> 
194   <p class="f_bold icon_map icon_map_honami"><a class="link_a" href="/access/honami.html">穂波図書館</a></p> 
195   <p class="f_bold icon_map icon_map_kaita"><a class="link_a" href="/access/kaita.html">頴田図書館</a></p> 
196  </div> 
197 </div> <!-- //.grid --> 
198 <p class="t_ctr font_XS">Copyrights (C) 2021 IIZUKA CITY LIBRARY All Right Reserved.</p> 
199</div>      </footer>
200<!-- //フッター -->
201      

201<script src="/common/js/main.min.js"></script>

201
202      

202<script src="/common/js/vue.min.js"></script>

202
203      
204            

204<script>
205        const slideItem = [
206          {
207            id:0,
208            link : '#',
209            src : '',
210            alt : '飯塚市立図書館'
211          },
212          {
213            id:1,
214            link : '#',
215            src : '',
216            alt : '飯塚市立図書館'
217          },
218          {
219            id:2,
220            link : '#',
221            src : '',
222            alt : '飯塚市立図書館'
223          },
224          {
225            id:3,
226            link : '#',
227            src : '',
228            alt : '飯塚市立図書館'
229          }
230        ];
231        const src = [
232          './slide/slide_01_pc.png',
233          './slide/slide_02_pc.png',
234          './slide/slide_03_pc.png',
235          './slide/slide_04_pc.png'
236        ];
237        const src2 = [
238          './slide/slide_01_sp.png',
239          './slide/slide_02_sp.png',
240          './slide/slide_03_sp.png',
241          './slide/slide_03_sp.png'
242        ];
243        let i = 0;
244        let currentitem = 0;
245        let id,button;
246        let carousel = new Vue({
247          el: '.slide',
248          data: {
249            items: slideItem
250          },
251          ready: function(){
252            for(let i = 0; i < this.items.length; i++){
253              if(window.innerWidth > 769){
254                this.items[i].src = src[i];

255              }else{
256                this.items[i].src = src2[i];
257              }
258            }
259          },
260          methods:{
261            controller: function(num){
262              for(let k = 0 ;k < slideItem.length ; k++){
263                document.getElementById('slideCtl' + k).classList.remove('current');
264                document.getElementById('slideItem' + k).classList.remove('is-show');
265              }
266              document.getElementById('slideItem' + num).classList.add('is-show');
267              document.getElementById('slideCtl' + num).classList.add('current');
268              //初期化
269              i = 1;
270              if(num != 4 ) {
271                currentitem = num + 1
272              }else{
273                currentitem = 0;
274              }
275            }
276          }
277        });
278        function init(){
279            const interval = 5000;
280            const timing = interval / 1000 * 60;
281            let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
282            window.requestAnimationFrame = requestAnimationFrame;
283            //画像切り替え
284
285            function animation(){
286              // idがいっぱいになったら初期化
287              if ( i % timing === 0 ) {
288              if(currentitem === slideItem.length) currentitem = 0;
289                for(let k = 0 ;k < slideItem.length ; k++){
290                  id = document.getElementById('slideItem' + k);
291                  button = document.getElementById('slideCtl' + k);
292                  if( k == currentitem){
293                    id.classList.add('is-show');
294                    button.classList.add('current');
295                  }
296                  else{
297                    id.classList.remove('is-show');
298                    button.classList.remove('current');
299                  }
300                }
301                currentitem++;
302              }
303              i++;
304              requestAnimationFrame(animation);
305            }
306            animation();
307            //リサイズ画像切り替え
308            window.addEventListener('resize', function () {
309//              initSwiper();
310              for (let i = 0; i < slideItem.length; i++) {
311                if (window.innerWidth > 769) {
312                  carousel.items[i].src = src[i];

313                } else {
314                  carousel.items[i].src = src2[i];
315                }
316              }
317            });
318          }
319          //リサイズ画像切り替え
320          window.addEventListener('resize', function () {
321            for (let i = 0; i < slideItem.length; i++) {
322              if (window.innerWidth > 769) {
323                carousel.items[i].src = src[i];
324              } else {
325                carousel.items[i].src = src2[i];
326              }
327            }
328          });
329          window.addEventListener("load",init());
330      </script>

330
331      
332      
333    </div>
334    <!-- //.body_wrap -->
335
336  </body>
337
338</html>