カンタンBlogger学習 #08 WEBページ実装サンプル

2023年2月23日

これまで学習してきた内容を使って、GoogleBloggerをWebサイトとして簡単に構築することができます。今回はその手順とサンプルコードを乗せて学習を進めます。

テーマXML

以前ブログで紹介した「カンタンweb」のwebページを今回サンプルとして作ってみました。まずは、テーマのxmlを、テーマ/カスタム/HTMLを編集に登録しましょう。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
  b:version='2' 
  b:templateVersion='1.3.0'
  b:layoutsVersion='3'
  b:defaultwidgetversion='2'
  b:css='false'
  b:js='true'
  b:responsive='false' 
  expr:lang='data:blog.locale'
  expr:dir='data:blog.languageDirection'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<title><data:blog.title/></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[
/* Header */
#header{
  --color-header-text : #666;
  --size-hamburger-width  : 50px;
  --size-hamburger-height : 50px;

  height : var(--size-header-height);
  display:flex;
  align-items:center;
  position:relative;
  /*box-shadow:0 5px 10px rgba(0,0,0,0.5);*/
  padding:0 20px;
}

#header > *,
#Header1{
  height:100%;
}

#header > *:nth-child(2){
  margin-left:auto;
}

#header a{
  text-decoration : none;
}

#header img{
  max-height:100%;
}

/* Header:Logo */

#header .logo{
  height:100%;
  padding:10px;
  display:flex;
  align-items:center;
}

#header .logo .title{
  margin-left:10px;
  font-size:2rem;
  font-weight:bold;
  white-space:nowrap;
  color:pink;
}

/* Header:Menu */

#header nav{
  --size-menu-height-mobile:50px;
  height:100%;
  margin-left:auto;
  display:flex;
  align-items:center;
}

#header .menu{
  display:flex;
  align-items:center;
  gap:10px;
}
#header .menu > *{
  padding:5px;
}

#header .menu *{
  color : var(--color-header-text);
}

/* Header:Hamburger */

#header nav label{
  position:absolute;
  top    : 15px;
  left  : calc((var(--size-hamburger-width) + 5px) * -1);
  width  : var(--size-hamburger-width);
  height : var(--size-hamburger-height);
  max-height : 100vh;
  overflow-y:auto;
}

.hamburger{
  --size-border:2px;
  --color-bg:rgb(200,200,200);
  --color-bg-hover:rgb(160,160,160);
  --color-line:rgb(128,128,128);
  --color-line-hover:rgb(100,100,100);
  display:block;
  border:1px solid var(--color-bg);
  width:100%;
  height:100%;
  position:relative;
  border-radius:4px;
  cursor:pointer;
  background-color:white;
}

.hamburger:hover{
  border-color:var(--color-bg-hover);
}

.hamburger:hover > span
.hamburger:hover::before,
.hamburger:hover::after{
  background-color:var(--color-line-hover);
}

.hamburger > span,
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width:55%;
  height:2px;
  background-color: var(--color-line);
}

.hamburger > span{
  top:50%;
}

.hamburger::before{
  top:32%;
}

.hamburger::after{
  top:68%;
}

@media screen and (max-width:768px){
  #header .logo .title{
    font-size:1.6rem;
  }

  #header nav{
    position:absolute;
    top:0%;
    right:-80%;
    width:80%;
    height:auto;
    
    background-color:white;
    transition-property:right;
    transition-duration:0.3s;
    z-index:1000;
  }
  #header nav .menu{
    flex-direction:column;
    height:auto;
    width:100%;
  }

  #header .menu > *{
    padding:0;
  }

  #menu_toggle ~ nav .menu > *{
    height:var(--size-menu-height-mobile);
    line-height:var(--size-menu-height-mobile);
    width:100%;
    text-align:center;
  }

  #menu_toggle ~ nav .menu > *+*{
    border-top:1px solid #aaa;
  }

  #menu_toggle:checked ~ nav{
    right: 0;
    box-shadow:2px 2px 10px rgba(0,0,0,0.5);
  }

  #header nav .slide ul{
    background-color:white;
  }

  #header nav .slide ul *{
    color : black;
  }

}

@media screen and (min-width:769px){
  #header .menu li{
    height:auto;
  }
  #header .menu li a{
    display:inline-block;
    padding:0 0px;
    white-space:nowrap;
    position:relative;
    height:auto;
  }

  #header .menu li a::before{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    display:block;
    width:100%;
    height:1px;
    margin:0 auto;
    background-color:var(--color-header-text);
    transform:scaleX(0);
    transition-property:transform;
    transition-duration:0.3s;
    transform-origin: right center;
  }
  
  #header .menu li a:hover::before{
    transform:scaleX(1);
    transform-origin: left center;
  }

  .hamburger{
    display:none;
  }
}

/* Footer */
footer{
  height : var(--size-footer-height);
  text-align:center;
  font-size:0.9rem;
  padding:20px;
  padding-top:20px;
  /*box-shadow:0 0 5px rgba(0,0,0,0.5);*/
  position:relative;
}

/* Common */

:root{
  --size-header-height : 80px;
  --size-footer-height : 80px;
  --size-font : 14px;
  --color-font : #666;
  --color-font-invert : #ddd;
}

*, *:before, *:after {
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}
*{
  -webkit-font-smoothing : auto;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size : var(--size-font);
}

#main{
  min-height : calc(100% - var(--size-header-height) - var(--size-footer-height));
  padding:20px;
}

*{
  font-size : var(--size-font);
  color     : var(--color-font);
}

body{
  overflow-y:scroll;
}
html,body{
  width:100%;
  height:100%;
  overflow-x:hidden;
  margin:0;
  padding:0;
  outline:0;
  border:0;
}

ul,ol,li{
  list-style:none;
  margin:0;
  padding:0;
}

.hidden{
  display:none;
}

h1{
  font-size : 2.0rem;
}
h2{
  font-size : 1.5rem;
}
h3{
  font-size : 1.0rem;
}
h4{
  font-size : 0.8rem;
}
h5{
  font-size : 0.7rem;
}
h6{
  font-size : 0.6rem;
}

/* Content */

/* Index */

#main{
  min-height : calc(100% - var(--size-header-height) - var(--size-footer-height));
  padding : 0!important;
}

#main .contents{
  padding:20px;
}

#main .contents img,
#main .contents svg{
  max-width:100%;
  height:200px;
  display:block;
  margin-bottom:20px;
}

#main .contents h2{
  font-size:3rem;
  margin-top:50px;
  border-bottom:1px solid black;
  padding-bottom:10px;
}

#main .contents img.image-1,
#main .contents svg.image-1{
  margin:0 auto;
}

#main .contents img.image-2,
#main .contents svg.image-2{
  margin-left:auto;
}


#main .contents .sentense{
  white-space:pre-wrap;
  word-break:break-all;
}

/* Content:index:Banner */

#main .banner{
  position:relative;
  width:100%;
  height:500px;
}

#main .banner > *{
  position:absolute;
}

#main .banner h1{
  top:50%;
  left:50%;
  width:100%;
  transform:translate(-50%,-50%);
  white-space:pre-wrap;
  z-index:10;
  color:white;
  text-align:center;
  padding:0 10px;
  margin:0;
}

#main .banner h1 *{
  color:white;
  font-size:2.5rem;
  white-space:nowrap;
  text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

#main .banner img,
#main .banner svg{
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  object-position : left;
}

@media screen and (max-width:768px){
  #main .banner{
    height:300px;
  }
  #main .banner h1 *{
    font-size:1.8rem;
  }
}

#content-wrapper{
  min-height:calc(100vh - var(--size-header-height) - var(--size-footer-height));
  display:flex;
  justify-content: center;
  gap:10px;
  background-color:#ddd;
  padding:10px 0;
}
#main-wrapper{
  width:768px;
  background-color:white;
}
#sidebar-wrapper{
  width:300px;
  background-color:white;
}
@media (max-width:1078px){
  #content-wrapper{
    flex-direction:column;
  }
  #main-wrapper,
  #sidebar-wrapper{
    width:768px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
}

]]></b:skin>
<script>/*<![CDATA[*/
function feed(url){
  const s = document.createElement('script')
  s.src = url
  document.body.appendChild(s)
}

function article_lists(data){
  const root = document.getElementById('article_lists')
  view(root , data)
}

function static_lists(data){
  const root = document.getElementById('static_lists')
  view(root , data)
}

// ページのタイトルを"index"にすると、document-rootで表示される仕様
function index(datas){console.log(datas)
  if(!datas){return}
  const root = document.getElementById('main')
  const data = datas.feed.entry.find(e => e.title['$t'] === 'index')
  if(!data){return}
  const html = data.content['$t']
  root.insertAdjacentHTML('beforeend' , html)
}

function view(root , data){
  if(!data){return}
  console.log(data)
  const lists = data.feed.entry
  if(!lists){return}
  for(const list of lists){
    console.log(list)
    const link = list.link.find(e => e.rel === 'alternate')
    const html = `<li><a href='${link.href}'>${list.title.$t}</a></li>`
    root.insertAdjacentHTML('beforeend' , html)
  }
}
/*]]>*/</script>
</head>
<body>
<b:section id='header' class='header' showaddelement='yes' maxwidgets='1'>
  <b:widget id='Header1' type='Header' title='Logo' locked='true' >
    <b:includable id='main'>
      <a class='logo' href='/'>
        <img expr:src='data:sourceUrl'/>
        <span class='title'><data:blog.title/></span>
      </a>
    </b:includable>
  </b:widget>

  <b:widget id='PageList1' type='PageList' title='メニュー' locked='true'>
    <b:includable id='main'>
      <input type='checkbox' class='menu-toggle hidden' id='menu_toggle'/>
      <nav>
        <label for='menu_toggle'>
          <div class='hamburger'><span></span></div>
        </label>
        <ul class='menu'>
          <b:loop values='data:links' var='link'>
            <li>
              <b:class cond='data:link.isCurrentPage' name='selected'/>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </nav>
    </b:includable>
  </b:widget>
</b:section>

<div id='content-wrapper'>
<div id='main-wrapper' >
<b:section id='main' class='main'>
  <b:widget id='Blog1' type='Blog' title='contents' >
    <b:includable id='main'>
      
      <b:if cond='data:blog.pageType == "index"'>
        <b:include name='js_index' />
      
      <b:elseif cond='data:blog.pageType == "static_page"'/>
        <b:include name='static_page' />

      <b:else/>
        other-page

      </b:if>
    </b:includable>

    <!-- <b:includable id='articles'>
      <div class='grid'>
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.dateHeader'>
          <script style='display:none'>var dateHeader = '<data:post.dateHeader/>'</script>
          </b:if>

          <a expr:href='data:post.url'>
            <img expr:src='resizeImage(data:post.featuredImage,320,"1:1")' />
            <div class='title'><data:post.title/></div>
            <div class='labels'></div>
            <div class='date'><script>document.write(dateHeader)</script></div>
          </a>
        </b:loop>
      </div>
    </b:includable> -->

    <!-- <b:includable id='article'>
      <b:loop var='post' values='data:posts'>
        <b:if cond='data:post.dateHeader'>
        <script style='display:none'>var dateHeader = '<data:post.dateHeader/>'</script>
        </b:if>

        <article>
          <h1 style='display:none;'><data:post.title/></h1>
          <div class='published'><script>document.write(dateHeader)</script></div>
          <div class='labels'>
            <b:loop values='data:post.labels' var='label'>
              <a class='label-item' expr:href='data:label.url'><data:label.name/></a>
            </b:loop>
          </div>
          <div class='blog-body'><data:post.body/></div>
        </article>
      </b:loop>
    </b:includable> -->

    <b:includable id='static_page'>
      <b:loop var='post' values='data:posts'>
        <div class='blog-body'><data:post.body/></div>
      </b:loop>
    </b:includable>

    <b:includable id='js_index'>
      <script>/*<![CDATA[*/
      // feed('/feeds/pages/default/-/index?alt=json&callback=index')
      feed('/feeds/pages/default/?path=/p/index.html&alt=json&callback=index')
      /*]]>*/</script>
    </b:includable>

  </b:widget>
</b:section>
</div>

<div id='sidebar-wrapper'>
  <b:section id='sidebar' showaddelement='yes'>

  </b:section>
</div>
</div>


<footer>© 2017-2023 MYNT, Inc.</footer>

</body>
</html>

ヘッダ情報の登録

Blogger管理画面の「レイアウト」を開いて、「header」箇所の「Header」の鉛筆アイコンをクリック。

アイコンの登録

ブログタイトルは事前に入力されていれば、そのままでいいのですが、今回は画像を登録してみます。 ※画像が登録されなければ、タイトルのみの表示になります。画像サンプルを用意しておいたので、お好きにお使いください。

サンプルWEBサイト

サンプルを用意したので、それぞれBlogger管理画面で登録してみましょう。

トップページ

ページを新規追加して、「index」という名前で登録をする。

<!--<img alt="" border="0" data-original-height="168" data-original-width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTQwa75OBTiKF1vr5kQ3AcAFCdYu0dx8VqgH3je-ro6fdG1ywbvpcbfhV4CKTLES4OrovZ-hFnDv9Il_xUJkVGDReXyrJ3mLtMG7F0kgus_bGEOMwuyTmb_tmJoJI4g_f3vMduXnECO4Xqhb3I50cu5E0mJhQRqgeZX__W88jwP7jX5KBhDaLhy3O/s1600/logo.png"/>-->
<section class='banner'>
  <h1><span>誰でもカンタンにできる</span><span>Webサイト構築</span></h1>
  <img alt="" border="0" data-original-height="435" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyvtreXLc3CbVvSQTPHWhaKre1-F0ayGQwUPmmB00O-ibhSKibbZUVn6GITztFlAwQqUTvanlkRadUG5SxuFgo1mfk8_qY7nd17yiMWf_iX4qS2CDn9JlpKxyXUX3bxHJ-qceoTPdwfsU2kSeaZony65gAywkEUlRjSkGR0j10w5jCRmTwgcCpMWXM4Q/s1600/banner.jpg"/>
</section>

<section class='contents pre-wrap'>
  <h2>Summary : 概要</h2>
  <svg xmlns="http://www.w3.org/2000/svg" width="866.81006" height="443.0676" viewBox="0 0 866.81006 443.0676" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M828.33492,244.95227l-2.71537,21.6217-6.73908,53.70394h-135.38272c1.05718-12.03676,2.50247-29.36207,4.04646-48.06508,.15218-1.86793,.31188-3.74756,.46397-5.63886,3.87162-47.01432,8.10823-100.21632,8.10823-100.21632l17.79852,3.31574,34.53207,6.42112,14.07147,2.61514,37.68114,7.01655c18.78727,3.49074,31.7102,30.69301,28.13532,59.22608Z" fill="#f2f2f2"/><polygon points="725.93018 79.35764 742.57875 108.4915 710.5803 131.16867 696.93018 95.35764 725.93018 79.35764" fill="#ffb6b6"/><circle cx="704.73531" cy="65.67545" r="41.24406" fill="#ffb6b6"/><path d="M701.77389,74.8959c-3.27492-4.9842-1.98953-7.59113-4.73126-9.42283-.00005-.00005-1.10331-.7371-8.99943-1.15733h0c-1.76783-12.72387-3.9747-14.26689-3.97475-14.26694-2.54344-1.77835-6.31806-1.20052-8.66632-.11286-4.96648,2.3004-4.39069,7.26947-7.73471,8.22036-4.61947,1.31356-13.02411-6.09155-13.85211-14.56892-.67539-6.91516,3.77981-13.63146,5.54692-13.27617,1.75207,.35229,5.94686-5.00298,8.2118-4.92038,1.54677,.05641,7.86668-2.69052,9.56681-2.47576,1.85668,.23458,7.97849,3.42925,8.23359,2.69936,1.77276-5.07201,1.25174-6.47929,2.75595-7.93028,2.66541-2.57115,7.02574-.78067,13.86612,.18057,14.07429,1.97776,16.5307-2.66296,23.74347,.48255,3.64355,1.58896,6.69229,5.8742,12.64108,14.3798,8.31932,11.89498,12.47896,17.84248,12.50565,24.77939,.02721,7.0744-3.3985,6.62532-4.90327,17.09838-1.67502,11.65826,1.88393,16.98908-2.00412,20.77661-3.00495,2.92729-9.11284,3.62215-12.32198,1.05303-5.49439-4.39856,1.69602-15.0123-4.38413-22.76671-3.73224-4.75997-11.23802-6.87793-14.67632-4.52502-3.88767,2.66043-1.74599,10.46929-4.47987,11.20979-2.3411,.63413-5.77242-4.58808-6.34311-5.45663Z" fill="#2f2e41"/><path d="M797.8501,237.33762c-1.15039,19.66992-5.71973,25.87988-7.32031,49.10986-.34961,5.1001-.55957,11.02002-.55957,18.08008,0,1.7998,.00977,3.54004,.00977,5.24023,0,3.61963-.06934,7.04004-.49023,10.50977-.31934,2.77002-.86914,5.56006-1.7793,8.5h-88.83008c-.00977-.02002-.00977-.04004-.02051-.06006-.51953-2.25977-.84961-4.41992-1.09961-6.48975-.08008-.66016-.15039-1.31006-.20996-1.9502-.08008-.75-.15039-1.48975-.21973-2.21973-.27051-2.91016-.54004-5.66016-1.18066-8.29004-.85938-3.63037-2.41992-7.05029-5.62012-10.3501-1.30957-1.3501-2.61914-2.3999-3.89941-3.31982-.25-.17041-.49023-.34033-.74023-.51025-3.54004-2.43018-6.88965-4.18018-9.79004-9.14014-.0498-.06982-.08984-.1499-.12988-.21973-.5-.87012-1.7998-3.15039-2.74023-6.18994-.99023-3.16016-1.58984-7.13037-.50977-11.18994,2.57031-9.62012,12.08984-10.58008,19.87012-20.30029,.83984-1.0498,1.66992-2.20996,2.45996-3.5,3.51953-5.72021,4.46973-10.75977,5.58984-16.75,.17969-.97021,.33984-1.93018,.46973-2.85986,.10059-.7002,.19043-1.39014,.26074-2.07031,.61914-5.70996,.31934-10.62988-.41016-15.02979-2.37988-14.41016-9.40039-23.33008-4.44043-36.26025,1.56055-4.05957,3.77051-7.10986,6-9.71973,4.71973-5.53027,9.57031-9.12012,8.73047-16.25977-.85059-7.2002-6.31055-8.19043-6.91992-14.48047-.31055-3.17969,.72949-6.52979,2.67969-9.81982v-.00977c6.24023-10.59033,21.82031-20.34033,31.71973-20.03027,1.83008,.05029,3.4502,.45996,4.7998,1.25,4.89062,2.87988,2.85059,9.16992,10.34082,17.99023,5.56934,6.5498,11.86914,9.16992,14.25977,10.40967,9.46973,4.94043,17.16992,19.51025,22.39941,38.14014,.04004,.14014,.08008,.27979,.12012,.43018,3.23047,11.66992,5.51074,24.91992,6.64062,38.35986,.47949,5.68994,.75977,11.41016,.81934,17.06982,.05078,4.52002-.0498,8.44043-.25977,11.93018Z" fill="#6c63ff"/><g><polygon points="731.33057 304.72776 729.52002 309.7678 728.38037 312.92747 725.73975 320.27756 722.68018 328.77756 703.01025 328.77756 706.31006 320.27756 707.84033 316.3176 710.38037 309.7678 714.64014 298.7678 731.33057 304.72776" fill="#ffb6b6"/><path d="M790.84033,167.82737c-.0498,.65039-.12012,1.37012-.19043,2.15039-.7793,7.93994-2.62012,22.1499-5.30957,38.35986-1.41992,8.5498-3.08008,17.66016-4.9502,26.70996-4.01953,19.52979-9.01953,38.76025-14.66992,51.3999-1.00977,2.28027-2.0498,4.34033-3.11035,6.16016-.80957,1.39014-1.66016,2.75977-2.5498,4.10986-2.87988,4.43018-6.11035,8.63037-9.45996,12.55029-.12988,.16992-.28027,.33008-.42969,.5-.54004,.63965-1.10059,1.27002-1.66016,1.8999-2.74023,3.08984-5.54004,5.96973-8.25,8.60986-3.2998,3.22021-6.48047,6.07031-9.33008,8.5h-31.94043l-.12988-.06006-4.59961-2.04004s1.30957-1.54004,3.5-4.44971c.4502-.59033,.92969-1.24023,1.4502-1.9502,.63965-.87012,1.33008-1.83008,2.06934-2.87012,1.54004-2.17969,3.29004-4.73975,5.16992-7.63965,3.64062-5.61035,7.79004-12.51025,11.98047-20.5,.48047-.93018,.96973-1.87012,1.45996-2.82031,.00977-.02979,.03027-.06006,.04004-.08984,.83008-1.62012,1.65039-3.29004,2.46973-4.99023,6.9502-14.45996,8.94043-26.45996,9.51074-30.34961,.7998-5.5,1.90918-13.19043,1.60938-21.65039-.2002-5.57959-1.00977-11.47998-2.93945-17.33984v-.00977c-.40039-1.22998-.85059-2.45996-1.36035-3.68018-.91016-2.18994-1.99023-4.3501-3.27051-6.47998-5.64941-9.37988-10.23926-9.77002-13.88965-19.99023-1.08008-3.02979-3.53027-9.86963-2.78027-17.08984v-.00977c.09082-.89014,.24023-1.79004,.44043-2.69043v-.00977c.0498-.25,.12012-.50977,.19043-.75977,.56934-2.20996,1.50977-4.40039,2.93945-6.48047,2.79004-4.03955,6.59961-6.43994,10.00977-7.86963l.01074-.01025c3.93945-1.63965,7.33984-1.98975,8-2.0498,14.60938-1.2998,25.93945,10.97998,32.12988,17.68994,2.38965,2.58984,4.58008,4.76025,6.58008,6.52979,15.56934,13.90039,19.83984,5.02002,20.94922,.43018,.16992-.70996,.26074-1.31982,.31055-1.72021Z" fill="#6c63ff"/><path d="M790.89014,167.30784c0,.0498-.00977,.21973-.0498,.5,.01953-.15039,.03027-.30029,.04004-.44043,0-.02979,0-.0498,.00977-.05957Z" fill="#6c63ff"/></g><path d="M711.47021,378.3176H175.42041c-4.98047,0-9.04004,4.0498-9.04004,9.03027,0,4.98975,4.05957,9.03955,9.04004,9.03955H711.47021c4.97949,0,9.03027-4.0498,9.03027-9.03955,0-4.98047-4.05078-9.03027-9.03027-9.03027Z" fill="#e6e6e6"/><path d="M592.51025,424.99778H294.37012c-4.97998,0-9.02979,4.0498-9.02979,9.02979s4.0498,9.04004,9.02979,9.04004h298.14014c4.97998,0,9.04004-4.06006,9.04004-9.04004s-4.06006-9.02979-9.04004-9.02979Z" fill="#e6e6e6"/><polygon points="235.06941 81.27476 268.85306 67.05703 283.34352 96.76248 247.84188 111.25294 235.06941 81.27476" fill="#ffb6b6"/><polygon points="235.06941 81.27476 268.85306 67.05703 283.34352 96.76248 247.84188 111.25294 235.06941 81.27476" opacity=".1"/><path d="M239.87213,69.95512l33.32807,38.39973s-23.18474,73.17685-46.36949,79.69756-65.93162,38.39973-65.93162,38.39973l-53.61472-34.77712,26.08284-38.39973s63.03352-86.21827,79.69756-86.21827c16.66403,0,26.80736,2.89809,26.80736,2.89809Z" fill="#6c63ff"/><path d="M194.84299,320.2779H117.26107l-4.90504-6.55697-20.02583-26.7711-4.60796-6.15845s-17.38856-31.87902-13.76594-60.85995c3.62262-28.98093,41.29783-35.50164,41.29783-35.50164h1.55049l46.12313,40.52979-2.75318,37.71872,14.60637,24.27153,20.06205,33.32807Z" fill="#2f2e41"/><polygon points="133.14986 320.2779 112.35603 320.2779 112.35603 289.48566 133.14986 320.2779" fill="#2f2e41"/><path d="M581.64421,273.53165l-2.58651,13.41818-6.41927,33.32807h-128.95789c1.00701-7.46988,2.38371-18.22178,3.85442-29.82865,.14496-1.15922,.29708-2.32569,.44195-3.49942,3.68789-29.17657,7.72344-62.19314,7.72344-62.19314l16.95386,2.05771,32.89328,3.98488,13.40368,1.62293,35.89291,4.35439c17.89569,2.16632,30.20533,19.04774,26.80011,36.75505Z" fill="#f2f2f2"/><path d="M764.14438,320.2779h-69.94541c1.06503-1.25341,1.66635-1.97793,1.66635-1.97793l20.96775-3.46324,43.20324-7.12937s1.97068,5.09342,4.10808,12.57055Z" fill="#2f2e41"/><polygon points="467.45495 95.76626 497.87302 138.78423 444.81392 140.36878 439.11853 99.94198 467.45495 95.76626" fill="#a0616a"/><polygon points="467.45495 95.76626 497.87302 138.78423 444.81392 140.36878 439.11853 99.94198 467.45495 95.76626" opacity=".1"/><path id="uuid-ae755ff6-bb09-410e-86b1-7d1b81a37005-68" d="M317.44601,184.89638c-3.90299-11.25913-12.8761-18.37174-20.04107-15.88668-7.16497,2.48507-9.80758,13.62542-5.90169,24.88804,1.49853,4.52036,4.05781,8.61612,7.46374,11.94459l17.13959,47.49655,22.1173-8.51819-19.24476-45.91882c.61482-4.72396,.08913-9.52647-1.53311-14.0055Z" fill="#a0616a"/><path d="M523.34731,162.97667l-.04173,43.84082-4.07898,16.19317-8.39004,33.30631-6.10768,30.63286-4.55003,22.82248-1.62293,8.15089c-1.22449,.81871-2.44173,1.60117-3.65888,2.3547h-105.97603c-6.02079-3.61536-9.38979-6.42652-9.38979-6.42652,0,0,1.66639-1.56499,3.57189-4.07907,3.21689-4.2457,7.10757-11.2011,4.72391-17.84501-.49992-1.39112-.63033-3.08648-.47821-4.97747,.97088-12.47627,14.05577-33.57447,14.05577-33.57447l-2.70971-31.31387-1.18823-13.72243,8.37769-66.9101,27.30728-15.87424,4.71449-.45614,46.53611-2.51407,19.23434,1.10845,.87664,.23915,18.79409,39.04457Z" fill="#ccc"/><g><polygon points="525.41397 320.2779 502.22923 320.2779 501.20763 309.77232 501.18587 309.56218 507.75009 309.11297 524.82716 307.9465 525.12415 314.23531 525.35604 319.06075 525.41397 320.2779" fill="#ffb6b6"/><path d="M531.12143,173.57645l9.73934,57.14315-7.948,56.23024-1.23891,8.75221-2.18807,15.45405-.67376,4.75291,.02176,.51438,.16663,3.85451h-27.53188l-1.01444-10.50559-.08685-.94192-2.07221-21.51831-.03617-.36226-4.39782-45.63046,8.62176-32.98031,.63767-2.42722v-.00716l3.75119-56.46939-2.90535-25.66256-.02892-.23915c.05793,.03626,.1087,.07252,.16663,.1087,.15221,.09419,.30433,.18838,.4492,.28983,16.92485,10.73748,27.01025,29.57509,26.56821,49.64435Z" fill="#ccc"/></g><path d="M415.74779,152.37881l-10.58745-10.95064s-22.66445,10.21757-23.79416,15.88619c-1.12971,5.66862-41.14649,88.92555-41.14649,88.92555l-17.40981-46.49871-22.66197,15.13029s18.1839,72.19186,35.18976,75.58099,74.00173-85.44603,74.00173-85.44603l6.40838-52.62764Z" fill="#ccc"/><path d="M845.64014,286.44749H21.16016c-11.66992,0-21.16016,9.5-21.16016,21.16992s9.49023,21.16016,21.16016,21.16016H845.64014c11.66992,0,21.16992-9.48975,21.16992-21.16016s-9.5-21.16992-21.16992-21.16992Z" fill="#e6e6e6"/><path d="M518.52213,221.93974l-1.60291,74.80242c-.15517,7.24107-6.06962,13.03015-13.31236,13.03015h-137.60256c-7.07149,0-12.90955-5.52763-13.29556-12.58857l-4.08931-74.80242c-.41702-7.62814,5.65604-14.04226,13.29556-14.04226h143.29478c7.46556,0,13.4723,6.13683,13.31236,13.60068Z" fill="#3f3d56"/><circle cx="296.38479" cy="66.40952" r="32.92181" fill="#ffb6b6"/><polygon points="241.32117 152.55077 244.94379 191.67503 269.57758 290.93471 248.29569 298.39388 212.34024 190.22598 207.37412 146.75458 241.32117 152.55077" fill="#ffb6b6"/><path d="M231.52213,221.93974l-1.60291,74.80242c-.15517,7.24107-6.06962,13.03015-13.31236,13.03015H79.0043c-7.07149,0-12.90955-5.52763-13.29556-12.58857l-4.08931-74.80242c-.41702-7.62814,5.65604-14.04226,13.29556-14.04226H218.20977c7.46556,0,13.4723,6.13683,13.31236,13.60068Z" fill="#3f3d56"/><ellipse cx="273.50003" cy="298.7779" rx="26" ry="11.5" fill="#ffb6b6"/><path d="M190.24228,158.53237l14.85273-79.15844s41.29783-5.79619,42.74687,7.96976-1.03544,81.04198-1.03544,81.04198l-56.56416-9.85329Z" fill="#6c63ff"/><path d="M283.09522,71.58597s20.36536-7.26838,28.95593-11.17911c8.59056-3.91073,25.65708,23.36637,26.03673,8.96042,.37965-14.40595-5.51755-20.44717-5.51755-20.44717,0,0-1.4726-31.51507-33.2233-27.57494,0,0,6.98375-15.76734-15.94076-18.20547-22.92451-2.43813-58.58934,52.92097-55.39531,61.19409,3.19403,8.27312,7.02295,15.11285-2.03888,23.95865-9.06183,8.8458-26.03033,58.76917-13.11998,72.20319,12.91035,13.43402,13.7575,19.26357,4.91188,27.62122-8.84562,8.35765-29.75425,26.53032-7.14719,29.68515,22.60706,3.15483-2.06828,.79851,14.7856-14.0263,16.85389-14.82481,41.44742-14.21933,32.26457-38.00455-9.18284-23.78522,6.77112-57.86925,4.77485-63.03995-1.99627-5.1707,4.4726-38.00496,4.4726-38.00496,0,0,15.05504-2.21189,16.1808,6.85974Z" fill="#2f2e41"/><g><circle cx="451.19104" cy="75.49881" r="35.83777" fill="#a0616a"/><path d="M454.05121,27.31743c-1.037,.60534-2.42604-.31053-2.75855-1.46432-.33251-1.1538,.05482-2.37882,.43892-3.51648l1.93363-5.72716c1.37137-4.06183,2.82687-8.26559,5.79693-11.35717,4.48283-4.66624,11.6071-5.85331,18.02037-4.99332,8.2359,1.1044,16.36189,5.56405,20.19135,12.93866,3.82945,7.37462,2.19911,17.66485-4.72046,22.26586,9.8619,11.30338,13.2996,23.9006,12.7568,38.89155-.5428,14.99095-16.87927,28.78752-27.53282,39.34806-2.37913-1.4422-4.54204-8.20095-3.23373-10.65626,1.3083-2.45531-.5662-5.29986,1.05409-7.56146,1.62029-2.2616,2.97587,1.33954,1.33779-.90922-1.03366-1.41901,3.00067-4.68353,1.46421-5.53283-7.43161-4.10794-9.9033-13.37111-14.57083-20.46464-5.62991-8.55611-15.26549-14.35039-25.46249-15.31167-5.61717-.52953-11.55014,.42955-16.15432,3.69062-4.60418,3.26106-7.5849,9.08853-6.51724,14.62867-2.76507-2.80756-4.14147-6.92204-3.62233-10.82826,.51914-3.90621,2.92243-7.51837,6.32483-9.50626-2.06881-6.84142-.29652-14.71105,4.50527-20.00518,4.80179-5.29413,24.28048-4.39244,31.29074-2.99911l-.54217-.93008Z" fill="#2f2e41"/><path d="M455.13987,53.47472c9.28487,1.0023,15.9888,9.04506,21.64971,16.47254,3.26282,4.28103,6.68059,9.00871,6.59868,14.39076-.08282,5.4414-3.72095,10.10859-5.45967,15.26538-2.84199,8.42894-.07214,18.45744,6.69308,24.23289-6.68479,1.26852-13.91123-3.74373-15.06525-10.44924-1.34341-7.80603,4.57394-15.34005,3.87313-23.22978-.61741-6.95094-6.09506-12.30052-10.75187-17.49772-4.65681-5.19721-9.03036-12.09377-6.88799-18.73508l-.64983-.44975Z" fill="#2f2e41"/></g><g><path id="uuid-aec20554-f6ec-4c5b-9d97-717cd04239bf-69" d="M593.94738,290.97732c-9.19677,5.23093-13.95249,14.21631-10.62254,20.06865,3.32996,5.85234,13.48327,6.3548,22.68262,1.12078,3.70344-2.04037,6.86441-4.93798,9.21841-8.4504l38.6872-22.65576-11.01865-17.92815-36.96889,24.23796c-4.22349,.22844-8.33082,1.46525-11.97815,3.60692Z" fill="#ffb6b6"/><path d="M724.9347,124.84081c-1.15613-.45818-11.30029-4.29973-20.56133,.77222-10.63836,5.8263-12.28141,19.12643-12.85772,23.79133-1.33125,10.77601,2.59074,13.19133,3.41866,24.10068,1.54899,20.4102,5.63336-2.8739-.88939,6.44247-2.2578,3.22481-25.31723,53.19804-38.03446,62.98648-24.73342,19.03731-40.43943,32.44418-40.43943,32.44418l17.93045,19.47744s28.33331-7.54935,53.37617-23.81018c25.68825-16.67995,38.53244-25.0199,48.46938-41.33509,.85574-1.40497,21.33113-36.17595,10.33482-74.6244-2.50819-8.76995-7.10385-24.83851-20.74714-30.24513Z" fill="#6c63ff"/></g><path d="M817.52213,221.93974l-1.60291,74.80242c-.15517,7.24107-6.06962,13.03015-13.31236,13.03015h-137.60256c-7.07149,0-12.90955-5.52763-13.29556-12.58857l-4.08931-74.80242c-.41702-7.62814,5.65604-14.04226,13.29556-14.04226h143.29478c7.46556,0,13.4723,6.13683,13.31236,13.60068Z" fill="#3f3d56"/></svg>
  <div class='sentense'>このチュートリアルは、ホームページを学習する人がもっとも簡単に、かつ効率的な構造で行うことができる内容になっています。
まずは、チュートリアルの内容に沿って、学習を進めていきましょう。

ホームページを制作する時に、HTMLとCSS程度が理解できていれば十分だと思って始めてみたら、意外と大変だったので、制作や学習をやめてしまった人にオススメの方法です。</div>

  <h2>Easy : 簡単ポイント</h2>
  <svg xmlns="http://www.w3.org/2000/svg" width="731.67004" height="550.61784" viewBox="0 0 731.67004 550.61784" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="317.68169" cy="132.62732" r="46.02133" fill="#ff6884"/><g><path d="M0,334.13393c0,.66003,.53003,1.19,1.19006,1.19H730.48004c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H1.19006c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#3f3d56"/><g><polygon points="466.98463 81.60598 470.81118 130.55703 526.26809 107.39339 494.98463 57.60598 466.98463 81.60598" fill="#a0616a"/><circle cx="465.32321" cy="55.18079" r="41.33858" fill="#a0616a"/><polygon points="387.98463 440.60598 394.98463 503.39339 345.98463 496.60598 361.98463 438.60598 387.98463 440.60598" fill="#a0616a"/><polygon points="578.98463 449.60598 585.98463 512.39339 536.98463 505.60598 552.98463 447.60598 578.98463 449.60598" fill="#a0616a"/><path d="M462.48463,260.10598c-.66897,0-54.14584,2.68515-89.47714,4.46286-16.72275,.84141-29.45202,15.31527-28.15459,32.00884l12.63173,162.5283,36,1,.87795-131,71.12205,4-3-73Z" fill="#2f2e41"/><path d="M619.48463,259.10598s9,69,2,76c-7,7-226.5-5.5-226.5-5.5,0,0,48.15354-69.53704,56.82677-71.51852,8.67323-1.98148,146.67323-8.98148,146.67323-8.98148l21,10Z" fill="#2f2e41"/><path id="uuid-395a52e4-5c72-4314-a9bf-6720c6920e4c-70" d="M335.12666,172.23337c-8.35907-11.69074-9.10267-25.48009-1.66174-30.79863,7.44093-5.31854,20.24665-.15219,28.60713,11.54383,3.40375,4.62627,5.65012,10.00041,6.55111,15.67279l34.79215,49.9814-19.8001,13.70807-35.7745-48.83421c-5.07753-2.68845-9.43721-6.55406-12.71405-11.27326Z" fill="#a0616a"/><path id="uuid-2bcb0f29-4cb0-4836-b3e1-c42200070018-71" d="M465.67391,331.01678c-12.74718,6.63753-26.5046,5.44058-30.72743-2.67249-4.22283-8.11308,2.6878-20.06802,15.44041-26.70621,5.05777-2.72156,10.69376-4.19231,16.43644-4.28916l54.36547-27.44139,10.79681,21.52636-53.36733,28.57487c-3.37375,4.65048-7.81238,8.42516-12.94437,11.00803Z" fill="#a0616a"/><path d="M464.98463,112.60598l51-21,96,148s-67,15-90,18c-23,3-49-9-49-9l-8-136Z" fill="#e6e6e6"/><path d="M526.98463,137.60598l-18.5-57.70866,24,18.20866s68,45,68,64c0,19,21,77,21,77,0,0,23.5,19.5,15.5,37.5-8,18,10.5,15.5,12.5,28.5,2,13-28.5,30.5-28.5,30.5,0,0-7.5-73.5-31.5-73.5-24,0-62.5-124.5-62.5-124.5Z" fill="#3f3d56"/><path d="M468.56831,111.13035l-25.08368,9.97563s4,70,8,76,18,38,18,38v10.42913s-28,8.57087-27,13.57087c1,5,66,19,66,19,0,0-13-40-21-53-8-13-18.91632-113.97563-18.91632-113.97563Z" fill="#3f3d56"/><path d="M527.48463,97.10598s56-3,68,27c12,30,22,128,22,128l-122,66.37402-21-32.37402,82-64-29-125Z" fill="#3f3d56"/><path d="M452.48463,121.10598s-29-4-34,30-1.82283,38.5-1.82283,38.5l-8.17717,19.5-27-30-26,17s47,76,66,74c19-2,47-57,47-57l-16-92Z" fill="#3f3d56"/><path d="M597.32321,270.14478l-14.83858,209.96121-38.5-1.5s-8.5-198.5-8.5-201.5c0-3,4-20,29-21,25-1,32.83858,14.03879,32.83858,14.03879Z" fill="#2f2e41"/><path d="M541.48463,484.10598s20-6,23-2c3,4,20,6,20,6l5,49s-14,10-16,12-55,4-56-8c-1-12,14-27,14-27l10-30Z" fill="#2f2e41"/><path d="M394.48463,470.10598s6-5,8,9c2,14,9,37-1,40-10,3-110,4-110-5v-9l9-7,18.00394-2.869s34.99606-32.131,38.99606-32.131c4,0,17,13,17,13l20-6Z" fill="#2f2e41"/><path d="M505.98463,77.60598s-20-24-28-22-3,5-3,5l-20-22s-16-6-31,13c0,0-9-16,0-25,9-9,12-8,14-13,2-5,16-9,16-9,0,0-.80315-7.19685,3.59843-3.59843s15.3937,3.59843,15.3937,3.59843c0,0,.06299-4,4.53543,0s9.47244,2,9.47244,2c0,0,0,6.92126,3.5,6.96063,3.5,.03937,9.5-4.96063,10.5-.96063s8,6,9,18-4,47-4,47Z" fill="#2f2e41"/></g></g><g><rect x="104.73115" y="107.21421" width="197.88719" height="35.06862" rx="17.53429" ry="17.53429" fill="#3f3d56"/><rect x="125.39658" y="30.60598" width="159.89619" height="175.34308" fill="#fff"/><path d="M286.29322,206.94876H124.39674V29.60598h161.89648V206.94876Zm-159.89648-2h157.89648V31.60598H126.39674V204.94876Z" fill="#3f3d56"/><rect x="91.78916" y="132.68071" width="227.11104" height="46.75816" rx="23.37905" ry="23.37905" fill="#3f3d56"/><ellipse cx="332.25967" cy="157.52098" rx="4.17484" ry="13.9857" fill="#3f3d56"/><ellipse cx="73.41988" cy="156.26853" rx="5.0098" ry="13.56821" fill="#3f3d56"/><rect x="74.67234" y="154.38985" width="28.80636" height="2.92238" fill="#3f3d56"/><rect x="306.37569" y="155.6423" width="23.37908" height="4.17484" fill="#3f3d56"/><path d="M302.33424,337.95657H129.43873c-13.66895,0-24.79004-11.12109-24.79004-24.79004v-123.84082c0-13.66895,11.12109-24.79004,24.79004-24.79004h172.89551c13.66895,0,24.78906,11.12109,24.78906,24.79004v123.84082c0,13.66895-11.12012,24.79004-24.78906,24.79004Z" fill="#3f3d56"/><circle cx="123.51791" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="131.03261" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="136.4599" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="146.06202" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="161.92639" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="177.79077" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="193.65514" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="209.51951" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="225.38389" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="241.24826" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="257.11264" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="272.97701" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="288.84139" cy="308.02379" r="5.42729" fill="#6c63ff"/><circle cx="152.61651" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="168.77312" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="184.92974" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="201.08635" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="217.24296" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="233.39957" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="249.55619" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="265.7128" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="281.86941" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="298.02602" cy="291.74193" r="5.42729" fill="#6c63ff"/><circle cx="147.31447" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="163.59633" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="179.87818" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="196.16004" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="212.4419" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="228.72376" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="245.00561" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="261.28747" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="277.56933" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="293.85119" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="310.13305" cy="275.87756" r="5.42729" fill="#6c63ff"/><circle cx="139.79977" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="156.08162" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="172.36348" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="188.64534" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="204.9272" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="221.20905" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="237.49091" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="253.77277" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="270.05463" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="286.33648" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="302.61834" cy="258.34325" r="5.42729" fill="#6c63ff"/><circle cx="128.11023" cy="187.78853" r="21.29166" fill="#6c63ff"/><circle cx="300.94841" cy="187.78853" r="21.29166" fill="#6c63ff"/><path d="M180.52231,179.43886h65.70058c2.9447,0,5.62784,1.69069,6.89874,4.34702l17.73104,37.05981c2.42863,5.0761-1.27158,10.94834-6.89874,10.94834h-96.13887c-5.24759,0-8.93627-5.16429-7.23423-10.12818l12.70725-37.05981c1.05987-3.09102,3.96655-5.16717,7.23423-5.16717Z" fill="#6c63ff"/></g><rect x="155.56764" y="56.60598" width="96.41699" height="2" fill="#3f3d56"/><rect x="155.56764" y="74.60598" width="96.41699" height="2" fill="#3f3d56"/><rect x="155.56764" y="92.60598" width="96.41699" height="2" fill="#3f3d56"/></svg>
  <div class='sentense'>このチュートリアルのポイントは、SQLなどのデータベースを使わなくても、簡単にデータを扱うことができるという点です。
また、多くのホームページ制作の教本で、様々なフレームワークが紹介されていますが、フレームワークを使わないという、斬新なホームページ構築方法です。</div>

  <h2>Feature : 特徴</h2>
  <svg xmlns="http://www.w3.org/2000/svg" width="428.04004" height="406.68778" viewBox="0 0 428.04004 406.68778" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M326.65781,67.37236v106c0,9.37402-7.62598,17-17,17h-106c-9.37402,0-17-7.62598-17-17V67.37236c0-9.37402,7.62598-17,17-17h106c9.37402,0,17,7.62598,17,17Zm-17,121c8.28427,0,15-6.71573,15-15v-53.44094c0-37.31184-30.24722-67.55906-67.55905-67.55906h-53.44095c-8.28427,0-15,6.71573-15,15v106c0,8.28427,6.71573,15,15,15h106Z" fill="#e6e6e6"/><g><path id="b-145" d="M213.46512,148.67319c5.64194,.91399,10.68677-1.25626,11.26784-4.84689s-3.52132-7.2413-9.16537-8.15485c-2.24957-.39584-4.56122-.24722-6.74156,.43347l-23.95399-3.57069-1.43602,11.27663,23.76685,2.32285c1.85466,1.33447,4.00198,2.20529,6.26225,2.53951l.00002-.00002Z" fill="#ffb6b6"/><path d="M127.86174,65.6504l-13.08166,7.25056s17.91828,54.1102,23.99198,63.33571,65.09514,15.8941,65.09514,15.8941l.8176-19.8326-37.91864-17.09318-38.90441-49.55461v.00002Z" fill="#2f2e41"/></g><g><polygon points="109.58914 396.12967 123.17653 396.12833 126.65781 343.37235 109.58641 343.72062 109.58914 396.12967" fill="#ffb6b6"/><path d="M156.14127,395.82145h0c.42307,.71252,.64629,3.01221,.64629,3.84082h0c0,2.54691-2.06464,4.61163-4.61162,4.61163h-42.07858c-1.73748,0-3.14607-1.40851-3.14607-3.14606v-1.75186s-2.08159-5.26526,2.20403-11.755c0,0,5.32645,5.08157,13.28554-2.87753l2.34706-4.25189,16.98951,12.42526,9.41704,1.15915c2.06026,.25357,3.88686-.03934,4.94662,1.74551h.00017l.00002-.00003Z" fill="#2f2e41"/></g><g><polygon points="94.58914 396.12967 108.17653 396.12833 114.64014 343.71921 94.58641 343.72062 94.58914 396.12967" fill="#ffb6b6"/><path d="M141.14127,395.82145h0c.42307,.71252,.64629,3.01221,.64629,3.84082h0c0,2.54691-2.06464,4.61163-4.61162,4.61163h-42.07858c-1.73748,0-3.14607-1.40851-3.14607-3.14606v-1.75186s-2.08159-5.26526,2.20403-11.755c0,0,5.32645,5.08157,13.28554-2.87753l2.34706-4.25189,16.98951,12.42526,9.41704,1.15915c2.06026,.25357,3.88686-.03934,4.94662,1.74551h.00017l.00002-.00003Z" fill="#2f2e41"/></g><circle cx="129.54844" cy="30.21052" r="22.51969" fill="#ffb6b6"/><path d="M155.15781,169.87236l-61.66929-7.6693s-5.33071,39.66928,2.66929,55.66928l-2,48s-10.81839,90.38583-2.4092,104.1929l35.9092-.6929,1.5-85.5,26-114v.00002Z" fill="#2f2e41"/><path d="M136.65781,66.37236l-23-16-4.66142,8s-18.33858,35-20.33858,46,6,59,6,59l58,11s4-20,2-24-17.5-74.5-17.5-74.5l-.5-9.5Z" fill="#6c63ff"/><path d="M130.15781,76.87236l-20-22.77559s-29,31.77559-28,45.77559-5,108-5,108h45.8457s17.1543-40,20.1543-61-13-70-13-70Z" fill="#2f2e41"/><path d="M137.15781,75.87236s20.5,66.5,20.5,72.5-4.5,60.5-4.5,60.5h-8.25591l5.75591-63.5-13.5-69.5Z" fill="#2f2e41"/><path d="M138.15781,17.87236l2,8-3,12h-4.58661s-8.41339-12-11.41339,1v7.24016l-7,6.75984s-2-5-8-9-13-27,5-32c0,0,13.30982-14.90699,25.94482-11.31329,1.33356,.3793,.2531,2.98253,1.55518,3.81329,.77975,.4975,3.95741-.93485,4.71646-.25293,.75688,.67999,.55428,2.37281,1.28354,3.25293,1.60535,1.93742,4.08276,3.46305,5.5,6.5,0,0,2,1-2,2s-10,2-10,2Z" fill="#2f2e41"/><path id="c-146" d="M123.81856,195.15035c3.84249,4.23108,9.14026,5.67809,11.83255,3.23227s1.75937-7.85753-2.08505-12.0896c-1.5125-1.71159-3.4129-3.03612-5.54222-3.86269l-16.50717-17.72163-8.15113,7.92358,17.13854,16.62917c.61867,2.19951,1.75521,4.21883,3.31448,5.8889Z" fill="#ffb6b6"/><path d="M108.61844,76.87236l-14.74907-2.48301s-19.71156,53.48301-20.71156,64.48301,41,53,41,53l13-15-19-37,.46063-63Z" fill="#2f2e41"/><g><path d="M403.784,315.42197c-.8443-1.42365-4.49683,.10068-5.16833-1.19135-.66913-1.28735,2.72449-3.24887,4.66333-7.7298,.34967-.80807,2.55298-5.90033,.92188-7.47162-3.09174-2.97836-17.23962,9.31259-22.19073,5.29041-1.08661-.88269-1.8457-2.64484-5.13428-5.50583-1.30829-1.13815-2.09937-1.65204-2.86499-1.46085-1.08636,.27127-1.17242,1.72522-2.33734,4.58398-1.74701,4.28729-2.78027,4.02841-3.79816,7.44897-.75562,2.53925-.58301,4.01553-1.47217,4.30313-1.25824,.40701-2.41638-2.28632-4.01099-2.04517-1.6272,.24612-2.61096,3.38205-2.92169,5.72998-.58313,4.40607,1.03497,7.31348,1.93182,10.37064,.97461,3.32236,1.55304,8.37494-.69769,15.52759l-22.27719,62.76614c4.91812-12.87943,19.15842-48.18536,25.14218-61.3053,1.72742-3.78745,3.6347-7.62909,7.55096-9.14526,3.77045-1.45978,8.94867-.58823,15.55029-2.17862,.771-.1857,2.91052-.73007,3.17981-1.98849,.22266-1.04037-1.03583-1.62109-.84247-2.59549,.25934-1.30701,2.73413-1.32306,5.77533-2.83096,2.14447-1.06332,3.48047-2.32785,4.62933-3.41531,.34637-.32785,5.49512-5.26166,4.37115-7.1568h-.00006Z" fill="#f2f2f2"/><path d="M316.13889,348.4647c-.94235,.0036-1.24805,2.23611-2.07593,2.1929-.82492-.04303-.80847-2.2746-2.4483-4.5191-.29572-.40475-2.1593-2.95547-3.40115-2.60825-2.35385,.65808-.4035,11.14828-3.80618,12.41782-.74673,.27863-1.83066,.14276-4.18369,.93134-.9361,.31372-1.41656,.55371-1.54364,.98465-.1803,.61145,.50845,1.07324,1.57544,2.46979,1.60016,2.09445,1.17496,2.52692,2.56009,4.01343,1.02826,1.10352,1.80264,1.44476,1.68723,1.96414-.16327,.73499-1.81934,.52631-2.16107,1.37851-.34869,.86966,.90659,2.25729,1.9693,3.08725,1.99429,1.5575,3.88812,1.6022,5.64737,2.04413,1.91183,.48026,4.55859,1.65421,7.41974,4.82266l24.37836,29.04382c-4.90228-6.12997-18.12189-23.30609-22.83472-30.0285-1.3605-1.94061-2.69568-3.98517-2.30984-6.34479,.37143-2.27176,2.29327-4.56177,3.41748-8.26077,.13132-.43201,.48145-1.63916-.05847-2.13443-.44638-.40945-1.09451,.04068-1.51697-.33539-.56665-.50443,.13953-1.72369,.27689-3.6514,.09686-1.35931-.13831-2.37988-.34055-3.25754-.06097-.26459-.99695-4.21518-2.25137-4.21036v.00009Z" fill="#f2f2f2"/><path d="M334.93851,352.68479l-.56775-5.06818,.2594-.38422c1.20035-1.77667,1.81216-3.51175,1.81949-5.15872,.00122-.26184-.01102-.52371-.02325-.79044-.04895-1.05719-.11011-2.37134,.5751-3.90329,.38422-.85406,1.46344-2.83142,3.08594-2.5867,.43683,.06119,.76721,.26184,1.01804,.49677,.03671-.05872,.07465-.11746,.11502-.18109,.50534-.77087,.90546-1.10123,1.29089-1.41937,.29611-.24472,.60202-.49677,1.08167-1.0939,.21045-.26184,.37442-.49188,.5127-.68521,.41971-.58487,.96786-1.28235,1.93451-1.27011,1.03271,.04895,1.57355,.90302,1.93207,1.46832,.63995,1.00824,.92993,1.73508,1.12204,2.21716,.06976,.17621,.14929,.37442,.18967,.43561,.33282,.48944,3.03824,.0318,4.05746-.13461,2.28937-.38177,4.27039-.71213,5.08655,.73172,.5849,1.03271,.15051,2.39825-1.33008,4.1676-.4613,.55063-.95197,.96909-1.38757,1.29703,.36096,.21536,.68396,.54572,.81494,1.06454h0c.30835,1.22849-.74762,2.45944-3.13733,3.66348-.59344,.30099-1.39246,.70236-2.51205,.89569-.52737,.09055-1.00214,.11258-1.40836,.12482-.00858,.23492-.06363,.48944-.20679,.75128-.41971,.77087-1.29333,1.13794-2.60995,1.04984-1.44876-.07587-2.64175-.35239-3.69406-.59467-.91891-.21045-1.7106-.3891-2.33218-.3475-1.15262,.09299-2.04099,1.01559-3.08347,2.21228l-2.6026,3.04187h-.00003Z" fill="#f2f2f2"/><path d="M337.5722,322.50885l-4.75842,1.83472-.43744-.15347c-2.02304-.71045-3.85654-.86215-5.45151-.45148-.2536,.06525-.50378,.14349-.7587,.22299-1.01019,.31549-2.26587,.70801-3.92151,.43378-.92361-.155-3.11002-.69739-3.28485-2.32889-.05161-.43805,.05869-.80853,.22232-1.11075-.06613-.0206-.13257-.04239-.20435-.06531-.87384-.2933-1.29489-.59653-1.70041-.88867-.31183-.22437-.63324-.45633-1.33249-.76883-.30667-.13715-.57077-.2374-.79285-.32211-.67221-.2576-1.4859-.61096-1.71924-1.5491-.2146-1.01135,.47437-1.75113,.93024-2.24133,.81296-.87476,1.44244-1.33963,1.86005-1.64774,.15274-.11215,.32431-.23938,.37326-.29395,.38901-.44608-.73987-2.94693-1.15936-3.89062-.94998-2.11765-1.77203-3.95007-.5824-5.10577,.85059-.8277,2.28165-.75391,4.36868,.22946,.64963,.30655,1.17886,.67502,1.60657,1.01321,.11676-.40378,.35437-.80005,.82303-1.05829h0c1.11011-.60986,2.56863,.09933,4.33945,2.10547,.44168,.49768,1.03259,1.16876,1.50357,2.2027,.22134,.48715,.36307,.9408,.47797,1.33066,.22943-.0513,.48956-.06259,.77917,.00946,.85211,.21045,1.4288,.9624,1.67752,2.2583,.2941,1.42062,.32922,2.64474,.36179,3.72409,.02951,.94226,.0575,1.75336,.25543,2.34406,.38232,1.09134,1.50006,1.71661,2.92206,2.42148l3.60254,1.74591-.00012,.00003Z" fill="#f2f2f2"/><path d="M334.93851,307.57785l-.56775-5.06818,.2594-.38422c1.20035-1.77667,1.81216-3.51175,1.81949-5.15872,.00122-.26184-.01102-.52371-.02325-.79044-.04895-1.05719-.11011-2.37134,.5751-3.90329,.38422-.85406,1.46344-2.83142,3.08594-2.5867,.43683,.06119,.76721,.26184,1.01804,.49677,.03671-.05872,.07465-.11746,.11502-.18109,.50534-.77087,.90546-1.10123,1.29089-1.41937,.29611-.24472,.60202-.49677,1.08167-1.0939,.21045-.26184,.37442-.49188,.5127-.68521,.41971-.58487,.96786-1.28235,1.93451-1.27011,1.03271,.04895,1.57355,.90302,1.93207,1.46832,.63995,1.00824,.92993,1.73508,1.12204,2.21716,.06976,.17621,.14929,.37442,.18967,.43561,.33282,.48944,3.03824,.0318,4.05746-.13461,2.28937-.38177,4.27039-.71213,5.08655,.73172,.5849,1.03271,.15051,2.39825-1.33008,4.1676-.4613,.55063-.95197,.96909-1.38757,1.29703,.36096,.21536,.68396,.54572,.81494,1.06454h0c.30835,1.22849-.74762,2.45944-3.13733,3.66348-.59344,.30099-1.39246,.70236-2.51205,.89569-.52737,.09055-1.00214,.11258-1.40836,.12482-.00858,.23492-.06363,.48944-.20679,.75128-.41971,.77087-1.29333,1.13794-2.60995,1.04984-1.44876-.07587-2.64175-.35239-3.69406-.59467-.91891-.21045-1.7106-.3891-2.33218-.3475-1.15262,.09299-2.04099,1.01559-3.08347,2.21228l-2.6026,3.04187h-.00003Z" fill="#f2f2f2"/><path d="M340.12415,405.9556l-1.0621-.66565-.25696-1.22604,.25696,1.22604-1.23828,.14194c-.01959-.11502-.08688-.37933-.18842-.79291-.55429-2.26611-2.24408-9.16235-3.65369-20.02304-.9838-7.58145-1.54053-15.37579-1.65555-23.17017-.11502-7.80658,.25452-13.71661,.55063-18.46661,.22391-3.5827,.49557-6.99411,.7623-10.31744,.70969-8.87848,1.379-17.26505,.88098-26.54974-.11011-2.07278-.3414-6.38721-2.862-10.97818-1.46222-2.66257-3.47626-5.02655-5.98709-7.02347l1.56131-1.96265c2.77145,2.20737,4.99963,4.8259,6.62338,7.78214,2.79471,5.09018,3.04678,9.79129,3.16791,12.05005,.50656,9.44867-.17007,17.91602-.88712,26.88013-.26431,3.31107-.53595,6.70779-.75864,10.27582-.29367,4.70599-.65952,10.56458-.54572,18.27084,.11258,7.70135,.66318,15.40027,1.63351,22.88629,1.39246,10.72366,3.0578,17.51712,3.60474,19.74896,.29123,1.1918,.35239,1.44141,.05383,1.91373v-.00003Z" fill="#f2f2f2"/><path d="M321.07507,292.09195c-.10278,0-.20679-.00244-.31201-.0098-2.13397-.11502-4.11008-1.39246-5.87451-3.79562-.82715-1.13062-1.25052-2.42029-2.09482-4.99231-.13092-.39645-.76721-2.40805-1.15387-5.17584-.2533-1.8085-.22147-2.56467,.13705-3.23276,.39767-.74396,1.04129-1.26276,1.76566-1.6127-.0318-.23984-.00613-.487,.0979-.73907,.42703-1.04495,1.56253-.9079,2.17679-.84183,.31079,.03915,.69867,.09055,1.11716,.06851,.65829-.0318,1.01193-.2276,1.54785-.52127,.5127-.28143,1.15018-.63138,2.09604-.82471,1.86478-.3891,3.42731,.1395,3.94244,.31323,2.71027,.90302,4.04645,3.01007,5.59308,5.44992,.30835,.48944,1.36676,2.271,2.06543,4.71332,.50412,1.76199,.43317,2.5451,.28143,3.12753-.30835,1.19669-1.03638,1.8819-2.88525,3.39429-1.93085,1.58334-2.89993,2.37625-3.73199,2.85834-1.93695,1.11838-3.15323,1.82071-4.76837,1.82071v.00006Z" fill="#f2f2f2"/></g><path d="M428.04004,404.81614h0c0,.46393-.3761,.84003-.84003,.84003H.84003c-.46393,0-.84003-.3761-.84003-.84003H0c0-.46393,.37609-.84003,.84003-.84003H427.20001c.46393,0,.84003,.3761,.84003,.84003Z" fill="#e6e6e6"/><g><path d="M235.70119,111.55896c-.06361,5.79864-10.01833,11.89083-19.13048,11.79088s-18.90891-8.40891-18.84531-14.20756c.06361-5.79864,1.69856-16.67849,10.81071-16.57854s27.22867,13.19657,27.16505,18.99521h.00002Z" fill="#ff6884"/><path d="M219.21487,159.69681l2.45532-33.54241s33.0748-6.63762,12.00934-46.37107l-27.97638-2.30699s-29.87663,34.17436,5.46219,49.06286l1.11975,33.13811c-7.73026,.38264-13.50699,2.09886-13.53033,4.22801-.02727,2.48514,7.78519,4.58566,17.44958,4.69167s17.52106-1.82265,17.54829-4.30779c.02444-2.22942-6.26682-4.14436-14.53778-4.59241l.00002,.00002Z" fill="#f2f2f2" isolation="isolate" opacity=".28"/><path d="M201.72502,167.527c-2.65265-.96936-3.98595-2.18752-3.97009-3.63216,.0423-3.85857,9.79778-4.9006,13.49774-5.15698l-1.06529-31.53011c-9.3699-4.08741-14.99242-9.94226-16.71628-17.40945-3.58313-15.52556,10.86249-32.27428,11.4791-32.98003l.33217-.37976,29.02496,2.39284,.25587,.4834c7.42407,14.00286,9.07076,25.5706,4.89413,34.38231-4.45921,9.40714-14.06956,12.53593-16.84329,13.26074l-2.32808,31.80389c6.91618,.48953,14.50369,2.18927,14.46672,5.53822-.0417,3.77872-9.65018,5.39436-18.55946,5.2973-4.75529-.05234-9.23248-.58115-12.6077-1.48808-.67879-.18254-1.29913-.37701-1.86047-.58215l-.00003,.00002Zm4.4119-89.01126c-2.10663,2.56249-13.78905,17.53971-10.71558,30.83804,1.60849,6.95923,7.03621,12.43098,16.13228,16.2634l.58961,.24873,1.1741,34.76183-.98305,.04832c-8.93925,.44304-5.45479,2.78075-5.46339,3.55117-.00333,.28368-6.32236,.99104-2.76624,1.95057,3.21745,.86488,7.51865,1.36888,12.11058,1.41872,10.88542,.11948,16.52609-2.27238,16.53764-3.31828,.00896-.83682-3.88834-3.05641-13.59196-3.58308l-1.01762-.05476,2.58521-35.3157,.74422-.15017c.11423-.02376,11.49796-2.43588,16.18582-12.35211,3.83369-8.10941,2.28346-18.90265-4.60776-32.08748l-18.4347,3.05113c-3.74857,.62042-7.37618-1.63436-8.47916-5.27031h0Z" fill="#3f3d56"/></g><g><path d="M341.41617,111.4002h-34.22061c-.86273,0-1.5647-.70199-1.5647-1.56472s.702-1.56439,1.5647-1.56439h34.22061c.86273,0,1.56439,.70166,1.56439,1.56439s-.70166,1.56471-1.56439,1.56472Z" fill="#3f3d56"/><path d="M341.41617,144.76383h-34.22061c-.86273,0-1.5647-.702-1.5647-1.56471s.702-1.56439,1.5647-1.56439h34.22061c.86273,0,1.56439,.70166,1.56439,1.56439s-.70166,1.56471-1.56439,1.56471Z" fill="#3f3d56"/><path d="M359.77933,128.09296h-70.9469c-.86273,0-1.5647-.70199-1.5647-1.56472s.702-1.56439,1.5647-1.56439h70.9469c.86273,0,1.56439,.70166,1.56439,1.56439s-.70166,1.5647-1.56439,1.5647v.00002Z" fill="#3f3d56"/></g><g><circle cx="271.65781" cy="97.37236" r="7" fill="#6c63ff"/><path d="M271.41019,100.37249c-.12833,0-.24844-.06454-.31921-.17235l-2.10104-3.19886c-.11584-.17633-.06677-.41322,.10956-.52899,.17657-.11577,.41321-.06671,.52899,.10955l1.75912,2.67833,2.68338-4.69549c.10471-.18323,.33798-.2469,.52115-.14213,.18323,.10464,.24683,.33799,.14212,.52115l-2.99237,5.23629c-.06592,.1154-.18701,.18814-.31982,.19237l-.01187,.00013Z" fill="#fff"/></g><g><circle cx="271.65781" cy="123.37236" r="7" fill="#6c63ff"/><path d="M271.41019,126.37249c-.12833,0-.24844-.06454-.31921-.17235l-2.10104-3.19886c-.11584-.17633-.06677-.41322,.10956-.52899,.17657-.11577,.41321-.06671,.52899,.10955l1.75912,2.67833,2.68338-4.69549c.10471-.18323,.33798-.2469,.52115-.14213,.18323,.10464,.24683,.33799,.14212,.52115l-2.99237,5.23629c-.06592,.1154-.18701,.18814-.31982,.19237l-.01187,.00013Z" fill="#fff"/></g><g><circle cx="271.65781" cy="149.37236" r="7" fill="#6c63ff"/><path d="M271.41019,152.3725c-.12833,0-.24844-.06454-.31921-.17235l-2.10104-3.19885c-.11584-.17633-.06677-.41322,.10956-.52899,.17657-.11577,.41321-.06671,.52899,.10954l1.75912,2.67833,2.68338-4.6955c.10471-.18323,.33798-.2469,.52115-.14214,.18323,.10464,.24683,.338,.14212,.52115l-2.99237,5.2363c-.06592,.1154-.18701,.18814-.31982,.19237l-.01187,.00012v.00002Z" fill="#fff"/></g><path d="M224.14654,206.9441c.05927-.03967,.13245-.06604,.18866-.10852,1.05487-.79712,1.18744-2.13647,.53522-3.24371-.76178-1.29333-2.11835-2.04193-3.57928-2.35004,.49561-1.20837,.46271-2.62683-.27429-3.83728-1.30804-2.14838-3.87488-2.20172-6.16876-2.19666,.01831-.57587,.11322-1.1582,.12811-1.72473,.02112-.80371-.09619-1.61224-.43805-2.34381-.75946-1.62494-2.64325-2.11066-4.17181-2.73322-1.58826-.64697-3.21881-1.50885-4.89343-1.89801-.46759-.10864-.92712-.15717-1.38507-.14545,.01019-1.11011-.2066-2.24359-.31201-3.33575-.17865-1.8512-.28424-3.70905-.34015-5.56775-.11639-3.86707-.02063-7.73602,.07574-11.60236,.04016-1.60938-2.45984-1.60858-2.5,0-.09277,3.72321-.18646,7.44897-.08789,11.1731,.04926,1.85907,.14478,3.71735,.31244,5.5697,.12311,1.36029,.5246,2.92133,.29065,4.31427-.08002,.00323-.14532-.00366-.1687-.0376-.25061-.36414-.64441-.59332-1.05859-.60992-.17224-.11426-.37891-.19373-.62921-.20978-3.41974-.21948-8.09778,.17969-9.3927,3.8526-3.85822,.19733-7.69971,3.48242-9.35999,6.77283-1.17334,2.32544-1.0744,5.44702,.58771,7.34296-2.0451,1.09296-3.65918,2.98505-3.95117,5.35223-.28247,2.28931,.81696,4.68854,2.71924,5.92853-.63702,.71637-1.16406,1.51837-1.38806,2.47021-.32458,1.37909,.08807,3.00208,1.2215,3.89868,1.34662,1.06525,3.08044,.61865,4.5658,.13226,.02655-.00867,.052-.02002,.07855-.02881-.00714,.02826-.01965,.05353-.02625,.08203-.22028,.95184-.13354,1.95605,.23157,2.85931-1.91608,1.25061-2.65808,4.28143-2.604,6.55682,.0401,1.68829,.79767,3.18243,2.34314,3.96021,1.08154,.54425,2.28564,.83789,3.50122,.94385-.11157,.2674-.22803,.53271-.33014,.80383-.31671,.84119-.73444,1.82709-.27533,2.69763,.50238,.95264,1.52155,.9895,2.46863,.99011,.83038,.00049,1.66077,.00104,2.49115,.00153-.09528,2.11957,.02191,4.32135,1.18073,6.14758,1.18188,1.86255,3.21246,3.00293,5.36938,3.30725,2.38904,.3371,4.79224-.38647,6.76654-1.73785,1.36151-.93195,2.91016-2.24438,3.65045-3.83289,1.51825,.76111,3.20422,1.16785,4.90918,.81848,1.83356-.37573,3.42169-1.71014,4.2912-3.34485,1.54645-2.90723,.80011-6.08008-1.09857-8.46497,1.59253-.5365,3.00739-1.58929,3.96875-2.99194,.87946-1.28314,1.08234-2.62073,.44165-4.05652-.13531-.30322-.29962-.59088-.48053-.86719,.23474-.0683,.46832-.14008,.67542-.25073,1.09753-.58643,1.0835-1.98962,.85895-3.04987-.12372-.58423-.37445-1.13788-.7027-1.64484,1.24261-.16974,2.43158-.56085,3.46796-1.39093,1.64044-1.31403,2.5545-3.38507,2.63519-5.46484,.11945-3.08008-1.77667-5.57782-4.33801-6.90521Zm-35.05536,13.11145c.04681-.03607,.05988-.04535,0,0h0Zm.30432,18.07306l.04706,.04706c-.16504,.01117-.18683-.00336-.04706-.04706Zm34.80707-20.68677c-1.46472,1.11584-3.48346,.92615-5.20862,.82544-.32928-.01923-.5871,.07404-.78113,.22955-.33533,.13269-.61218,.38226-.7218,.78113-.16479,.59998,.20374,1.42444,.87305,1.53766,.9679,.1637,1.78131,.75262,2.15936,1.68042,.0899,.22058,.15759,.4729,.18024,.70789,.00031,.00293-.00006,.01422,.00006,.0191-.29205,.03284-.62311,.12939-.89343,.13568-.41644,.00958-.8291-.02386-1.24152-.07928-1.28027-.172-1.62659,1.75793-.63086,2.32935,.80316,.46088,1.47595,1.12909,1.85083,1.9884,.3222,.73846-.03217,1.32123-.50653,1.91528-.9762,1.22266-2.4469,1.89905-3.9826,1.94019-.38745-.17926-.75464-.10394-1.04016,.10938-.42017,.20807-.7218,.67224-.7218,1.13654,0,.57776,.38184,.99585,.88379,1.16327,2.08777,1.57477,3.42682,4.41522,2.13831,6.90753-1.57013,3.03705-4.81909,2.41754-7.21649,.77948-.78925-.53925-1.89752,.17682-1.88092,1.07935,.03064,1.66382-2.23047,3.271-3.5174,4.02417-1.45844,.85352-3.16742,1.30682-4.84729,.95038-1.54218-.32721-2.92767-1.23431-3.5705-2.71405-.7309-1.68256-.53223-3.6701-.40497-5.448,.0675-.94257-.76575-1.32477-1.48914-1.15991-.15045-.06781-.32568-.10687-.52606-.10699l-2.07764-.00128-.94092-.00061,.0116-.03455c.09985-.28625,.20593-.57037,.31824-.85205,.23285-.58398,.50659-1.14984,.79462-1.70837,.3952-.76666-.07355-1.97504-1.07935-1.88092-1.69904,.15894-5.07117,.04749-5.27258-2.21149-.09277-1.03973,.13147-2.2113,.43396-3.19781,.20178-.65808,.76703-1.72009,1.6004-1.67621,.49347,.13373,1.01349,.09772,1.48022-.23578,.5307-.37921,.83734-1.10706,.44843-1.71027-.28436-.4411-.89227-.737-1.41693-.58429-.03186-.05328-.06519-.10602-.09393-.16077-.0097-.01837-.05707-.12994-.07745-.17285-.01764-.0556-.04181-.12976-.0459-.14362-.02625-.08856-.0484-.17828-.06744-.26862-.00659-.03149-.01251-.104-.01569-.14081-.00555-.15472-.01123-.30725-.0069-.46344,.00079-.02777-.00049-.0274-.00079-.0415,.00201-.00574,.00189,.00043,.00482-.01062,.02173-.08252,.03418-.16791,.05591-.25067,.02106-.08032,.04553-.15967,.0722-.23828,.00568-.01666,.01666-.04346,.02777-.06995,.13397-.27356,.28619-.52899,.46289-.77753l.00482-.00574c.06628-.07629,.13135-.15308,.19977-.22754,.10352-.11255,.21106-.22144,.32129-.32751,.24823-.23883,.51086-.46222,.78052-.67645l.05627-.04401c.06122-.04608,.12238-.09229,.1839-.13794,.15063-.11169,.30261-.22162,.4549-.33112,.49695-.35742,.7915-1.01709,.50458-1.59662-.17755-.75586-.96503-1.36218-1.78955-.80933-1.70654,1.14435-3.95203,2.47894-6.05389,2.63507-1.02185,.07587-1.28241-.81897-1.0061-1.68622,.31165-.97809,1.27405-1.72375,2.00903-2.37994,.66907-.59729,.35938-1.92065-.55157-2.08923-1.92688-.35651-3.16791-2.35284-2.76605-4.27039,.45825-2.18683,2.5929-3.4801,4.64166-3.85699,1.22729-.22577,1.15594-2.13605,0-2.41071-2.9483-.70044-2.31494-4.35339-1.02057-6.2121,1.64648-2.36432,4.51251-4.76178,7.5437-4.4964,.4978,.04358,1.11829-.41614,1.20538-.91772,.56628-3.26257,4.5517-3.1131,7.10828-2.95148,.7702,.7771,1.76343,.8595,2.79657,.68213,.28131,.02014,.5719-.03723,.82343-.1853,.07581-.02045,.15173-.03809,.22736-.05975,1.56396-.44891,3.22833,.57721,4.64642,1.15479,.79004,.32184,1.58008,.64362,2.37012,.96545,.57275,.23328,1.44788,.44604,1.81238,.9881,.34326,.51038,.26703,1.25848,.22662,1.83588-.06561,.93719-.13239,1.80682,.0249,2.7417,.04285,.2547,.19037,.46552,.38892,.62073,.20117,.24268,.50488,.4082,.91333,.41345,1.35101,.0174,3.40729-.31702,4.5907,.46979,1.4068,.93524,.74628,2.63824-.55652,3.20093-1.34528,.58112-.35681,2.59198,.9632,2.28473,1.22156-.28436,2.68207-.06274,3.62598,.83057,.09723,.09198,.30377,.37775,.36432,.41577-.11353-.00195-.58893,.18555-.7077,.2265-.81152,.27985-1.62927,.54297-2.4436,.81439-1.30267,.43414-1.12823,2.46027,.33228,2.45532,3.00989-.01007,6.19495,2.1687,6.03699,5.44501-.0658,1.36359-.67944,2.75262-1.78198,3.59253Z" fill="#3f3d56"/><path d="M347.30352,216.46023c.05927-.03967,.13245-.06604,.18866-.10852,1.05487-.79712,1.18744-2.13647,.53522-3.24371-.76178-1.29333-2.11835-2.04193-3.57928-2.35004,.49561-1.20837,.46271-2.62683-.27429-3.83728-1.30804-2.14838-3.87488-2.20172-6.16876-2.19666,.01831-.57587,.11322-1.1582,.12811-1.72473,.02112-.80371-.09619-1.61224-.43805-2.34381-.75946-1.62494-2.64325-2.11066-4.17181-2.73322-1.58826-.64697-3.21881-1.50885-4.89343-1.89801-.46759-.10864-.92712-.15717-1.38507-.14545,.01019-1.11011-.2066-2.24359-.31201-3.33575-.17865-1.8512-.28424-3.70905-.34015-5.56775-.11639-3.86707-.02063-7.73602,.07574-11.60236,.04016-1.60938-2.45984-1.60858-2.5,0-.09277,3.72321-.18646,7.44897-.08789,11.1731,.04926,1.85907,.14478,3.71735,.31244,5.5697,.12311,1.36029,.5246,2.92133,.29065,4.31427-.08002,.00323-.14532-.00366-.1687-.0376-.25061-.36414-.64441-.59332-1.05859-.60992-.17224-.11426-.37891-.19373-.62921-.20978-3.41974-.21948-8.09778,.17969-9.3927,3.8526-3.85822,.19733-7.69971,3.48242-9.35999,6.77283-1.17334,2.32544-1.0744,5.44702,.58771,7.34296-2.0451,1.09296-3.65918,2.98505-3.95117,5.35223-.28247,2.28931,.81696,4.68854,2.71924,5.92853-.63702,.71637-1.16406,1.51837-1.38806,2.47021-.32458,1.37909,.08807,3.00208,1.2215,3.89868,1.34662,1.06525,3.08044,.61865,4.5658,.13226,.02655-.00867,.052-.02002,.07855-.02881-.00714,.02826-.01965,.05353-.02625,.08203-.22028,.95184-.13354,1.95605,.23157,2.85931-1.91608,1.25061-2.65808,4.28143-2.604,6.55682,.0401,1.68829,.79767,3.18243,2.34314,3.96021,1.08154,.54425,2.28564,.83789,3.50122,.94385-.11157,.2674-.22803,.53271-.33014,.80383-.31671,.84119-.73444,1.82709-.27533,2.69763,.50238,.95264,1.52155,.9895,2.46863,.99011,.83038,.00049,1.66077,.00104,2.49115,.00153-.09528,2.11957,.02191,4.32135,1.18073,6.14758,1.18188,1.86255,3.21246,3.00293,5.36938,3.30725,2.38904,.3371,4.79224-.38647,6.76654-1.73785,1.36151-.93195,2.91016-2.24438,3.65045-3.83289,1.51825,.76111,3.20422,1.16785,4.90918,.81848,1.83356-.37573,3.42169-1.71014,4.2912-3.34485,1.54645-2.90723,.80011-6.08008-1.09857-8.46497,1.59253-.5365,3.00739-1.58929,3.96875-2.99194,.87946-1.28314,1.08234-2.62073,.44165-4.05652-.13531-.30322-.29962-.59088-.48053-.86719,.23474-.0683,.46832-.14008,.67542-.25073,1.09753-.58643,1.0835-1.98962,.85895-3.04987-.12372-.58423-.37445-1.13788-.7027-1.64484,1.24261-.16974,2.43158-.56085,3.46796-1.39093,1.64044-1.31403,2.5545-3.38507,2.63519-5.46484,.11945-3.08008-1.77667-5.57782-4.33801-6.90521Zm-35.05536,13.11145c.04681-.03607,.05988-.04535,0,0h0Zm.30432,18.07306l.04706,.04706c-.16504,.01117-.18683-.00336-.04706-.04706Zm34.80707-20.68677c-1.46472,1.11584-3.48346,.92615-5.20862,.82544-.32928-.01923-.5871,.07404-.78113,.22955-.33533,.13269-.61218,.38226-.7218,.78113-.16479,.59998,.20374,1.42444,.87305,1.53766,.9679,.1637,1.78131,.75262,2.15936,1.68042,.0899,.22058,.15759,.4729,.18024,.70789,.00031,.00293-.00006,.01422,.00006,.0191-.29205,.03284-.62311,.12939-.89343,.13568-.41644,.00958-.8291-.02386-1.24152-.07928-1.28027-.172-1.62659,1.75793-.63086,2.32935,.80316,.46088,1.47595,1.12909,1.85083,1.9884,.3222,.73846-.03217,1.32123-.50653,1.91528-.9762,1.22266-2.4469,1.89905-3.9826,1.94019-.38745-.17926-.75464-.10394-1.04016,.10938-.42017,.20807-.7218,.67224-.7218,1.13654,0,.57776,.38184,.99585,.88379,1.16327,2.08777,1.57477,3.42682,4.41522,2.13831,6.90753-1.57013,3.03705-4.81909,2.41754-7.21649,.77948-.78925-.53925-1.89752,.17682-1.88092,1.07935,.03064,1.66382-2.23047,3.271-3.5174,4.02417-1.45844,.85352-3.16742,1.30682-4.84729,.95038-1.54218-.32721-2.92767-1.23431-3.5705-2.71405-.7309-1.68256-.53223-3.6701-.40497-5.448,.0675-.94257-.76575-1.32477-1.48914-1.15991-.15045-.06781-.32568-.10687-.52606-.10699l-2.07764-.00128-.94092-.00061,.0116-.03455c.09985-.28625,.20593-.57037,.31824-.85205,.23285-.58398,.50659-1.14984,.79462-1.70837,.3952-.76666-.07355-1.97504-1.07935-1.88092-1.69904,.15894-5.07117,.04749-5.27258-2.21149-.09277-1.03973,.13147-2.2113,.43396-3.19781,.20178-.65808,.76703-1.72009,1.6004-1.67621,.49347,.13373,1.01349,.09772,1.48022-.23578,.5307-.37921,.83734-1.10706,.44843-1.71027-.28436-.4411-.89227-.737-1.41693-.58429-.03186-.05328-.06519-.10602-.09393-.16077-.0097-.01837-.05707-.12994-.07745-.17285-.01764-.0556-.04181-.12976-.0459-.14362-.02625-.08856-.0484-.17828-.06744-.26862-.00659-.03149-.01251-.104-.01569-.14081-.00555-.15472-.01123-.30725-.0069-.46344,.00079-.02777-.00049-.0274-.00079-.0415,.00201-.00574,.00189,.00043,.00482-.01062,.02173-.08252,.03418-.16791,.05591-.25067,.02106-.08032,.04553-.15967,.0722-.23828,.00568-.01666,.01666-.04346,.02777-.06995,.13397-.27356,.28619-.52899,.46289-.77753l.00482-.00574c.06628-.07629,.13135-.15308,.19977-.22754,.10352-.11255,.21106-.22144,.32129-.32751,.24823-.23883,.51086-.46222,.78052-.67645l.05627-.04401c.06122-.04608,.12238-.09229,.1839-.13794,.15063-.11169,.30261-.22162,.4549-.33112,.49695-.35742,.7915-1.01709,.50458-1.59662-.17755-.75586-.96503-1.36218-1.78955-.80933-1.70654,1.14435-3.95203,2.47894-6.05389,2.63507-1.02185,.07587-1.28241-.81897-1.0061-1.68622,.31165-.97809,1.27405-1.72375,2.00903-2.37994,.66907-.59729,.35938-1.92065-.55157-2.08923-1.92688-.35651-3.16791-2.35284-2.76605-4.27039,.45825-2.18683,2.5929-3.4801,4.64166-3.85699,1.22729-.22577,1.15594-2.13605,0-2.41071-2.9483-.70044-2.31494-4.35339-1.02057-6.2121,1.64648-2.36432,4.51251-4.76178,7.5437-4.4964,.4978,.04358,1.11829-.41614,1.20538-.91772,.56628-3.26257,4.5517-3.1131,7.10828-2.95148,.7702,.7771,1.76343,.8595,2.79657,.68213,.28131,.02014,.5719-.03723,.82343-.1853,.07581-.02045,.15173-.03809,.22736-.05975,1.56396-.44891,3.22833,.57721,4.64642,1.15479,.79004,.32184,1.58008,.64362,2.37012,.96545,.57275,.23328,1.44788,.44604,1.81238,.9881,.34326,.51038,.26703,1.25848,.22662,1.83588-.06561,.93719-.13239,1.80682,.0249,2.7417,.04285,.2547,.19037,.46552,.38892,.62073,.20117,.24268,.50488,.4082,.91333,.41345,1.35101,.0174,3.40729-.31702,4.5907,.46979,1.4068,.93524,.74628,2.63824-.55652,3.20093-1.34528,.58112-.35681,2.59198,.9632,2.28473,1.22156-.28436,2.68207-.06274,3.62598,.83057,.09723,.09198,.30377,.37775,.36432,.41577-.11353-.00195-.58893,.18555-.7077,.2265-.81152,.27985-1.62927,.54297-2.4436,.81439-1.30267,.43414-1.12823,2.46027,.33228,2.45532,3.00989-.01007,6.19495,2.1687,6.03699,5.44501-.0658,1.36359-.67944,2.75262-1.78198,3.59253Z" fill="#e6e6e6"/></svg>
  <div class='sentense'>サイト内の管理をするために、次のような場合にはJSONファイルを活用します。
・動的に更新される内容（お知らせや、新着情報など）
・ポートフォリオの作品集など
・日別のデータを表示するテーブル表など</div>

  <h2>Turnover : つまづきポイント</h2>
  <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="860.13137" height="571.14799" viewBox="0 0 860.13137 571.14799" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M605.66974,324.95306c-7.66934-12.68446-16.7572-26.22768-30.98954-30.36953-16.482-4.7965-33.4132,4.73193-47.77473,14.13453a1392.15692,1392.15692,0,0,0-123.89338,91.28311l.04331.49238q46.22556-3.1878,92.451-6.37554c22.26532-1.53546,45.29557-3.2827,64.97195-13.8156,7.46652-3.99683,14.74475-9.33579,23.20555-9.70782,10.51175-.46217,19.67733,6.87923,26.8802,14.54931,42.60731,45.371,54.937,114.75409,102.73817,154.61591A1516.99453,1516.99453,0,0,0,605.66974,324.95306Z" transform="translate(-169.93432 -164.42601)" fill="#f2f2f2"/><path d="M867.57068,709.78146c-4.71167-5.94958-6.6369-7.343-11.28457-13.34761q-56.7644-73.41638-106.70791-151.79237-33.92354-53.23-64.48275-108.50439-14.54864-26.2781-28.29961-52.96872-10.67044-20.6952-20.8646-41.63793c-1.94358-3.98782-3.8321-7.99393-5.71122-12.00922-4.42788-9.44232-8.77341-18.93047-13.43943-28.24449-5.31686-10.61572-11.789-21.74485-21.55259-28.877a29.40493,29.40493,0,0,0-15.31855-5.89458c-7.948-.51336-15.28184,2.76855-22.17568,6.35295-50.43859,26.301-97.65922,59.27589-140.3696,96.79771A730.77816,730.77816,0,0,0,303.32241,496.24719c-1.008,1.43927-3.39164.06417-2.37419-1.38422q6.00933-8.49818,12.25681-16.81288A734.817,734.817,0,0,1,500.80465,303.06436q18.24824-11.82581,37.18269-22.54245c6.36206-3.60275,12.75188-7.15967,19.25136-10.49653,6.37146-3.27274,13.13683-6.21547,20.41563-6.32547,24.7701-.385,37.59539,27.66695,46.40506,46.54248q4.15283,8.9106,8.40636,17.76626,16.0748,33.62106,33.38729,66.628,10.68453,20.379,21.83683,40.51955,34.7071,62.71816,73.77854,122.897c34.5059,53.1429,68.73651,100.08874,108.04585,149.78472C870.59617,709.21309,868.662,711.17491,867.57068,709.78146Z" transform="translate(-169.93432 -164.42601)" fill="#e4e4e4"/><path d="M414.91613,355.804c-1.43911-1.60428-2.86927-3.20856-4.31777-4.81284-11.42244-12.63259-23.6788-25.11847-39.3644-32.36067a57.11025,57.11025,0,0,0-23.92679-5.54622c-8.56213.02753-16.93178,2.27348-24.84306,5.41792-3.74034,1.49427-7.39831,3.1902-11.00078,4.99614-4.11634,2.07182-8.15927,4.28118-12.1834,6.50883q-11.33112,6.27044-22.36816,13.09089-21.9606,13.57221-42.54566,29.21623-10.67111,8.11311-20.90174,16.75788-9.51557,8.03054-18.64618,16.492c-1.30169,1.20091-3.24527-.74255-1.94358-1.94347,1.60428-1.49428,3.22691-2.97938,4.84955-4.44613q6.87547-6.21546,13.9712-12.19257,12.93921-10.91827,26.54851-20.99312,21.16293-15.67614,43.78288-29.22541,11.30361-6.76545,22.91829-12.96259c2.33794-1.24675,4.70318-2.466,7.09572-3.6211a113.11578,113.11578,0,0,1,16.86777-6.86632,60.0063,60.0063,0,0,1,25.476-2.50265,66.32706,66.32706,0,0,1,23.50512,8.1314c15.40091,8.60812,27.34573,21.919,38.97,34.90915C418.03337,355.17141,416.09875,357.12405,414.91613,355.804Z" transform="translate(-169.93432 -164.42601)" fill="#e4e4e4"/><path d="M730.47659,486.71092l36.90462-13.498,18.32327-6.70183c5.96758-2.18267,11.92082-4.66747,18.08988-6.23036a28.53871,28.53871,0,0,1,16.37356.20862,37.73753,37.73753,0,0,1,12.771,7.91666,103.63965,103.63965,0,0,1,10.47487,11.18643c3.98932,4.79426,7.91971,9.63877,11.86772,14.46706q24.44136,29.89094,48.56307,60.04134,24.12117,30.14991,47.91981,60.556,23.85681,30.48041,47.38548,61.21573,2.88229,3.76518,5.75966,7.53415c1.0598,1.38809,3.44949.01962,2.37472-1.38808Q983.582,650.9742,959.54931,620.184q-24.09177-30.86383-48.51647-61.46586-24.42421-30.60141-49.17853-60.93743-6.16706-7.55761-12.35445-15.09858c-3.47953-4.24073-6.91983-8.52718-10.73628-12.47427-7.00539-7.24516-15.75772-13.64794-26.23437-13.82166-6.15972-.10214-12.121,1.85248-17.844,3.92287-6.16968,2.232-12.32455,4.50571-18.48633,6.75941l-37.16269,13.59243-9.29067,3.3981c-1.64875.603-.93651,3.2619.73111,2.652Z" transform="translate(-169.93432 -164.42601)" fill="#e4e4e4"/><path d="M366.37741,334.52609c-18.75411-9.63866-42.77137-7.75087-60.00508,4.29119a855.84708,855.84708,0,0,1,97.37056,22.72581C390.4603,353.75916,380.07013,341.5635,366.37741,334.52609Z" transform="translate(-169.93432 -164.42601)" fill="#f2f2f2"/><path d="M306.18775,338.7841l-3.61042,2.93462c1.22123-1.02713,2.4908-1.99013,3.795-2.90144C306.31073,338.80665,306.24935,338.79473,306.18775,338.7841Z" transform="translate(-169.93432 -164.42601)" fill="#f2f2f2"/><path d="M831.54929,486.84576c-3.6328-4.42207-7.56046-9.05222-12.99421-10.84836l-5.07308.20008A575.436,575.436,0,0,0,966.74929,651.418Q899.14929,569.13192,831.54929,486.84576Z" transform="translate(-169.93432 -164.42601)" fill="#f2f2f2"/><path d="M516.08388,450.36652A37.4811,37.4811,0,0,0,531.015,471.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544" transform="translate(-169.93432 -164.42601)" fill="#f2f2f2"/><path d="M749.08388,653.36652A37.4811,37.4811,0,0,0,764.015,674.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544" transform="translate(-169.93432 -164.42601)" fill="#f2f2f2"/><path d="M284.08388,639.36652A37.4811,37.4811,0,0,0,299.015,660.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544" transform="translate(-169.93432 -164.42601)" fill="#f2f2f2"/><circle cx="649.24878" cy="51" r="51" fill="#6c63ff"/><path d="M911.21851,176.29639c-24.7168-3.34094-52.93512,10.01868-59.34131,34.12353a21.59653,21.59653,0,0,0-41.09351,2.10871l2.82972,2.02667a372.27461,372.27461,0,0,0,160.65881-.72638C957.07935,195.76,935.93537,179.63727,911.21851,176.29639Z" transform="translate(-169.93432 -164.42601)" fill="#f0f0f0"/><path d="M805.21851,244.29639c-24.7168-3.34094-52.93512,10.01868-59.34131,34.12353a21.59653,21.59653,0,0,0-41.09351,2.10871l2.82972,2.02667a372.27461,372.27461,0,0,0,160.65881-.72638C851.07935,263.76,829.93537,247.63727,805.21851,244.29639Z" transform="translate(-169.93432 -164.42601)" fill="#f0f0f0"/><path d="M1020.94552,257.15423a.98189.98189,0,0,1-.30176-.04688C756.237,173.48919,523.19942,184.42376,374.26388,208.32122c-20.26856,3.251-40.59131,7.00586-60.40381,11.16113-5.05811,1.05957-10.30567,2.19532-15.59668,3.37793-6.31885,1.40723-12.55371,2.85645-18.53223,4.30567q-3.873.917-7.59472,1.84863c-3.75831.92773-7.57178,1.89453-11.65967,2.957-4.56787,1.17774-9.209,2.41309-13.79737,3.67188a.44239.44239,0,0,1-.05127.01465l.00049.001c-5.18261,1.415-10.33789,2.8711-15.32324,4.3252-2.69824.77929-5.30371,1.54785-7.79932,2.30664-.2788.07715-.52587.15136-.77636.22754l-.53614.16308c-.31054.09473-.61718.1875-.92382.27539l-.01953.00586.00048.001-.81152.252c-.96777.293-1.91211.5791-2.84082.86426-24.54492,7.56641-38.03809,12.94922-38.17139,13.00195a1,1,0,1,1-.74414-1.85644c.13428-.05274,13.69336-5.46289,38.32764-13.05762.93213-.28613,1.87891-.57226,2.84961-.86621l.7539-.23438c.02588-.00976.05176-.01757.07813-.02539.30518-.08691.60986-.17968.91943-.27343l.53711-.16309c.26758-.08105.53125-.16113.80127-.23535,2.47852-.75391,5.09278-1.52441,7.79785-2.30664,4.98731-1.45508,10.14746-2.91113,15.334-4.32813.01611-.00586.03271-.00976.04883-.01464v-.001c4.60449-1.2627,9.26269-2.50293,13.84521-3.68457,4.09424-1.06348,7.915-2.03223,11.67969-2.96192q3.73755-.93017,7.60937-1.85253c5.98536-1.45118,12.23291-2.90235,18.563-4.3125,5.29932-1.1836,10.55567-2.32227,15.62207-3.38282,19.84326-4.16211,40.19776-7.92285,60.49707-11.17871C523.09591,182.415,756.46749,171.46282,1021.2463,255.2011a.99974.99974,0,0,1-.30078,1.95313Z" transform="translate(-169.93432 -164.42601)" fill="#ccc"/><path d="M432.92309,584.266a6.72948,6.72948,0,0,0-1.7-2.67,6.42983,6.42983,0,0,0-.92-.71c-2.61-1.74-6.51-2.13-8.99,0a5.81012,5.81012,0,0,0-.69.71q-1.11,1.365-2.28,2.67c-1.28,1.46-2.59,2.87-3.96,4.24-.39.38-.78.77-1.18,1.15-.23.23-.46.45-.69.67-.88.84-1.78,1.65-2.69,2.45-.48.43-.96.85-1.45,1.26-.73.61-1.46,1.22-2.2,1.81-.07.05-.14.1-.21.16-.02.01-.03.03-.05.04-.01,0-.02,0-.03.02a.17861.17861,0,0,0-.07.05c-.22.15-.37.25-.48.34.04-.01995.08-.05.12-.07-.18.14-.37.28-.55.42-1.75,1.29-3.54,2.53-5.37,3.69a99.21022,99.21022,0,0,1-14.22,7.55c-.33.13-.67.27-1.01.4a85.96993,85.96993,0,0,1-40.85,6.02q-2.13008-.165-4.26-.45c-1.64-.24-3.27-.53-4.89-.86a97.93186,97.93186,0,0,1-18.02-5.44,118.65185,118.65185,0,0,1-20.66-12.12c-1-.71-2.01-1.42-3.02-2.11,1.15-2.82,2.28-5.64,3.38-8.48.55-1.37,1.08-2.74,1.6-4.12,4.09-10.63,7.93-21.36,11.61-32.13q5.58-16.365,10.53-32.92.51-1.68.99-3.36,2.595-8.745,4.98-17.53c.15-.56994.31-1.12994.45-1.7q.68994-2.52,1.35-5.04c1-3.79-1.26-8.32-5.24-9.23a7.63441,7.63441,0,0,0-9.22,5.24c-.43,1.62-.86,3.23-1.3,4.85q-3.165,11.74494-6.66,23.41-.51,1.68-1.02,3.36-7.71,25.41-16.93,50.31-1.11,3.015-2.25,6.01c-.37.98-.74,1.96-1.12,2.94-.73,1.93-1.48,3.86-2.23,5.79-.43006,1.13-.87006,2.26-1.31,3.38-.29.71-.57,1.42-.85,2.12a41.80941,41.80941,0,0,0-8.81-2.12l-.48-.06a27.397,27.397,0,0,0-7.01.06,23.91419,23.91419,0,0,0-17.24,10.66c-4.77,7.51-4.71,18.25,1.98,24.63,6.89,6.57,17.32,6.52,25.43,2.41a28.35124,28.35124,0,0,0,10.52-9.86,50.56939,50.56939,0,0,0,2.74-4.65c.21.14.42.28.63.43.8.56,1.6,1.13,2.39,1.69a111.73777,111.73777,0,0,0,14.51,8.91,108.35887,108.35887,0,0,0,34.62,10.47c.27.03.53.07.8.1,1.33.17,2.67.3,4.01.41a103.78229,103.78229,0,0,0,55.58-11.36q2.175-1.125,4.31-2.36,3.315-1.92,6.48-4.08c1.15-.78,2.27-1.57,3.38-2.4a101.04244,101.04244,0,0,0,13.51-11.95q2.35491-2.475,4.51-5.11005a8.0612,8.0612,0,0,0,2.2-5.3A7.5644,7.5644,0,0,0,432.92309,584.266Zm-165.59,23.82c.21-.15.42-.31.62-.47C267.89312,607.766,267.60308,607.936,267.33312,608.086Zm3.21-3.23c-.23.26-.44.52-.67.78a23.36609,23.36609,0,0,1-2.25,2.2c-.11.1-.23.2-.35.29a.00976.00976,0,0,0-.01.01,3.80417,3.80417,0,0,0-.42005.22q-.645.39-1.31994.72a17.00459,17.00459,0,0,1-2.71.75,16.79925,16.79925,0,0,1-2.13.02h-.02a14.82252,14.82252,0,0,1-1.45-.4c-.24-.12-.47-.25994-.7-.4-.09-.08-.17005-.16-.22-.21a2.44015,2.44015,0,0,1-.26995-.29.0098.0098,0,0,0-.01-.01c-.11005-.2-.23005-.4-.34-.6a.031.031,0,0,1-.01-.02c-.08-.25-.15-.51-.21-.77a12.51066,12.51066,0,0,1,.01-1.37,13.4675,13.4675,0,0,1,.54-1.88,11.06776,11.06776,0,0,1,.69-1.26c.02-.04.12-.2.23-.38.01-.01.01-.01.01-.02.15-.17.3-.35.46-.51.27-.3.56-.56.85-.83a18.02212,18.02212,0,0,1,1.75-1.01,19.48061,19.48061,0,0,1,2.93-.79,24.98945,24.98945,0,0,1,4.41.04,30.30134,30.30134,0,0,1,4.1,1.01,36.94452,36.94452,0,0,1-2.77,4.54C270.6231,604.746,270.58312,604.806,270.54308,604.856Zm-11.12-3.29a2.18029,2.18029,0,0,1-.31.38995A1.40868,1.40868,0,0,1,259.42309,601.566Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><path d="M402.86309,482.136q-.13494,4.71-.27,9.42-.285,10.455-.59,20.92-.315,11.775-.66,23.54-.165,6.07507-.34,12.15-.465,16.365-.92,32.72c-.03,1.13-.07,2.25-.1,3.38q-.225,8.11506-.45,16.23-.255,8.805-.5,17.61-.18,6.59994-.37,13.21-1.34994,47.895-2.7,95.79a7.64844,7.64844,0,0,1-7.5,7.5,7.56114,7.56114,0,0,1-7.5-7.5q.75-26.94,1.52-53.88.675-24.36,1.37-48.72.225-8.025.45-16.06.345-12.09.68-24.18c.03-1.13.07-2.25.1-3.38.02-.99.05-1.97.08-2.96q.66-23.475,1.32-46.96.27-9.24.52-18.49.3-10.545.6-21.08c.09-3.09.17005-6.17.26-9.26a7.64844,7.64844,0,0,1,7.5-7.5A7.56116,7.56116,0,0,1,402.86309,482.136Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><path d="M814.29118,484.2172a893.23753,893.23753,0,0,1-28.16112,87.94127c-3.007,7.94641-6.08319,15.877-9.3715,23.71185l.75606-1.7916a54.58274,54.58274,0,0,1-5.58953,10.61184q-.22935.32119-.46685.63642,1.16559-1.49043.4428-.589c-.25405.30065-.5049.60219-.7676.89546a23.66436,23.66436,0,0,1-2.2489,2.20318q-.30139.25767-.61188.5043l.93783-.729c-.10884.25668-.87275.59747-1.11067.74287a18.25362,18.25362,0,0,1-2.40479,1.21853l1.7916-.75606a19.0859,19.0859,0,0,1-4.23122,1.16069l1.9938-.26791a17.02055,17.02055,0,0,1-4.29785.046l1.99379.2679a14.0022,14.0022,0,0,1-3.40493-.917l1.79159.75606a12.01175,12.01175,0,0,1-1.67882-.89614c-.27135-.17688-1.10526-.80852-.01487.02461,1.13336.86595.14562.07434-.08763-.15584-.19427-.19171-.36962-.4-.55974-.595-.88208-.90454.99637,1.55662.39689.49858a18.18179,18.18179,0,0,1-.87827-1.63672l.75606,1.7916a11.92493,11.92493,0,0,1-.728-2.65143l.26791,1.9938a13.65147,13.65147,0,0,1-.00316-3.40491l-.2679,1.9938a15.96371,15.96371,0,0,1,.99486-3.68011l-.75606,1.7916a16.72914,16.72914,0,0,1,1.17794-2.29848,6.72934,6.72934,0,0,1,.72851-1.0714c.04915.01594-1.26865,1.51278-.56937.757.1829-.19767.354-.40592.539-.602.29617-.31382.61354-.60082.92561-.89791,1.04458-.99442-1.46188.966-.25652.17907a19.0489,19.0489,0,0,1,2.74925-1.49923l-1.79159.75606a20.31136,20.31136,0,0,1,4.99523-1.33984l-1.9938.2679a25.62828,25.62828,0,0,1,6.46062.07647l-1.9938-.2679a33.21056,33.21056,0,0,1,7.89178,2.2199l-1.7916-.75606c5.38965,2.31383,10.16308,5.74926,14.928,9.118a111.94962,111.94962,0,0,0,14.50615,8.9065,108.38849,108.38849,0,0,0,34.62226,10.47371,103.93268,103.93268,0,0,0,92.58557-36.75192,8.07773,8.07773,0,0,0,2.1967-5.3033,7.63232,7.63232,0,0,0-2.1967-5.3033c-2.75154-2.52586-7.94926-3.239-10.6066,0a95.63575,95.63575,0,0,1-8.10664,8.72692q-2.01736,1.914-4.14232,3.70983-1.21364,1.02588-2.46086,2.01121c-.3934.31081-1.61863,1.13807.26309-.19744-.43135.30614-.845.64036-1.27058.95478a99.26881,99.26881,0,0,1-20.33215,11.56478l1.79159-.75606a96.8364,96.8364,0,0,1-24.17119,6.62249l1.99379-.2679a97.64308,97.64308,0,0,1-25.75362-.03807l1.99379.2679a99.79982,99.79982,0,0,1-24.857-6.77027l1.7916.75607a116.02515,116.02515,0,0,1-21.7364-12.59112,86.87725,86.87725,0,0,0-11.113-6.99417,42.8238,42.8238,0,0,0-14.43784-4.38851c-9.43884-1.11076-19.0571,2.56562-24.24624,10.72035-4.77557,7.50482-4.71394,18.24362,1.97369,24.62519,6.8877,6.5725,17.31846,6.51693,25.43556,2.40567,7.81741-3.95946,12.51288-12.18539,15.815-19.94186,7.43109-17.45514,14.01023-35.31364,20.1399-53.263q9.09651-26.63712,16.49855-53.81332.91661-3.36581,1.80683-6.73869c1.001-3.78869-1.26094-8.32-5.23829-9.22589a7.63317,7.63317,0,0,0-9.22589,5.23829Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><path d="M889.12382,482.13557l-2.69954,95.79311-2.68548,95.29418-1.5185,53.88362a7.56465,7.56465,0,0,0,7.5,7.5,7.64923,7.64923,0,0,0,7.5-7.5l2.69955-95.79311,2.68548-95.29418,1.51849-53.88362a7.56465,7.56465,0,0,0-7.5-7.5,7.64923,7.64923,0,0,0-7.5,7.5Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><path d="M629.52566,700.36106h2.32885V594.31942h54.32863v-2.32291H631.85451V547.25214H673.8102q-.92256-1.17339-1.89893-2.31694H631.85451V515.38231c-.7703-.32846-1.54659-.64493-2.32885-.9435V544.9352h-45.652V507.07c-.78227.03583-1.55258.08959-2.3289.15527v37.71h-36.4201V516.68409c-.78227.34636-1.55258.71061-2.31694,1.0928V544.9352h-30.6158v2.31694h30.6158v44.74437h-30.6158v2.32291h30.6158V700.36106h2.31694V594.31942a36.41283,36.41283,0,0,1,36.4201,36.42007v69.62157h2.3289V594.31942h45.652Zm-84.401-108.36455V547.25214h36.4201v44.74437Zm38.749,0V547.25214h.91362a44.74135,44.74135,0,0,1,44.73842,44.74437Z" transform="translate(-169.93432 -164.42601)" opacity="0.2"/><path d="M615.30309,668.566a63.05854,63.05854,0,0,1-20.05,33.7c-.74.64-1.48,1.26-2.25,1.87q-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43l-.27.03-.19-1.64-.76-6.64a37.623,37.623,0,0,1-3.3-32.44c2.64-7.12,7.42-13.41,12.12-19.65,6.49-8.62,12.8-17.14,13.03-27.65a60.54415,60.54415,0,0,1,7.9,13.33,16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32a63.99025,63.99025,0,0,1,2.45,12.18A61.18851,61.18851,0,0,1,615.30309,668.566Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><path d="M648.50311,642.356c-5.9,4.29-9.35,10.46-12.03,17.26a16.62776,16.62776,0,0,0-7.17,4.58c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39-2.68,8.04-5.14,16.36-9.88,23.15a36.98942,36.98942,0,0,1-12.03,10.91,38.49166,38.49166,0,0,1-4.02,1.99q-7.62.585-14.95,1.25-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43q-.015-.825,0-1.65a63.30382,63.30382,0,0,1,15.25-39.86c.45-.52.91-1.03,1.38-1.54a61.7925,61.7925,0,0,1,16.81-12.7A62.65425,62.65425,0,0,1,648.50311,642.356Z" transform="translate(-169.93432 -164.42601)" fill="#6c63ff"/><path d="M589.16308,699.526l-1.15,3.4-.58,1.73c-1.53.14-3.04.29-4.54.43l-.27.03c-1.66.17-3.31.34-4.96.51-.43-.5-.86-1.01-1.28-1.53a62.03045,62.03045,0,0,1,8.07-87.11c-1.32,6.91.22,13.53,2.75,20.1-.27.11-.53.22-.78.34a16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32q.705.075,1.41.15c.07.15.13.29.2.44,2.85,6.18,5.92,12.39,7.65,18.83a43.66591,43.66591,0,0,1,1.02,4.91A37.604,37.604,0,0,1,589.16308,699.526Z" transform="translate(-169.93432 -164.42601)" fill="#6c63ff"/><path d="M689.82123,554.48655c-8.60876-16.79219-21.94605-30.92088-37.63219-41.30357a114.2374,114.2374,0,0,0-52.5626-18.37992q-3.69043-.33535-7.399-.39281c-2.92141-.04371-46.866,12.63176-61.58712,22.98214a114.29462,114.29462,0,0,0-35.333,39.527,102.49972,102.49972,0,0,0-12.12557,51.6334,113.56387,113.56387,0,0,0,14.70268,51.47577,110.47507,110.47507,0,0,0,36.44425,38.74592C549.66655,708.561,565.07375,734.51,583.1831,735.426c18.24576.923,39.05418-23.55495,55.6951-30.98707a104.42533,104.42533,0,0,0,41.72554-34.005,110.24964,110.24964,0,0,0,19.599-48.94777c2.57368-18.08313,1.37415-36.73271-4.80123-54.01627a111.85969,111.85969,0,0,0-5.58024-12.9833c-1.77961-3.50519-6.996-4.7959-10.26142-2.69063a7.67979,7.67979,0,0,0-2.69064,10.26142q1.56766,3.08773,2.91536,6.27758l-.75606-1.7916a101.15088,101.15088,0,0,1,6.87641,25.53816l-.26791-1.99379a109.2286,109.2286,0,0,1-.06613,28.68252l.26791-1.9938a109.73379,109.73379,0,0,1-7.55462,27.67419l.75606-1.79159a104.212,104.212,0,0,1-6.67151,13.09835q-1.92308,3.18563-4.08062,6.22159c-.63172.8881-1.28287,1.761-1.939,2.63114-.85625,1.13555,1.16691-1.48321.28228-.36941-.15068.18972-.30049.3801-.45182.5693q-.68121.85165-1.3818,1.68765a93.61337,93.61337,0,0,1-10.17647,10.38359q-1.36615,1.19232-2.77786,2.33115c-.46871.37832-.932.77269-1.42079,1.12472.01861-.0134,1.57956-1.19945.65556-.511-.2905.21644-.57851.43619-.86961.65184q-2.90994,2.1558-5.97433,4.092a103.48509,103.48509,0,0,1-14.75565,7.7131l1.7916-.75606a109.21493,109.21493,0,0,1-27.59663,7.55154l1.9938-.26791a108.15361,108.15361,0,0,1-28.58907.0506l1.99379.2679a99.835,99.835,0,0,1-25.09531-6.78448l1.79159.75607a93.64314,93.64314,0,0,1-13.41605-6.99094q-3.17437-2-6.18358-4.24743c-.2862-.21359-.56992-.43038-.855-.64549-.9155-.69088.65765.50965.67021.51787a19.16864,19.16864,0,0,1-1.535-1.22469q-1.45353-1.18358-2.86136-2.4218a101.98931,101.98931,0,0,1-10.49319-10.70945q-1.21308-1.43379-2.37407-2.91054c-.33524-.4263-.9465-1.29026.40424.5289-.17775-.23939-.36206-.47414-.54159-.71223q-.64657-.85751-1.27568-1.72793-2.203-3.048-4.18787-6.24586a109.29037,109.29037,0,0,1-7.8054-15.10831l.75606,1.7916a106.58753,106.58753,0,0,1-7.34039-26.837l.26791,1.9938a97.86589,97.86589,0,0,1-.04843-25.63587l-.2679,1.9938A94.673,94.673,0,0,1,505.27587,570.55l-.75606,1.7916a101.55725,101.55725,0,0,1,7.19519-13.85624q2.0655-3.32328,4.37767-6.4847.52528-.71832,1.06244-1.42786c.324-.4279,1.215-1.49333-.30537.38842.14906-.18449.29252-.37428.43942-.56041q1.26882-1.60756,2.59959-3.1649A107.40164,107.40164,0,0,1,530.772,536.21508q1.47408-1.29171,2.99464-2.52906.6909-.56218,1.39108-1.11284c.18664-.14673.37574-.29073.56152-.43858-1.99743,1.58953-.555.43261-.10157.09288q3.13393-2.34833,6.43534-4.46134a103.64393,103.64393,0,0,1,15.38655-8.10791l-1.7916.75606c7.76008-3.25839,42.14086-10.9492,48.394-10.10973l-1.99379-.26791A106.22471,106.22471,0,0,1,628.768,517.419l-1.7916-.75606a110.31334,110.31334,0,0,1,12.6002,6.32922q3.04344,1.78405,5.96742,3.76252,1.38351.93658,2.73809,1.915.677.48917,1.34626.98885c.24789.185.49386.37253.74135.558,1.03924.779-1.43148-1.1281-.34209-.26655a110.84261,110.84261,0,0,1,10.36783,9.2532q2.401,2.445,4.63686,5.04515,1.14659,1.33419,2.24643,2.70757c.36436.45495,1.60506,2.101.08448.08457.37165.49285.74744.98239,1.11436,1.47884a97.97718,97.97718,0,0,1,8.39161,13.53807c1.79317,3.49775,6.98675,4.80186,10.26142,2.69064A7.67666,7.67666,0,0,0,689.82123,554.48655Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><path d="M602.43116,676.88167a3.77983,3.77983,0,0,1-2.73939-6.55137c.09531-.37882.16368-.65085.259-1.02968q-.05115-.12366-.1029-.24717c-3.47987-8.29769-25.685,14.83336-26.645,22.63179a30.029,30.029,0,0,0,.52714,10.32752A120.39223,120.39223,0,0,1,562.77838,652.01a116.20247,116.20247,0,0,1,.72078-12.96332q.59712-5.293,1.65679-10.51055a121.78667,121.78667,0,0,1,24.1515-51.61646c6.87378.38364,12.898-.66348,13.47967-13.98532.10346-2.36972,1.86113-4.42156,2.24841-6.756-.65621.08607-1.32321.13985-1.97941.18285-.20444.0107-.41958.02149-.624.03228l-.07709.00346a3.745,3.745,0,0,1-3.07566-6.10115q.425-.52305.85054-1.04557c.43036-.53793.87143-1.06507,1.30171-1.60292a1.865,1.865,0,0,0,.13986-.16144c.49494-.61322.98971-1.21564,1.48465-1.82885a10.82911,10.82911,0,0,0-3.55014-3.43169c-4.95941-2.90463-11.80146-.89293-15.38389,3.59313-3.59313,4.486-4.27083,10.77947-3.023,16.3843a43.39764,43.39764,0,0,0,6.003,13.3828c-.269.34429-.54872.67779-.81765,1.02209a122.57366,122.57366,0,0,0-12.79359,20.2681c1.0163-7.93863-11.41159-36.60795-16.21776-42.68052-5.773-7.29409-17.61108-4.11077-18.62815,5.13562q-.01476.13428-.02884.26849,1.07082.60411,2.0964,1.28237a5.12707,5.12707,0,0,1-2.06713,9.33031l-.10452.01613c-9.55573,13.64367,21.07745,49.1547,28.74518,41.18139a125.11045,125.11045,0,0,0-6.73449,31.69282,118.66429,118.66429,0,0,0,.08607,19.15986l-.03231-.22593C558.90163,648.154,529.674,627.51374,521.139,629.233c-4.91675.99041-9.75952.76525-9.01293,5.72484q.01788.11874.03635.2375a34.4418,34.4418,0,0,1,3.862,1.86105q1.07082.60423,2.09639,1.28237a5.12712,5.12712,0,0,1-2.06712,9.33039l-.10464.01606c-.07528.01079-.13987.02157-.21507.03237-4.34967,14.96631,27.90735,39.12,47.5177,31.43461h.01081a125.07484,125.07484,0,0,0,8.402,24.52806H601.679c.10765-.3335.20443-.67779.3013-1.01129a34.102,34.102,0,0,1-8.30521-.49477c2.22693-2.73257,4.45377-5.48664,6.6807-8.21913a1.86122,1.86122,0,0,0,.13986-.16135c1.12956-1.39849,2.26992-2.78627,3.39948-4.18476l.00061-.00173a49.95232,49.95232,0,0,0-1.46367-12.72495Zm-34.37066-67.613.0158-.02133-.0158.04282Zm-6.64832,59.93237-.25822-.58084c.01079-.41957.01079-.83914,0-1.26942,0-.11845-.0215-.23672-.0215-.35508.09678.74228.18285,1.48464.29042,2.22692Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><circle cx="95.24878" cy="439" r="11" fill="#3f3d56"/><circle cx="227.24878" cy="559" r="11" fill="#3f3d56"/><circle cx="728.24878" cy="559" r="11" fill="#3f3d56"/><circle cx="755.24878" cy="419" r="11" fill="#3f3d56"/><circle cx="723.24878" cy="317" r="11" fill="#3f3d56"/><path d="M434.1831,583.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,434.1831,583.426Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><circle cx="484.24878" cy="349" r="11" fill="#3f3d56"/><path d="M545.1831,513.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,545.1831,513.426Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><path d="M403.1831,481.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,403.1831,481.426Z" transform="translate(-169.93432 -164.42601)" fill="#3f3d56"/><circle cx="599.24878" cy="443" r="11" fill="#3f3d56"/><circle cx="426.24878" cy="338" r="16" fill="#3f3d56"/><path d="M1028.875,735.26666l-857.75.30733a1.19068,1.19068,0,1,1,0-2.38136l857.75-.30734a1.19069,1.19069,0,0,1,0,2.38137Z" transform="translate(-169.93432 -164.42601)" fill="#cacaca"/></svg>
  <div class='sentense'>ホームページを作る時に難しい事ってどんなモノがあるでしょう？
・デザインがなんかダサくなってしまう。
・便利に使えるプラグインなどをあまり知らない。
・見る人に伝える文章が上手に書けない。
・やりたい事が上手にコーディングできない。
・Javascriptが難しい。</div>
</section>

お問い合わせページ

ページを新規追加して、「お問い合わせ」という名前で登録をする。

<style>
form{
  display:block;
  width:90%;
  max-width:800px;
  border-radius:8px;
  box-shadow:4px 4px 20px rgba(0,0,0,0.3);
  margin:10px auto;
  padding: 0 20px;
}

form > *{
  /* margin:20px 10px; */
  padding:20px 0;
}
form > * + *{
  border-top:1px solid rgb(200,200,200);
}

form .group{
  display:flex;
}
form .group > *{
  margin:0 10px;
}


form .group .require{
  width:70px;
}
form .group .require::before{
  content:"";
  display:inline-block;
  width:60px;
  padding:5px;
  border-radius:4px;
  color:white;
  text-align:center;
  font-size:0.8rem;
}
form .group[data-require="1"] .require::before{
  content:"必須";
  background-color:red;
}
form .group[data-require="0"] .require::before{
  content:"任意";
  background-color:#337ab7;
}

form .group .caption{
  display:inline-block;
  width:120px;
  padding:5px 0;
  white-space:pre-wrap;
  word-break:break-all;
  font-size:0.9rem;
}
form .group .form{
  width:calc(100% - 120px - 60px);
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-size:0;
}
form .group .form *{
  width:100%;
  font-size:16px;
}

form .group .form .inputs{
  display:flex;
}
form .group .form .inputs > *{
  display:inline-block;
  --size-input-margin:4px;
  margin:0 var(--size-input-margin);
}

form .group .form *::placeholder{
  font-size:0.9rem;
  color:rgb(180,180,180)
}
form .group .form input[type="text"],
form .group .form select,
form .group .form textarea{
  -webkit-appearance : none;
  appearance : none;
  
  border:1px solid rgb(180,180,180);
  border-radius:4px;
  padding:5px;
}
form .group .form textarea{
  height:150px;
  resize:vertical;
}

form .submit-area{
  text-align:center;
}
form .submit-area button{
  display:inline-block;
  padding:10px 20px;
  background-color:#337ab7;
  border:1px solid #2e6da4;
  color:white;
  border-radius:4px;
  cursor:pointer;
}
form .submit-area button:hover{
  background-color:#2e6da4;
}

form .group .form .caution{
  display:none;
  color:red;
  font-size:0.9rem;
  margin-top:5px;
  padding:0 5px;
}
form .group[data-caution='1'] .form .caution{
  display:block;
}

.contact .summary{
  width:100%;
  max-width:500px;
  margin:20px auto 50px;
  border:1px dashed rgb(200,200,200);
  padding:20px;
}

@media (max-width: 768px){
  form{
    padding:0 40px;
  }
  form .group{
    display:block;
  }
  form .group > *{
    width:100%!important;
    margin:0;
  }
  form .group .caption{
    white-space:normal;
  }
}

@media (min-width: 600px) and (max-width: 700px){
  form .group{
    --size-require-width:60px;
    display:block;
  }
  form .group .require,
  form .group .caption{
    display:inline-block;
    margin-bottom:10px;
  }
  form .group .require{
    width:var(--size-require-width);
  }
  form .group .caption{
    width:calc(90% - var(--size-require-width));
    white-space:normal;
  }
  form .group .form{
    width:calc(100% - 20px);
  }
}
</style>
<div class='contact'>
  <h1>お問い合わせフォーム</h1>

  <form method='post' name='contact' 
  action='https://docs.google.com/forms/d/e/1FAIpQLScb_u1Up7PIEiAv0sIZI9pYVbPFp2CxjJ6qU5uDAAVq7jMtfQ/formResponse'
  target='complete'  
  onsubmit='window.submitted=true'>

    <div class='group' data-require="1">
      <div class='require'></div>
      <span class='caption'>何に関するお問い合わせですか？</span>
      <div class='form'>
        <div class='inputs'>
          <select name='entry.972129934' required>
            <option value='このサイトの内容について'>このサイトの内容について</option>
            <option value='誤字脱字の報告'>誤字脱字の報告</option>
            <option value='技術的な質問'>技術的な質問</option>
            <option value='その他'>その他</option>
          </select>
        </div>
      </div>
    </div>

    <div class='group' data-require="1">
      <div class='require'></div>
      <span class='caption'>名前</span>
      <div class='form'>
        <div class='inputs'>
          <input type='text' name='entry.1939968703' placeholder='名前' required>
        </div>
      </div>
    </div>

    <div class='group' data-require="1">
      <div class='require'></div>
      <span class='caption'>メールアドレス</span>
      <div class='form'>
        <input type='text' name='entry.628554344' placeholder='yourname@example.com' required>
      </div>
    </div>

    <div class='group' data-require="1">
      <div class='require'></div>
      <span class='caption'>お問い合わせ内容</span>
      <div class='form'>
        <textarea data-name='message' placeholder='お問合せ内容を記入ください。' required></textarea>
        <!-- <div class='caution'>お問い合わせ内容が入力されていません</div> -->
      </div>
    </div>

    <div class='submit-area'>
      <button class='submit-button' type='submit'>送信する</button>
    </div>

  </form>
</div>

<script type="text/javascript">
  window.submitted = false;
</script>
<iframe 
  id="complete" 
  name="complete" 
  style="display:none;" 
  onload="if(window.submitted){location.href='/thanks'}">
</iframe>

お問い合わせthanksページ

ページを新規追加して、「thanks」という名前で登録をする。

<div class='contact'>
<h1 class='title'>お問合せ</h1>

<div class='summary sentence'><b>正常に受付を完了しました。</b>
</div>

その他

お好きなページを追加してください。

レイアウトでヘッダメニューの登録

レイアウトの管理画面でHeaderのリンクメニューの部分のリストを登録します。

「新しいアイテムを追加」をクリックすると、更にモーダルウィンドウが開きます。

ページ欄にカーソルインすると、事前に登録されたページの一覧が表示され、クリックするだけで、自動的にURLが登録されます。 ※別ドメインのURLを登録したい場合は、ページとURLをそれぞれ入力してください。登録した順番で表示されるので、順番を変更したい場合は、上下移動のボタンを使って、順番を変えてください。

解説

いくつか注意点があるので、解説をしておきます。

ページタイトルの英語表記と日本語表記の違いについて

ページタイトルにindexで登録すると、 https://blogger.com/p/index.html というURLになります。お問い合わせなどは、ページタイトルにcontactという名称で登録すると、 https://blogger.com/p/contact.html というURLになります。そして、この状態でメニュー登録でcontactを選択すると、ページのヘッダメニューには、「contact」と表示されます。日本語表記にしたい場合は、「お問い合わせ」という名前で、ページタイトルを登録すればいいんですが、この場合、URLは、 https://blogger.com/p/blog-page_1.html と言うカンジで、数値の箇所が連番表記になってしまいます。 URLを気にしない場合は、これでもいいんですが、URLをcontact.htmlにして、メニュー表示を「お問い合わせ」にしたい場合は、メニュー設定でページ名を書き換えれば対応することはできます。ただし、ここで1点だけ注意点があり、ページの変更など書き換えを行った場合に、メニュー表示が、実際のページのタイトル名に書き直されてしまうという事象が発生します。毎回、メニュー登録を書き直せば良いのですが、その作業を忘れると、想定した表示にはならなくなるので、要注意です。

ウィジェット登録とxml更新のデータ関連性

管理画面のレイアウトで、各種ヘッダメニューやアイコン登録をした後、xmlをコピペで書き直すと、以前設定したデータが消えてしまうことがあります。一度登録したxmlはなるべく上書きしないようにした方がいいんですが、ホームページを運用していくにつれて、書き換えていく箇所は発生してしまいます。そんな場合は、上書きせずに、カスタマイズのxmlを直接書き換えるのがいいと思います。 ※もちろん、バックアップは毎回必ず取ってから行いましょう。

画像データの扱いについて

Bloggerのサイト内で画像を使う場合、次のようないくつかの方法があるので、この点理解しておきましょう。

1. 記事やページで事前にアップロードした画像を使う。

事前にページや記事を作って、画像のタグを出力されたモノをコピペして使うことができます。 imgタグとして発行されるので、それをコピペして、サイズをwidth属性や、style属性で書き換えると、便利に使い回すことができます。

2. 別サーバーに配置された画像のURLを使う。

imgタグを自分で記述して、普通に使うことができますが、著作権やサーバーアクセス侵害などに繋がる可能性があるので、自分の権限の画像のみ使うようにしましょう。

3. base64形式で登録する。

imgタグのsrc属性に、base64エンコードされた、画像の文字列を埋め込むことで、html内に画像を埋め込んだ、ヘッドレス画像として使うことができます。画像をアップロードすると、自動でエンコードしてくれるサイトなどもあるので、便利に活用しましょう。エンコードできるサイトしかし、これにはデメリットがあって、base64エンコードは、画像の元の容量の1.5倍ほどのサイズに膨れ上がってしまうので、アイコンなどの軽い画像であれば、いいのですが、写真画像などのような大きめの画像を使う場合は、ファイルのurlアクセスをする事をおすすめします。ちなみに、文字列もハンパなく、膨れ上がるので、管理するのもタイヘンになりますからね。

トップページ（ホーム）をドキュメントルートで行いたい場合

ホームページのトップページは、とても重要な要素です。 GoogleBloggerを使って、独自ページをトップページにしたい場合、ほとんどの解説サイトでは、次のようなURLになってしまいます。 https://example.com/p/index.html これは、ルートアクセスがあった場合に、indexページにリダイレクトをする設定を管理画面の設定でセットする事で、このようなURLになってしまうんですが、今回のxmlコードでは、ルートにアクセスしても、indexタイトルで登録されたページをトップページとして、表示するようにしています。 https://example.com/ 仕組みとしては、feed機能を使って、indexページを読み込んで、表示させているんですが、javascriptとしてページ読み込み後に処理をするので、少し読み込み遅延が発生する場合があります。

あとがき

今回は、GoogleBloggerを使って、ホームページを作る手順とやり方をサンプルを使って説明してみました。色々と独自の設定方法などで紹介したので、難しい箇所などあれば、ご質問ください。でも、これが理解できるようになったら、企業のホームページなどは、Googleアカウントを新規構築して、ホームページ制作まで無料で行えるようになります。運用も、アカウントにログインすれば、ページ編集から、いろいろな情報更新などができてしまうので、次回は、そうした運用に関しての便利なやり方などを解説したいと思います。

カンタンBlogger学習 #08 WEBページ実装サンプル

テーマXML

ヘッダ情報の登録

サンプルWEBサイト

トップページ

お問い合わせページ

お問い合わせthanksページ

その他

レイアウトでヘッダメニューの登録

解説

ページタイトルの英語表記と日本語表記の違いについて

ウィジェット登録とxml更新のデータ関連性

画像データの扱いについて

1. 記事やページで事前にアップロードした画像を使う。

2. 別サーバーに配置された画像のURLを使う。

3. base64形式で登録する。

トップページ（ホーム）をドキュメントルートで行いたい場合

あとがき

人気の投稿

このブログを検索

ごあいさつ

ブログアーカイブ

ラベル

カンタンBlogger学習 #08 WEBページ実装サンプル

テーマXML

ヘッダ情報の登録

サンプルWEBサイト

トップページ

お問い合わせページ

お問い合わせthanksページ

その他

レイアウトでヘッダメニューの登録

解説

ページタイトルの英語表記と日本語表記の違いについて

ウィジェット登録とxml更新のデータ関連性

画像データの扱いについて

1. 記事やページで事前にアップロードした画像を使う。

2. 別サーバーに配置された画像のURLを使う。

3. base64形式で登録する。

トップページ（ホーム）をドキュメントルートで行いたい場合

あとがき

人気の投稿

このブログを検索

ごあいさつ

ブログ アーカイブ

ラベル

ブログアーカイブ