https://shimonohiro.com/js/page_base.js

1// JavaScript Document
2
3
4//=== flexコンテナのアイテム幅設定【fb-】 ===
5//=== fb-50：50%  fb-50_600：600pxで100%化
6  function setFlexWidths() {
7    const flexItems = document.querySelectorAll("[class*='fb-']");
8    const screenWidth = window.innerWidth; // 画面幅を取得
9
10    flexItems.forEach(item => {
11      const classList = item.className.split(' ');
12      classList.forEach(cls => {
13        if (cls.startsWith('fb-')) {
14          // クラス名から幅の部分とブレークポイントを取得
15          const parts = cls.split('-')[1].split('_');
16          const widthPercentage = parts[0];  // "50", "40" などの数値
17          const breakpoint = parts[1] ? parseInt(parts[1]) : 480; // "_600" などのブレークポイント、デフォルト480px
18
19          // 画面幅が480px以下なら100%に設定
20          if (screenWidth <= 480) {
21            item.style.width = '100%';
22          }
23          // ブレークポイントが指定されていて、そのサイズ以下なら100%に設定
24          else if (breakpoint && screenWidth <= breakpoint) {
25            item.style.width = '100%';
26          } else {
27            // 通常時はクラスの幅を適用
28            item.style.width = widthPercentage + '%';
29          }
30        }
31      });
32    });
33  }
34
35  // 初期ロード時に呼び出し
36  setFlexWidths();
37
38  // ウィンドウサイズ変更時に再度呼び出し
39  window.addEventListener('resize', setFlexWidths);
40
41
42
43
44
45//=== フォントサイズ設定【fsize-】 ===
46  function setFontSizes() {
47    const fontSizeItems = document.querySelectorAll("[class*='fsize-']");
48
49    fontSizeItems.forEach(item => {
50      const classList = item.className.split(' ');
51      classList.forEach(cls => {
52        if (cls.startsWith('fsize-')) {
53          const fontSizePercentage = cls.split('-')[1]; // "100", "120", などを取得
54          item.style.fontSize = fontSizePercentage + '%'; // フォントサイズを設定
55        }
56      });
57    });
58  }
59
60  // 初期ロード時に呼び出し
61  setFontSizes();
62
63
64// margin-bottom設定【mb-】
65// 関数: mb-クラスを持つ要素にmargin-bottomを設定
66  function setMarginBottoms() {
67    const marginBottomItems = document.querySelectorAll("[class*='mb-']");
68
69    marginBottomItems.forEach(item => {
70      const classList = item.className.split(' ');
71      classList.forEach(cls => {
72        if (cls.startsWith('mb-')) {
73          const marginBottomValue = cls.split('-')[1]; // "15", "50", などを取得
74          item.style.marginBottom = marginBottomValue + 'px'; // マージンボトムを設定
75        }
76      });
77    });
78  }
79
80  // 初期ロード時に呼び出し
81  setMarginBottoms();
82
83
84
85// スマホメニュー
86$(document).ready(function () {
87   $(".menu-btn a").click(function () {
88      $(".overlay").fadeToggle(200);
89      $(this).toggleClass('btn-open').toggleClass('btn-close');
90   });
91   $('.overlay').on('click', function () {
92      $(".overlay").fadeToggle(200);
93      $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
94   });
95   $('.menu a').on('click', function () {
96     $(".overlay").fadeToggle(200);
97     $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
98   });
99});
100
101// グローバルメニュー取り込み
102$(function(){
103  $.ajaxSetup({ cache: false });
104    $(function(){
105      $(".global_menu_load").load("menu_g_pc.html .gmenu_wrap");
106      $(".global_menu_load_m").load("menu_g_m.html .gmenu_wrap_m");
107  });
108});
109
110
111
112// SNS
113$(function(){
114   $("#share").jsSocials({
115      showLabel: false,
116      showCount: false,
117      shares: ["twitter", "facebook", "line"]
118   });
119});
120
121// TOPへ戻る
122$(function() {
123  var showFlag = false;
124  var topBtn = $('#back-top');    
125  topBtn.css('bottom', '-141px');
126  var showFlag = false;
127  $(window).scroll(function () {
128    if ($(this).scrollTop() > 150) {
129      if (showFlag == false) {
130          showFlag = true;
131          topBtn.stop().animate({'bottom' : '0px'}, 200); 
132      }
133    } else {
134      if (showFlag) {
135        showFlag = false;
136        topBtn.stop().animate({'bottom' : '-140px'}, 200); 
137      }
138    }
139  });
140  topBtn.click(function () {
141    $('body,html').animate({
142      scrollTop: 0
143    }, 500);
144    return false;
145  });
146});
147
148