「警報・注意報表示」をサイト埋め込みから直接コードにし、デザインを加えました。

今までは「tenki.jp」のサイト内容を埋め込んでいるだけでしたが、読み込みに時間がかかったり、うまく表示できなかったり、デザインの変更ができませんでした。ここで今回、直接コードを記入し、これらを解決しました。また、今治市だけの表示だけだったのを、愛媛県・東予・中予も追加し、また、説明を追加しました。

以下コード：

<div class="container" id="glass" style="width: 100%; height: 99%; background: rgba(72,77,84,0.5); backdrop-filter: blur(20px); border-radius: 15px;" >
  <br></br>
<table>
  <tbody>
    <tr>
      <th class="contents-header" colspan="2"><span class="areaname"></span>の警報・注意報（注意警戒事項）</th>
    </tr>
    <tr>
      <th class="contents-header" id='publishingoffice' colspan="2"></th>
    </tr>
    <tr>
      <td>注意警戒事項</td>
      <td id='headlinetext'></td>
    </tr>
    <tr>
      <th class="contents-header" colspan="2"><span class="areaname"></span>の警報・注意報（発表状況）</th>
    </tr>
    <tr>
      <td class="contents-header"><span class="areaname"></span><span id='region-s'></span></td>
      <td class="contents-header">警報・注意報・警報の切り替え</td>
    </tr>
    <tr>
      <td>警報・注意報(<span id='status-s'></span>)</td>
      <td>
        <div id='warning-s' class="warning-summary-box"></div>
        <div id='attention-s'></div>
      </td>
    </tr>
    <tr>
      <td>警報の切り替え</td>
      <td>
        <div id='nextkinds_s' class="warning-summary-sentence"></div>
      </td>
    </tr>
    <tr>
      <td class="contents-header"><span class="areaname"></span><span id='region-n'></span></td>
      <td class="contents-header">警報・注意報・警報の切り替え</td>
    </tr>
    <tr>
      <td>警報・注意報(<span id='status-n'></span>)</td>
      <td>
        <div id='warning-n' class="warning-summary-box"></div>
        <div id='attention-n'></div>
      </td>
    </tr>
    <tr>
      <td>警報の切り替え</td>
      <td>
        <div id='nextkinds_n' class="warning-summary-sentence"></div>
      </td>
    </tr>
    <tr>
      <td class="contents-header" id='city'></td>
      <td class="contents-header">警報・注意報・警報の切り替え</td>
    </tr>
    <tr>
      <td>警報・注意報(<span id='status-c'></span>)</td>
      <td>
        <div id='warning-c' class="warning-summary-box"></div>
        <div id='attention-c'></div>
      </td>
    </tr>
    <tr>
      <td>警報の切り替え</td>
      <td>
        <div id='nextkinds_c' class="warning-summary-sentence"></div>
      </td>
    </tr>
  </tbody>
</table>
<div class="contents-block">
  <div style="overflow: auto;">
    <div style="display: inline-block; vertical-align: top;">
      <div class="contents-legends">
        <div class="contents-legend">
          <div class="contents-legend-box level-50"></div>
          <div class="contents-legend-text">大雨特別警報</div>
        </div>
      </div>
      <div class="contents-legends">
        <div class="contents-legend">
          <div class="contents-legend-box level-40"></div>
          <div class="contents-legend-text">特別警報(大雨以外)・高潮警報・土砂災害警戒・警戒</div>
        </div>
      </div>
      <div class="contents-legends">
        <div class="contents-legend">
          <div class="contents-legend-box level-30"></div>
          <div class="contents-legend-text">警報(高潮以外)・高潮注意報(*1)</div>
        </div>
      </div>
      <div class="contents-legends">
        <div class="contents-legend">
          <div class="contents-legend-box level-20"></div>
          <div class="contents-legend-text">注意報(高潮以外)・高潮注意報(*2)</div>
        </div>
      </div>
      <div class="contents-legends">
        <div class="contents-legend">
          <div class="contents-legend-box contents-missing"></div>
          <div class="contents-legend-text">解除</div>
        </div>
      </div>
      <div class="contents-legends">
        <div class="contents-legend">
          <div class="contents-legend-text">　*1 高潮警報に切り替える可能性が高い</div>
        </div>
      </div>
      <div class="contents-legends">
        <div class="contents-legend">
          <div class="contents-legend-text">　*2 上記以外の高潮注意報</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<script>
  (function (E) {
  "use strict";
  var C = {
    WARNING_INFOS: {
      33: ["大雨特別警報", "level-50"],
      "03": ["大雨警報", "level-30"],
      10: ["大雨注意報", "level-20"],
      "04": ["洪水警報", "level-30"],
      18: ["洪水注意報", "level-20"],
      35: ["暴風特別警報", "level-40"],
      "05": ["暴風警報", "level-30"],
      15: ["強風注意報", "level-20"],
      32: ["暴風雪特別警報", "level-40"],
      "02": ["暴風雪警報", "level-30"],
      13: ["風雪注意報", "level-20"],
      36: ["大雪特別警報", "level-40"],
      "06": ["大雪警報", "level-30"],
      12: ["大雪注意報", "level-20"],
      37: ["波浪特別警報", "level-40"],
      "07": ["波浪警報", "level-30"],
      16: ["波浪注意報", "level-20"],
      38: ["高潮特別警報", "level-40"],
      "08": ["高潮警報", "level-40"],
      19: ["高潮注意報", "level-20"],
      "19+": ["高潮注意報", "level-30"],
      14: ["雷注意報", "level-20"],
      17: ["融雪注意報", "level-20"],
      20: ["濃霧注意報", "level-20"],
      21: ["乾燥注意報", "level-20"],
      22: ["なだれ注意報", "level-20"],
      23: ["低温注意報", "level-20"],
      24: ["霜注意報", "level-20"],
      25: ["着氷注意報", "level-20"],
      26: ["着雪注意報", "level-20"],
      "undefined": ["発表なし","level-00"]
    }
  };
  E.Warning = E.Warning || {};
  E.Warning.Const = C;
}("object" == typeof window ? window : "object" == typeof global ? global : this));
window.addEventListener('DOMContentLoaded', function () {
  const area_office = "380000"; // 愛媛県
  const area_class10s_1 = "380020"; // 東予
  const area_class10s_2 = "380010"; // 中予
  const area_class20s = "3820200"; // 今治市
  const area_url = "https://www.jma.go.jp/bosai/common/const/area.json";
  const office_url = (`https://www.jma.go.jp/bosai/warning/data/warning/${area_office}.json`);
  async function fetchURLs(urls) {
    try {
      const fetchUrls = urls.map(url => fetch(url).then(res => res.json()));
      const [todo1, todo2] = await Promise.all(fetchUrls);
      const office = todo1.offices[area_office].name;
      const city = todo1.class20s[area_class20s].name;
      const region_s = todo1.class10s[area_class10s_1].name;
      const region_n = todo1.class10s[area_class10s_2].name;
      const state_s = todo2.areaTypes[0].areas[0].warnings[0].status;
      const state_n = todo2.areaTypes[0].areas[1].warnings[0].status;
      const state_c = todo2.areaTypes[1].areas[1].warnings[0].status;
      const condition_s = todo2.areaTypes[0].areas[0].warnings[0].condition;
      const condition_n = todo2.areaTypes[0].areas[1].warnings[0].condition;
      const condition_c = todo2.areaTypes[1].areas[1].warnings[0].condition;
      const attention_s = (todo2.areaTypes[0].areas[0].warnings[0].attentions) && (todo2.areaTypes[0].areas[0].warnings[0].attentions[0]);
      const attention_n = (todo2.areaTypes[0].areas[1].warnings[0].attentions) && (todo2.areaTypes[0].areas[1].warnings[0].attentions[0]);
      const attention_c = (todo2.areaTypes[1].areas[1].warnings[0].attentions) && (todo2.areaTypes[1].areas[1].warnings[0].attentions[0]);
      const codes_s = todo2.areaTypes[0].areas[0].warnings[0].code;
      const advisory_s = Warning.Const.WARNING_INFOS[codes_s][0];
      const levels_s = Warning.Const.WARNING_INFOS[codes_s][1];
      const codes_n = todo2.areaTypes[0].areas[1].warnings[0].code;
      const advisory_n = Warning.Const.WARNING_INFOS[codes_n][0];
      const levels_n = Warning.Const.WARNING_INFOS[codes_n][1];
      const codes_c = todo2.areaTypes[1].areas[1].warnings[0].code;
      const advisory_c = Warning.Const.WARNING_INFOS[codes_c][0];
      const levels_c = Warning.Const.WARNING_INFOS[codes_c][1];
      const areatarget = document.querySelectorAll('.areaname');
      let setwarninginfo = function () {
        for (let i in areatarget) {
          if (areatarget.hasOwnProperty(i)) {
            areatarget[i].innerHTML = office;
          }
        }
        document.getElementById("publishingoffice").innerHTML = todo2.reportDatetime.replace('+09:00', '').replace('T', ' ').replaceAll('-', '/').replace(/\:00$/, '') + ' ' + todo2.publishingOffice + ' 発表';
        document.getElementById("headlinetext").innerHTML = todo2.headlineText;
        document.getElementById("region-s").innerHTML = region_s;
        document.getElementById("region-n").innerHTML = region_n;
        document.getElementById("city").innerHTML = city;
        document.getElementById("status-s").innerHTML = state_s;
        document.getElementById("status-n").innerHTML = state_n;
        document.getElementById("status-c").innerHTML = state_c;
        if (/発表警報・注意報はなし/.test(state_s)) {
          document.getElementById("warning-s").innerHTML = ("警報・注意報は発表されていません。");
          document.getElementById("warning-s").classList.remove('warning-summary-box');
          document.getElementById("warning-s").classList.add("warning-summary-sentence");
        } else if (condition_s)　 {
          document.getElementById("warning-s").innerHTML = advisory_s + ' (' + condition_s + ')';
        } else {
          document.getElementById("warning-s").innerHTML = advisory_s;
        }
        if (/発表警報・注意報はなし/.test(state_n)) {
          document.getElementById("warning-n").innerHTML = ("警報・注意報は発表されていません。");
          document.getElementById("warning-n").classList.remove('warning-summary-box');
          document.getElementById("warning-n").classList.add("warning-summary-sentence");
        } else if (condition_n)　 {
          document.getElementById("warning-n").innerHTML = advisory_n + ' (' + condition_n + ')';
        } else {
          document.getElementById("warning-n").innerHTML = advisory_n;
        }
        if (/発表警報・注意報はなし/.test(state_c)) {
          document.getElementById("warning-c").innerHTML = ("警報・注意報は発表されていません。");
          document.getElementById("warning-c").classList.remove('warning-summary-box');
          document.getElementById("warning-c").classList.add("warning-summary-sentence");
        } else if (condition_c)　 {
          document.getElementById("warning-c").innerHTML = advisory_c + ' (' + condition_c + ')';
        } else {
          document.getElementById("warning-c").innerHTML = advisory_c;
        }
        if (/解除/.test(state_s)) {
          document.getElementById("warning-s").classList.add("contents-missing");
        } else {
          document.getElementById("warning-s").classList.add(levels_s);
        }
        if (/解除/.test(state_n)) {
          document.getElementById("warning-n").classList.add("contents-missing");
        } else {
          document.getElementById("warning-n").classList.add(levels_n);
        }
        if (/解除/.test(state_c)) {
          document.getElementById("warning-c").classList.add("contents-missing");
        } else {
          document.getElementById("warning-c").classList.add(levels_c);
        }
      };
      setwarninginfo();
      let setattentioninfo = function () {
        if (/警戒/.test(attention_s)) {
          document.getElementById("attention-s").innerHTML = attention_s;
          document.getElementById("attention-s").classList.add("warning-summary-box");
          document.getElementById("attention-s").classList.add("level-40");
        } else if (attention_s) {
          document.getElementById("attention-s").innerHTML = attention_s;
          document.getElementById("attention-s").classList.add("warning-disaster-box");
        }
        if (/警戒/.test(attention_n)) {
          document.getElementById("attention-n").innerHTML = attention_n;
          document.getElementById("attention-n").classList.add("warning-summary-box");
          document.getElementById("attention-n").classList.add("level-40");
        } else if (attention_n) {
          document.getElementById("attention-n").innerHTML = attention_n;
          document.getElementById("attention-n").classList.add("warning-disaster-box");
        }
        if (/警戒/.test(attention_c)) {
          document.getElementById("attention-c").innerHTML = attention_c;
          document.getElementById("attention-c").classList.add("warning-summary-box");
          document.getElementById("attention-c").classList.add("level-40");
        } else if (attention_c) {
          document.getElementById("attention-c").innerHTML = attention_c;
          document.getElementById("attention-c").classList.add("warning-disaster-box");
        }
      };
      setattentioninfo();
      let setnextinfo = function () {
        const nextsentence_s = (todo2.areaTypes[0].areas[0].warnings[0].nextKinds) && (todo2.areaTypes[0].areas[0].warnings[0].nextKinds[0].sentence);
        const nextsentence_n = (todo2.areaTypes[0].areas[1].warnings[0].nextKinds) && (todo2.areaTypes[0].areas[1].warnings[0].nextKinds[0].sentence);
        const nextsentence_c = (todo2.areaTypes[1].areas[1].warnings[0].nextKinds) && (todo2.areaTypes[1].areas[1].warnings[0].nextKinds[0].sentence);
        const nextcodes_s = (todo2.areaTypes[0].areas[0].warnings[0].nextKinds) && (todo2.areaTypes[0].areas[0].warnings[0].nextKinds[0].code);
        const nextcodes_n = (todo2.areaTypes[0].areas[1].warnings[0].nextKinds) && (todo2.areaTypes[0].areas[1].warnings[0].nextKinds[0].code);
        const nextcodes_c = (todo2.areaTypes[1].areas[1].warnings[0].nextKinds) && (todo2.areaTypes[1].areas[1].warnings[0].nextKinds[0].code);
        const nextlevels_s = Warning.Const.WARNING_INFOS[nextcodes_s][1];
        const nextlevels_n = Warning.Const.WARNING_INFOS[nextcodes_n][1];
        const nextlevels_c = Warning.Const.WARNING_INFOS[nextcodes_c][1];
        if (nextsentence_s) {
          document.getElementById("nextkinds_s").innerHTML = nextsentence_s;
          let element = document.getElementById('warning-s');
          element.insertAdjacentHTML('beforeend', '<div id="nextwarning-s" class="warning-next-box">！</div>');
          document.getElementById("nextwarning-s").classList.add(nextlevels_s);
        } else {
          document.getElementById("nextkinds_s").innerHTML = '';
        }
        if (nextsentence_n) {
          document.getElementById("nextkinds_n").innerHTML = nextsentence_n;
          let element = document.getElementById('warning-n');
          element.insertAdjacentHTML('beforeend', '<div id="nextwarning-n" class="warning-next-box">！</div>');
          document.getElementById("nextwarning-n").classList.add(nextlevels_n);
        } else {
          document.getElementById("nextkinds_n").innerHTML = '';
        }
        if (nextsentence_c) {
          document.getElementById("nextkinds_c").innerHTML = nextsentence_c;
          let element = document.getElementById('warning-c');
          element.insertAdjacentHTML('beforeend', '<div id="nextwarning-c" class="warning-next-box">！</div>');
          document.getElementById("nextwarning-c").classList.add(nextlevels_c);
        } else {
          document.getElementById("nextkinds_c").innerHTML = '';
        }
      };
      setnextinfo();
    } catch (error) {
      console.error(error);
    }
  }
  fetchURLs([area_url, office_url]);
});
</script>
<style>
  body{
    background-color: #0000000;
}
th,td {
    border: solid 1px #fff;          /* 枠線指定 */
}
th {
    width: 100px;              /* 幅指定 */
    text-align: center;           /* 文字の揃え位置指定 */
    font-weight: 400;
}
td {
    text-align: center;        /* 文字の揃え位置指定 */
}
table {
    border-collapse: collapse; /* セルの線を重ねる */
    width: 100%;               /* 幅指定 */
    table-layout: fixed;       /* セルの幅計算指定 */
    font-size: 14px;
    color: #fff;
}
th.contents-header, td.contents-header {
    background-color: #35B6AC;
}
.level-00 {
    color: #494949;
}
.level-20 {
    background-color: #f2e700;
    color: #fff;
}
.level-30 {
    background-color: #ff2800;
    color: #fff;
}
.level-40 {
    background-color: #a0a;
    color: #fff;
}
.level-50 {
    background-color: #0c000c;
    color: #fff;
}
div.warning-summary-box {
    padding: 2px;
    margin: 2px;
    border: solid 1px #fff;
    float: left;
}
div.warning-disaster-box {
    color: #000;
    background-color: #4169e1;
    padding: 2px;
    margin: 2px;
    border: solid 1px #fff;
    float: left;
}
div.warning-summary-sentence {
    padding: 2px;
    margin: 2px;
    float: left;
}
div.contents-missing {
    background-color: #c8c8cb;
    color: #000;
}
div.contents-block {
    margin-top: 10px;
    margin-bottom: 5px;
}
div.contents-legends {
    font-size: 12px;
    white-space: nowrap;
    text-align: left;
}
div.contents-legend {
    display: inline-block;
}
div.contents-legend-text {
    color: #fff;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
}
div.contents-legend-box {
    margin: 2px;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border: solid 1px #fff;
    display: inline-block;
    vertical-align: top;
    line-height: 12px;
    text-align: center;
}
div.warning-next-box {
    width: 16px;
    height: 16px;
    margin: 1px 0 0 3px;
    border: solid 1px #000;
    display: inline-block;
    vertical-align: top;
    line-height: 18px;
    text-align: center;
}
</style>

出力・結果：

参考にしたサイト：気象庁の警報・注意報JSONを表示させてみた | FOUR4to6 (x0.com)

上記のサイト、非常にわかりやすかったです。本当にありがとうございます。知らないことがたくさんありました。