<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>HP作成：inada</title>
	<atom:link href="https://inada.ico21lab.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://inada.ico21lab.com/</link>
	<description>HP作成と求人のお手伝い</description>
	<lastBuildDate>Fri, 06 Feb 2026 03:09:44 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://inada.ico21lab.com/wp-content/uploads/2022/04/cropped-HPicon512-32x32.png</url>
	<title>HP作成：inada</title>
	<link>https://inada.ico21lab.com/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>svgでアイコンを作る</title>
		<link>https://inada.ico21lab.com/memo-55/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 06 Feb 2026 02:58:37 +0000</pubDate>
				<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=2203</guid>

					<description><![CDATA[<p>投稿 <a href="https://inada.ico21lab.com/memo-55/">svgでアイコンを作る</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- background -->
  <rect x="0" y="0" width="120" height="120" fill="#FAF8FF"/>

  <!-- cafeteria symbol (bowl + steam only) -->
  <g
    transform="translate(60 72)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.85">

    <!-- bowl -->
    <path d="M-26 0 Q0 22 26 0"/>

    <!-- steam (eyes / expression) -->
    <path d="M-10 -18 Q-4 -28 2 -18">
      <animate
        attributeName="opacity"
        values="0;0.6;0"
        dur="3s"
        repeatCount="indefinite"/>
    </path>

    <path d="M12 -18 Q18 -30 24 -18">
      <animate
        attributeName="opacity"
        values="0;0.6;0"
        dur="3.6s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- bowl + steam face -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.9">

    <!-- bowl (smile / dish) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam (eyes) -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3.6s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- small firework (top-left) -->
  <g
    transform="translate(26 26)"
    stroke="#C6A3F2"
    stroke-width="1.2"
    opacity="0.6">

    <line x1="0" y1="-8" x2="0" y2="-14"/>
    <line x1="0" y1="8" x2="0" y2="14"/>
    <line x1="-8" y1="0" x2="-14" y2="0"/>
    <line x1="8" y1="0" x2="14" y2="0"/>
    <line x1="-6" y1="-6" x2="-11" y2="-11"/>
    <line x1="6" y1="6" x2="11" y2="11"/>
    <line x1="-6" y1="6" x2="-11" y2="11"/>
    <line x1="6" y1="-6" x2="11" y2="-11"/>

    <animate
      attributeName="opacity"
      values="0;0.6;0"
      dur="4.5s"
      repeatCount="indefinite"/>
  </g>

  <!-- bowl + steam face -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.9">

    <!-- bowl (smile / dish) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam (eyes) -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3.6s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       background firework
  ====================== -->
  <g
    transform="translate(28 28)"
    stroke="#F2A1C0"
    stroke-width="1.4"
    fill="none"
    opacity="0">

    <line x1="0" y1="-10" x2="0" y2="-18"/>
    <line x1="0" y1="10" x2="0" y2="18"/>
    <line x1="-10" y1="0" x2="-18" y2="0"/>
    <line x1="10" y1="0" x2="18" y2="0"/>
    <line x1="-7" y1="-7" x2="-13" y2="-13"/>
    <line x1="7" y1="7" x2="13" y2="13"/>
    <line x1="-7" y1="7" x2="-13" y2="13"/>
    <line x1="7" y1="-7" x2="13" y2="-13"/>

    <!-- ゆっくり現れて、長めに滞在 -->
    <animate
      attributeName="opacity"
      values="0;0.7;0.7;0"
      keyTimes="0;0.25;0.75;1"
      dur="6s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       bowl + steam face
  ====================== -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.95">

    <!-- bowl (smile) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam eyes : 常に表示 -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.5s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.9s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       gradient background
  ====================== -->
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#F6F0FD"/>
      <stop offset="100%" stop-color="#FFFFFF"/>
    </linearGradient>
  </defs>

  <rect
    x="0"
    y="0"
    width="120"
    height="120"
    rx="18"
    fill="url(#bgGrad)"/>

  <!-- =====================
       background firework
  ====================== -->
  <g
    transform="translate(28 28)"
    stroke="#F2A1C0"
    stroke-width="1.4"
    fill="none"
    opacity="0">

    <line x1="0" y1="-10" x2="0" y2="-18"/>
    <line x1="0" y1="10" x2="0" y2="18"/>
    <line x1="-10" y1="0" x2="-18" y2="0"/>
    <line x1="10" y1="0" x2="18" y2="0"/>
    <line x1="-7" y1="-7" x2="-13" y2="-13"/>
    <line x1="7" y1="7" x2="13" y2="13"/>
    <line x1="-7" y1="7" x2="-13" y2="13"/>
    <line x1="7" y1="-7" x2="13" y2="-13"/>

    <animate
      attributeName="opacity"
      values="0;0.7;0.7;0"
      keyTimes="0;0.25;0.75;1"
      dur="6s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       bowl + steam face
  ====================== -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.95">

    <!-- bowl (smile) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam eyes -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.5s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.9s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       radial gradient background
  ====================== -->
  <defs>
    <radialGradient
      id="bgGrad"
      cx="50%"
      cy="45%"
      r="65%">
      <stop offset="0%" stop-color="#FFFFFF"/>
      <stop offset="70%" stop-color="#F3ECFD"/>
      <stop offset="100%" stop-color="#E8DBFA"/>
    </radialGradient>
  </defs>

  <!-- background -->
  <rect
    x="0"
    y="0"
    width="120"
    height="120"
    rx="18"
    fill="url(#bgGrad)"/>

  <!-- =====================
       background firework
  ====================== -->
  <g
    transform="translate(28 28)"
    stroke="#F2A1C0"
    stroke-width="1.4"
    fill="none"
    opacity="0">

    <line x1="0" y1="-10" x2="0" y2="-18"/>
    <line x1="0" y1="10" x2="0" y2="18"/>
    <line x1="-10" y1="0" x2="-18" y2="0"/>
    <line x1="10" y1="0" x2="18" y2="0"/>
    <line x1="-7" y1="-7" x2="-13" y2="-13"/>
    <line x1="7" y1="7" x2="13" y2="13"/>
    <line x1="-7" y1="7" x2="-13" y2="13"/>
    <line x1="7" y1="-7" x2="13" y2="-13"/>

    <animate
      attributeName="opacity"
      values="0;0.7;0.7;0"
      keyTimes="0;0.25;0.75;1"
      dur="6s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       bowl + steam face
  ====================== -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.95">

    <!-- bowl (smile) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam eyes -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.5s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.9s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>

<p>投稿 <a href="https://inada.ico21lab.com/memo-55/">svgでアイコンを作る</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>画像をsvgで動かす</title>
		<link>https://inada.ico21lab.com/memo-54/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Tue, 20 Jan 2026 07:51:22 +0000</pubDate>
				<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=2107</guid>

					<description><![CDATA[<p>投稿 <a href="https://inada.ico21lab.com/memo-54/">画像をsvgで動かす</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<svg width="600" height="150" xmlns="http://www.w3.org/2000/svg">
  <!-- 画像1 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant1.webp" 
         x="0" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="0s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="0s" fill="freeze"/>
  </image>

  <!-- 画像2 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant2.webp" 
         x="120" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="1s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="1s" fill="freeze"/>
  </image>

  <!-- 画像3 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant3.webp" 
         x="240" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="2s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="2s" fill="freeze"/>
  </image>

  <!-- 画像4 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant4.webp" 
         x="360" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="3s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="3s" fill="freeze"/>
  </image>

  <!-- 画像5 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant5.webp" 
         x="480" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="4s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="4s" fill="freeze"/>
  </image>
</svg>

<p>投稿 <a href="https://inada.ico21lab.com/memo-54/">画像をsvgで動かす</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>svgを使ったアニメーション（css不要）</title>
		<link>https://inada.ico21lab.com/memo-53/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 16 Jan 2026 08:10:58 +0000</pubDate>
				<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=2080</guid>

					<description><![CDATA[<p>カスタムHTMLブロックにコードを記述する（CSSは不要）</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-53/">svgを使ったアニメーション（css不要）</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>カスタムHTMLブロックにコードを記述する（CSSは不要）</p>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       sky
  ====================== -->
  <rect x="0" y="0" width="800" height="170" fill="#EAF4FF"/>

  <!-- =====================
       far background : mountains
  ====================== -->
  <g opacity="0.4">
    <polygon points="0,120 120,60 240,120" fill="#BFD6C5"/>
    <polygon points="200,120 360,50 520,120" fill="#C7DECD"/>
    <polygon points="480,120 640,70 800,120" fill="#BFD6C5"/>
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="60s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.4">
    <polygon points="800,120 920,60 1040,120" fill="#BFD6C5"/>
    <polygon points="1000,120 1160,50 1320,120" fill="#C7DECD"/>
  </g>

  <!-- =====================
       mid background : trees
  ====================== -->
  <g opacity="0.7">
    <circle cx="100" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="96" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="260" cy="120" r="20" fill="#78B999"/>
    <rect x="256" y="120" width="8" height="22" fill="#5B8C6E"/>

    <circle cx="420" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="416" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="580" cy="120" r="22" fill="#78B999"/>
    <rect x="576" y="120" width="8" height="24" fill="#5B8C6E"/>

    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="30s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.7">
    <circle cx="900" cy="120" r="20" fill="#78B999"/>
    <rect x="896" y="120" width="8" height="22" fill="#5B8C6E"/>
  </g>

  <!-- =====================
       ground & road
  ====================== -->
  <rect x="0" y="150" width="800" height="20" fill="#7EC850"/>
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       car (always centered)
  ====================== -->
  <defs>
    <style>
      .car-color { fill:#E94E77; }
    </style>
  </defs>

  <!-- 中央アンカー -->
  <g transform="translate(400 0)">
    <!-- 車幅120pxの半分を戻す -->
    <g id="car" transform="translate(-60 0)">

      <!-- shadow -->
      <ellipse cx="60" cy="165" rx="42" ry="6" fill="#000" opacity="0.18"/>

      <!-- exhaust -->
      <circle r="7" fill="#999" opacity="0">
        <animate attributeName="cx" values="0;-35" dur="1.4s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="140;115" dur="1.4s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.7;0" dur="1.4s" repeatCount="indefinite"/>
      </circle>

      <circle r="5" fill="#aaa" opacity="0">
        <animate attributeName="cx" values="0;-45" dur="1.7s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="140;120" dur="1.7s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.6;0" dur="1.7s" repeatCount="indefinite"/>
      </circle>

      <!-- body -->
      <rect x="0" y="120" width="120" height="30" rx="8" class="car-color"/>
      <rect x="20" y="95" width="60" height="30" rx="8" class="car-color"/>

      <!-- windows -->
      <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
      <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

      <!-- wheel back -->
      <g>
        <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
        <line x1="30" y1="145" x2="30" y2="165" stroke="#fff" stroke-width="1"/>
        <line x1="20" y1="155" x2="40" y2="155" stroke="#fff" stroke-width="1"/>
        <line x1="23" y1="148" x2="37" y2="162" stroke="#fff" stroke-width="1"/>
        <line x1="23" y1="162" x2="37" y2="148" stroke="#fff" stroke-width="1"/>
        <line x1="26" y1="146" x2="34" y2="164" stroke="#fff" stroke-width="1"/>
        <line x1="26" y1="164" x2="34" y2="146" stroke="#fff" stroke-width="1"/>
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 30 155"
          to="360 30 155"
          dur="0.8s"
          repeatCount="indefinite"/>
      </g>

      <!-- wheel front -->
      <g>
        <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
        <line x1="90" y1="145" x2="90" y2="165" stroke="#fff" stroke-width="1"/>
        <line x1="80" y1="155" x2="100" y2="155" stroke="#fff" stroke-width="1"/>
        <line x1="83" y1="148" x2="97" y2="162" stroke="#fff" stroke-width="1"/>
        <line x1="83" y1="162" x2="97" y2="148" stroke="#fff" stroke-width="1"/>
        <line x1="86" y1="146" x2="94" y2="164" stroke="#fff" stroke-width="1"/>
        <line x1="86" y1="164" x2="94" y2="146" stroke="#fff" stroke-width="1"/>
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 90 155"
          to="360 90 155"
          dur="0.8s"
          repeatCount="indefinite"/>
      </g>

    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate
      attributeName="x"
      from="800"
      to="-40"
      dur="1s"
      repeatCount="indefinite" />
  </rect>

  <!-- car : always centered -->
  <g transform="translate(400 0)">
    <g id="car" transform="translate(-60 0)">

      <!-- car body -->
      <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
      <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>

      <!-- windows -->
      <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
      <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

      <!-- wheels -->
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>

    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- cloud -->
  <ellipse cy="60" rx="40" ry="16" fill="#EAEAEA">
    <animate
      attributeName="cx"
      from="-40"
      to="840"
      dur="12s"
      repeatCount="indefinite"/>
  </ellipse>

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate
      attributeName="x"
      from="800"
      to="-40"
      dur="1s"
      repeatCount="indefinite"/>
  </rect>

  <!-- car + shadow : always centered -->
  <g transform="translate(400 0)">

    <!-- shadow -->
    <ellipse cx="0" cy="160" rx="50" ry="6" fill="rgba(0,0,0,0.15)"/>

    <!-- car -->
    <g id="car" transform="translate(-60 0)">

      <!-- car body -->
      <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
      <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>

      <!-- windows -->
      <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
      <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

      <!-- wheels -->
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>

    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- color settings -->
  <defs>
    <style>
      .car-color { fill:#E94E77; }
    </style>
  </defs>

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car -->
  <g id="car">

    <!-- exhaust smoke BIG -->
    <circle r="7" fill="#999" opacity="0">
      <animate attributeName="cx"
               values="0;-35"
               dur="1.4s"
               repeatCount="indefinite"/>
      <animate attributeName="cy"
               values="140;115"
               dur="1.4s"
               repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.7;0"
               dur="1.4s"
               repeatCount="indefinite"/>
    </circle>

    <circle r="5" fill="#aaa" opacity="0">
      <animate attributeName="cx"
               values="0;-45"
               dur="1.7s"
               repeatCount="indefinite"/>
      <animate attributeName="cy"
               values="140;120"
               dur="1.7s"
               repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.6;0"
               dur="1.7s"
               repeatCount="indefinite"/>
    </circle>

    <!-- car body -->
    <rect x="0" y="120" width="120" height="30" rx="8" class="car-color"/>
    <rect x="20" y="95" width="60" height="30" rx="8" class="car-color"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- wheel back -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.6s"
        repeatCount="indefinite"
        additive="sum" />
    </g>

    <!-- wheel front -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.6s"
        repeatCount="indefinite"
        additive="sum" />
    </g>

    <!-- car move -->
    <animateTransform
      attributeName="transform"
      type="translate"
      from="-150 0"
      to="850 0"
      dur="4s"
      repeatCount="indefinite" />

  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car -->
  <g id="car">

    <!-- exhaust smoke -->
    <circle r="7" fill="#999" opacity="0">
      <animate attributeName="cx" values="0;-35" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;115" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.7;0" dur="1.4s" repeatCount="indefinite"/>
    </circle>

    <circle r="5" fill="#aaa" opacity="0">
      <animate attributeName="cx" values="0;-45" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;120" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.6;0" dur="1.7s" repeatCount="indefinite"/>
    </circle>

    <!-- car body (GREEN) -->
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#4CAF50"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#4CAF50"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- wheel back -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.6s"
        repeatCount="indefinite" />
    </g>

    <!-- wheel front -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.6s"
        repeatCount="indefinite" />
    </g>

    <!-- car move -->
    <animateTransform
      attributeName="transform"
      type="translate"
      from="-150 0"
      to="850 0"
      dur="4s"
      repeatCount="indefinite" />

    <!-- suspension -->
    <animateTransform
      attributeName="transform"
      type="translate"
      values="0 0; 0 2; 0 0"
      dur="0.4s"
      repeatCount="indefinite"
      additive="sum" />

  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car 1 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="0s"/>
  </g>

  <!-- car 2 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#E94E77"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#E94E77"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="0.8s"/>
  </g>

  <!-- car 3 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#F5A623"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#F5A623"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="1.6s"/>
  </g>

  <!-- car 4 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#50E3C2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#50E3C2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="2.4s"/>
  </g>

  <!-- car 5 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#B552E5"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#B552E5"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="3.2s"/>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car 1: 青、大きめ、速め -->
  <g transform="scale(1.0)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="3.8s" repeatCount="indefinite" begin="0s"/>
  </g>

  <!-- car 2: ピンク、少し小さめ、少し遅め -->
  <g transform="scale(0.95)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#E94E77"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#E94E77"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.0s" repeatCount="indefinite" begin="0.6s"/>
  </g>

  <!-- car 3: オレンジ、中サイズ、標準速度 -->
  <g transform="scale(0.9)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#F5A623"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#F5A623"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.2s" repeatCount="indefinite" begin="1.2s"/>
  </g>

  <!-- car 4: 緑、水色寄り、小さめ、少し遅め -->
  <g transform="scale(0.85)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#50E3C2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#50E3C2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.4s" repeatCount="indefinite" begin="1.8s"/>
  </g>

  <!-- car 5: 紫、奥に小さめ、遅め -->
  <g transform="scale(0.8)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#B552E5"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#B552E5"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.6s" repeatCount="indefinite" begin="2.4s"/>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       sky
  ====================== -->
  <rect x="0" y="0" width="800" height="170" fill="#EAF4FF"/>

  <!-- =====================
       far background : mountains
  ====================== -->
  <g opacity="0.4">
    <polygon points="0,120 120,60 240,120" fill="#BFD6C5"/>
    <polygon points="200,120 360,50 520,120" fill="#C7DECD"/>
    <polygon points="480,120 640,70 800,120" fill="#BFD6C5"/>

    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="60s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.4">
    <polygon points="800,120 920,60 1040,120" fill="#BFD6C5"/>
    <polygon points="1000,120 1160,50 1320,120" fill="#C7DECD"/>
  </g>

  <!-- =====================
       mid background : trees
  ====================== -->
  <g opacity="0.7">
    <circle cx="100" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="96" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="260" cy="120" r="20" fill="#78B999"/>
    <rect x="256" y="120" width="8" height="22" fill="#5B8C6E"/>

    <circle cx="420" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="416" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="580" cy="120" r="22" fill="#78B999"/>
    <rect x="576" y="120" width="8" height="24" fill="#5B8C6E"/>

    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="30s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.7">
    <circle cx="900" cy="120" r="20" fill="#78B999"/>
    <rect x="896" y="120" width="8" height="22" fill="#5B8C6E"/>
  </g>

  <!-- =====================
       ground & road
  ====================== -->
  <rect x="0" y="150" width="800" height="20" fill="#7EC850"/>
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       car (centered & fixed)
  ====================== -->

  <defs>
    <style>
      .car-color { fill:#E94E77; }
    </style>
  </defs>

  <!-- 中央配置 -->
  <g id="car" transform="translate(340 0)">

    <!-- shadow -->
    <ellipse cx="60" cy="165" rx="42" ry="6"
             fill="#000"
             opacity="0.18"/>

    <!-- exhaust -->
    <circle r="7" fill="#999" opacity="0">
      <animate attributeName="cx" values="0;-35" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;115" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.7;0" dur="1.4s" repeatCount="indefinite"/>
    </circle>

    <circle r="5" fill="#aaa" opacity="0">
      <animate attributeName="cx" values="0;-45" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;120" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.6;0" dur="1.7s" repeatCount="indefinite"/>
    </circle>

    <!-- body -->
    <rect x="0" y="120" width="120" height="30" rx="8" class="car-color"/>
    <rect x="20" y="95" width="60" height="30" rx="8" class="car-color"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- wheel back -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>

      <line x1="30" y1="145" x2="30" y2="165" stroke="#fff" stroke-width="1"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#fff" stroke-width="1"/>
      <line x1="23" y1="148" x2="37" y2="162" stroke="#fff" stroke-width="1"/>
      <line x1="23" y1="162" x2="37" y2="148" stroke="#fff" stroke-width="1"/>
      <line x1="26" y1="146" x2="34" y2="164" stroke="#fff" stroke-width="1"/>
      <line x1="26" y1="164" x2="34" y2="146" stroke="#fff" stroke-width="1"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>

    <!-- wheel front -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>

      <line x1="90" y1="145" x2="90" y2="165" stroke="#fff" stroke-width="1"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#fff" stroke-width="1"/>
      <line x1="83" y1="148" x2="97" y2="162" stroke="#fff" stroke-width="1"/>
      <line x1="83" y1="162" x2="97" y2="148" stroke="#fff" stroke-width="1"/>
      <line x1="86" y1="146" x2="94" y2="164" stroke="#fff" stroke-width="1"/>
      <line x1="86" y1="164" x2="94" y2="146" stroke="#fff" stroke-width="1"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>

  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       SKY (day → evening → night)
  ====================== -->
  <rect x="0" y="0" width="800" height="170">
    <animate attributeName="fill"
      values="#EAF4FF;#FFD6A5;#0F172A;#EAF4FF"
      dur="30s"
      repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       FAR BACKGROUND
  ====================== -->
  <g opacity="0.45">
    <polygon points="0,120 160,60 320,120" fill="#BFD6C5"/>
    <polygon points="320,120 480,50 640,120" fill="#C7DECD"/>
    <polygon points="640,120 800,70 960,120" fill="#BFD6C5"/>
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-320 0"
      dur="20s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       GROUND & ROAD
  ====================== -->
  <rect x="0" y="150" width="800" height="20" fill="#7EC850"/>
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       EXHAUST（車直後）
  ====================== -->
  <g>
    <ellipse rx="9" ry="5" fill="#999" opacity="0">
      <animate attributeName="cx" values="350;305" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;112" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="cx" values="350;340;355;330" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="ry" values="5;4;5" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.45;0.75;0.45;0"
               dur="30s"
               repeatCount="indefinite"/>
    </ellipse>

    <ellipse rx="7" ry="4" fill="#aaa" opacity="0">
      <animate attributeName="cx" values="340;290" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="142;118" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="cx" values="340;330;345;320" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="ry" values="4;3;4" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.35;0.6;0.35;0"
               dur="30s"
               repeatCount="indefinite"/>
    </ellipse>
  </g>

  <!-- =====================
       CAR（中央）
  ====================== -->
  <g transform="translate(340 0)">
    <!-- body bob -->
    <animateTransform
      attributeName="transform"
      type="translate"
      values="340 0;340 -1;340 0"
      dur="1.2s"
      repeatCount="indefinite"/>

    <!-- shadow -->
    <ellipse cx="60" cy="165" rx="42" ry="6"
             fill="#000" opacity="0.15">
      <animate attributeName="opacity"
               values="0.12;0.18;0.12"
               dur="0.8s"
               repeatCount="indefinite"/>
    </ellipse>

    <!-- =====================
         HEADLIGHT（夜だけ）
    ====================== -->
    <g opacity="0">
      <!-- 光の円 -->
      <circle cx="120" cy="135" r="6" fill="#FFF6C5"/>
      <!-- 光の広がり -->
      <polygon points="120,130 180,110 180,160" fill="#FFF6C5" opacity="0.5"/>

      <animate attributeName="opacity"
               values="0;0;1;0"
               keyTimes="0;0.4;0.65;1"
               dur="30s"
               repeatCount="indefinite"/>
    </g>

    <!-- body -->
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#E94E77"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#E94E77"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- rear wheel -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#fff"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#fff"/>
      <line x1="23" y1="148" x2="37" y2="162" stroke="#fff"/>
      <line x1="23" y1="162" x2="37" y2="148" stroke="#fff"/>
      <line x1="26" y1="146" x2="34" y2="164" stroke="#fff"/>
      <line x1="26" y1="164" x2="34" y2="146" stroke="#fff"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>

    <!-- front wheel -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#fff"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#fff"/>
      <line x1="83" y1="148" x2="97" y2="162" stroke="#fff"/>
      <line x1="83" y1="162" x2="97" y2="148" stroke="#fff"/>
      <line x1="86" y1="146" x2="94" y2="164" stroke="#fff"/>
      <line x1="86" y1="164" x2="94" y2="146" stroke="#fff"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ===== defs ===== -->
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0B1D33"/>
      <stop offset="70%" stop-color="#1E3355"/>
      <stop offset="100%" stop-color="#263D5F"/>
    </linearGradient>

    <filter id="smokeBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>

    <radialGradient id="headlightGlow">
      <stop offset="0%" stop-color="#FFF4B0" stop-opacity="0.9"/>
      <stop offset="50%" stop-color="#FFF4B0" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#FFF4B0" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- ===== sky ===== -->
  <rect width="800" height="240" fill="url(#skyGrad)"/>

  <!-- ===== stars ===== -->
  <g fill="#fff">
    <circle cx="80" cy="40" r="1.5">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="160" cy="70" r="1.2">
      <animate attributeName="opacity" values="1;0.2;1" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="260" cy="35" r="1.8">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="420" cy="50" r="1.4">
      <animate attributeName="opacity" values="1;0.3;1" dur="3.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="620" cy="30" r="1.6">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="4.5s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- ===== ground ===== -->
  <g fill="none" stroke="#3EDC88" stroke-width="2" stroke-linecap="round">
    <path d="M 0 192 C 25 190, 40 195, 65 193 C 85 191, 105 197, 130 194"/>
    <path d="M 155 195 C 180 191, 200 198, 225 194"/>
    <path d="M 255 196 C 280 192, 305 200, 330 195 C 350 191, 370 197, 395 194"/>
    <path d="M 430 195 C 455 190, 480 199, 505 194"/>
    <path d="M 540 196 C 565 191, 590 200, 615 194 C 640 190, 665 198, 690 195"/>
    <path d="M 720 196 C 745 191, 770 198, 800 194"/>
  </g>

  <!-- ===== car ===== -->
  <g id="car" transform="translate(0 14)">

    <!-- headlight -->
    <ellipse cx="130" cy="142" rx="110" ry="50"
             fill="url(#headlightGlow)"/>

    <!-- smoke -->
    <g filter="url(#smokeBlur)">
      <circle cx="-10" cy="165" r="18" fill="#fff" opacity="0">
        <animate attributeName="cx" values="-10;-70" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="165;90" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="r" values="18;45" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.9;0" dur="2s" repeatCount="indefinite"/>
      </circle>
    </g>

    <!-- body -->
    <rect x="0" y="135" width="120" height="28" rx="8"
          fill="#FFD800" stroke="#222" stroke-width="2"/>
    <rect x="20" y="108" width="60" height="30" rx="8"
          fill="#FFD800" stroke="#222" stroke-width="2"/>

    <!-- windows -->
    <rect x="26" y="112" width="22" height="18" rx="4" fill="#CFE8FF"/>
    <rect x="52" y="112" width="22" height="18" rx="4" fill="#CFE8FF"/>

    <!-- ===== rear wheel ===== -->
    <g>
      <circle cx="30" cy="166" r="12" fill="#ffffff"/>
      <circle cx="30" cy="166" r="6" fill="#6C7A89"/>

      <line x1="30" y1="150" x2="30" y2="182" stroke="#6C7A89" stroke-width="2"/>
      <line x1="14" y1="166" x2="46" y2="166" stroke="#6C7A89" stroke-width="2"/>
      <line x1="19" y1="155" x2="41" y2="177" stroke="#6C7A89" stroke-width="2"/>
      <line x1="19" y1="177" x2="41" y2="155" stroke="#6C7A89" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 166"
        to="360 30 166"
        dur="0.5s"
        repeatCount="indefinite"
        additive="sum"/>
    </g>

    <!-- ===== front wheel ===== -->
    <g>
      <circle cx="90" cy="166" r="12" fill="#ffffff"/>
      <circle cx="90" cy="166" r="6" fill="#6C7A89"/>

      <line x1="90" y1="150" x2="90" y2="182" stroke="#6C7A89" stroke-width="2"/>
      <line x1="74" y1="166" x2="106" y2="166" stroke="#6C7A89" stroke-width="2"/>
      <line x1="79" y1="155" x2="101" y2="177" stroke="#6C7A89" stroke-width="2"/>
      <line x1="79" y1="177" x2="101" y2="155" stroke="#6C7A89" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 166"
        to="360 90 166"
        dur="0.5s"
        repeatCount="indefinite"
        additive="sum"/>
    </g>

    <!-- move -->
    <animateTransform
      attributeName="transform"
      type="translate"
      from="-350 0"
      to="900 0"
      dur="4s"
      repeatCount="indefinite"/>

    <!-- suspension -->
    <animateTransform
      attributeName="transform"
      type="translate"
      values="0 0; 0 2; 0 -1; 0 3; 0 0"
      dur="1.5s"
      repeatCount="indefinite"
      additive="sum"/>

    <!-- tilt -->
    <animateTransform
      attributeName="transform"
      type="rotate"
      values="0 60 160; -1 60 160; 1 60 160; 0 60 160"
      dur="1.5s"
      repeatCount="indefinite"
      additive="sum"/>

  </g>
</svg>



<p></p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-53/">svgを使ったアニメーション（css不要）</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>プラグインを使わない スライド表示</title>
		<link>https://inada.ico21lab.com/memo-52/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 09 Jan 2026 06:20:47 +0000</pubDate>
				<category><![CDATA[CSS/JS]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=2014</guid>

					<description><![CDATA[<p>投稿 <a href="https://inada.ico21lab.com/memo-52/">プラグインを使わない スライド表示</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<ol start="1" class="wp-block-list">
<li><strong>ブロックで画像を並べる</strong></li>



<li><strong>CSSで動きと表示のタイミング（delay）を設定</strong></li>



<li><strong>JavaScriptで「画面に入ったら表示」させる</strong></li>
</ol>



<div class="wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full slide-item anim-slide-down delay-5"><img fetchpriority="high" decoding="async" width="709" height="827" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp" alt="" class="wp-image-2033" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp 709w, https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368-257x300.webp 257w" sizes="(max-width: 709px) 100vw, 709px" /></figure>



<figure class="wp-block-image size-large slide-item anim-slide-left delay-3"><img decoding="async" width="1024" height="768" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp" alt="" class="wp-image-2017" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp 1024w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-300x225.webp 300w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-768x576.webp 768w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1536x1152.webp 1536w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105.webp 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large slide-item anim-rotate-left delay-5"><img decoding="async" width="1024" height="768" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp" alt="" class="wp-image-2017" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp 1024w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-300x225.webp 300w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-768x576.webp 768w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1536x1152.webp 1536w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105.webp 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-full slide-item anim-zoom"><img fetchpriority="high" decoding="async" width="709" height="827" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp" alt="" class="wp-image-2033" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp 709w, https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368-257x300.webp 257w" sizes="(max-width: 709px) 100vw, 709px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full slide-item anim-fade delay-6"><img fetchpriority="high" decoding="async" width="709" height="827" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp" alt="" class="wp-image-2033" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp 709w, https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368-257x300.webp 257w" sizes="(max-width: 709px) 100vw, 709px" /></figure>



<figure class="wp-block-image size-large slide-item anim-rotate-right delay-5"><img decoding="async" width="1024" height="768" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp" alt="" class="wp-image-2017" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp 1024w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-300x225.webp 300w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-768x576.webp 768w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1536x1152.webp 1536w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105.webp 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large slide-item anim-bounce"><img decoding="async" width="1024" height="768" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp" alt="" class="wp-image-2017" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1024x768.webp 1024w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-300x225.webp 300w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-768x576.webp 768w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105-1536x1152.webp 1536w, https://inada.ico21lab.com/wp-content/uploads/2025/12/513105.webp 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-full slide-item anim-slide-right-up delay-6"><img fetchpriority="high" decoding="async" width="709" height="827" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp" alt="" class="wp-image-2033" srcset="https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368.webp 709w, https://inada.ico21lab.com/wp-content/uploads/2025/12/1462368-257x300.webp 257w" sizes="(max-width: 709px) 100vw, 709px" /></figure>
</div>
</div>
<p>投稿 <a href="https://inada.ico21lab.com/memo-52/">プラグインを使わない スライド表示</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>プラグインを使わない 画像を1枚ずつ表示</title>
		<link>https://inada.ico21lab.com/memo-51/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 19 Dec 2025 06:19:21 +0000</pubDate>
				<category><![CDATA[CSS/JS]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=1983</guid>

					<description><![CDATA[<p>投稿 <a href="https://inada.ico21lab.com/memo-51/">プラグインを使わない 画像を1枚ずつ表示</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<ol start="1" class="wp-block-list">
<li><strong>ブロックで画像を並べる</strong></li>



<li><strong>CSSで見た目とアニメーションを設定</strong></li>



<li><strong>JavaScriptで「画面に入ったら表示」させる</strong></li>
</ol>



<div class="slide-row">
  <figure class="slide-item"><img decoding="async" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant1.webp" alt=""></figure>
  <figure class="slide-item"><img decoding="async" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant2.webp" alt=""></figure>
  <figure class="slide-item"><img decoding="async" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant3.webp" alt=""></figure>
  <figure class="slide-item"><img decoding="async" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant4.webp" alt=""></figure>
  <figure class="slide-item"><img decoding="async" src="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant5.webp" alt=""></figure>
</div>
<p>投稿 <a href="https://inada.ico21lab.com/memo-51/">プラグインを使わない 画像を1枚ずつ表示</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>投稿画面下　前後の記事の表示・非表示</title>
		<link>https://inada.ico21lab.com/memo-50/</link>
					<comments>https://inada.ico21lab.com/memo-50/#respond</comments>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 03 Oct 2025 03:18:41 +0000</pubDate>
				<category><![CDATA[投稿ページ]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=1966</guid>

					<description><![CDATA[<p>外観→カスタマイズ→Lightning詳細ページ設定→投稿→非表示要素：選択可能</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-50/">投稿画面下　前後の記事の表示・非表示</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p class="has-large-font-size">外観→カスタマイズ→Lightning詳細ページ設定→投稿→非表示要素：選択可能</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>
<p>投稿 <a href="https://inada.ico21lab.com/memo-50/">投稿画面下　前後の記事の表示・非表示</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://inada.ico21lab.com/memo-50/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ページ編集画面での「lightningデザイン設定」表示場所</title>
		<link>https://inada.ico21lab.com/memo-49/</link>
					<comments>https://inada.ico21lab.com/memo-49/#respond</comments>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 26 Sep 2025 03:05:26 +0000</pubDate>
				<category><![CDATA[固定ページ]]></category>
		<category><![CDATA[投稿ページ]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=1963</guid>

					<description><![CDATA[<p>編集画面の右側、または、編集画面の一番下。何かの拍子に、編集画面の下から右側に表示位置が変更されることがある。</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-49/">ページ編集画面での「lightningデザイン設定」表示場所</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p class="has-large-font-size">編集画面の右側、または、編集画面の一番下。<br>何かの拍子に、編集画面の下から右側に表示位置が変更されることがある。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<p></p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-49/">ページ編集画面での「lightningデザイン設定」表示場所</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://inada.ico21lab.com/memo-49/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>SEO-1 Yoast SEOとGoogle（Googleサーチコンソール）紐づけ</title>
		<link>https://inada.ico21lab.com/memo-48/</link>
					<comments>https://inada.ico21lab.com/memo-48/#respond</comments>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Wed, 11 Sep 2024 05:48:36 +0000</pubDate>
				<category><![CDATA[SEO対策]]></category>
		<category><![CDATA[Googleサーチコンソール]]></category>
		<category><![CDATA[Yoast SEO]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=1840</guid>

					<description><![CDATA[<p>SEO①GoogleアカウントのHP所有権を確認する。※Google検索不可の&#x2611;は外しておく。（ダッシュボード→設定→表示設定） 【Google Search Console Team &#60;sc-nor [&#8230;]</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-48/">SEO-1 Yoast SEOとGoogle（Googleサーチコンソール）紐づけ</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color">SEO①</mark>GoogleアカウントのHP所有権を確認する。<br>※Google検索不可の&#x2611;は外しておく。（ダッシュボード→設定→表示設定）</p>



<ol class="wp-block-list">
<li>ホームページを管理するアカウントで<span data-color="#ff6900" style="background: linear-gradient(transparent 60%,rgba(255, 105, 0, 0.7) 0);" class="vk_highlighter">Googleにログイン</span>する</li>



<li><span data-color="#ff6900" style="background: linear-gradient(transparent 60%,rgba(255, 105, 0, 0.7) 0);" class="vk_highlighter">WordPressの管理画面</span>にログイン</li>



<li>Yoast SEOをインストール→有効化</li>



<li><span data-color="#ff6900" style="background: linear-gradient(transparent 60%,rgba(255, 105, 0, 0.7) 0);" class="vk_highlighter">WPダッシュボード：Yoast SEO</span>→一般→初めての設定タグでサイト情報など整える→保存して次へ（完了）</li>



<li><span data-color="#ff6900" style="background: linear-gradient(transparent 60%,rgba(255, 105, 0, 0.7) 0);" class="vk_highlighter">WPダッシュボード：Yoast SEO</span>→設定→（左）一般・サイトの接続→<strong>Google</strong>確認コード入力欄の下にあるリンク：Google Search Console（クリック）</li>



<li><span data-color="#ff6900" style="background: linear-gradient(transparent 60%,rgba(255, 105, 0, 0.7) 0);" class="vk_highlighter">Googleサーチコンソール</span>　<br>左：プロパティを追加（すでにプロパティがある場合は、プロパティの下の方 Add Property→<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color">右：URLプレフィックスにサイトのURLを入力</mark>→続く<br>「所有権の確認」　●HTMLタグ→メタタグをコピー（全て選択してOK）</li>



<li><span data-color="#ff6900" style="background: linear-gradient(transparent 60%,rgba(255, 105, 0, 0.7) 0);" class="vk_highlighter">WP：Yoast SEO</span>：Google確認コード入力欄にペースト（必要な箇所だけ貼り付けられる）→変更を保存→<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#13694a" class="has-inline-color">&#x2611;</mark></strong>「所有権を確認しました</li>
</ol>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<p>【Google Search Console Team &lt;<a href="mailto:sc-noreply@google.com">sc-noreply@google.com</a>>からメールが届く】<br>案内に従い設定<br>①サイトのバリエーションを追加する→右：URLプレフィックスに（https、http、https://www、http://www、4種を追加）<br>②同僚のアクセス権（任意）<br>③メールリンク先→サイトマップ→新しいサイトマップの追加→文字（sitemap.xml）入力→送信「サイトマップを送信しました」</p>



<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>



<p>　<strong>（XMLサイトマップの確認の仕方）</strong></p>



<p>※WPダッシュボード：Yoast SEO→設定→（左）一般→サイトの機能→XMLサイトマップ→小さい<strong>？</strong>マークをクリックする。</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-48/">SEO-1 Yoast SEOとGoogle（Googleサーチコンソール）紐づけ</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://inada.ico21lab.com/memo-48/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>投稿アーカイブページのページヘッダーにサブテキストを入力する</title>
		<link>https://inada.ico21lab.com/memo-45/</link>
					<comments>https://inada.ico21lab.com/memo-45/#respond</comments>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Wed, 13 Dec 2023 06:01:19 +0000</pubDate>
				<category><![CDATA[投稿ページ]]></category>
		<category><![CDATA[アーカイブページ]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=1687</guid>

					<description><![CDATA[<p>外観→カスタマイズ→lightningページヘッダー設定 投稿（または作成した投稿タイプ）を選択→表示要素（投稿）：「投稿タイプ」選択 →サブテキスト入力欄が現れる！！ ここに入力するとサイト名の下に表示できる。</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-45/">投稿アーカイブページのページヘッダーにサブテキストを入力する</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p>外観→カスタマイズ→lightningページヘッダー設定</p>



<p>投稿（または作成した投稿タイプ）を選択→表示要素（投稿）：「投稿タイプ」選択</p>



<p>→サブテキスト入力欄が現れる！！</p>



<p>ここに入力するとサイト名の下に表示できる。</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-45/">投稿アーカイブページのページヘッダーにサブテキストを入力する</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://inada.ico21lab.com/memo-45/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>投稿アーカイブページのページヘッダー画像</title>
		<link>https://inada.ico21lab.com/memo-44/</link>
					<comments>https://inada.ico21lab.com/memo-44/#respond</comments>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Wed, 06 Dec 2023 05:18:53 +0000</pubDate>
				<category><![CDATA[アーカイブページ]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=1679</guid>

					<description><![CDATA[<p>外観→カスタマイズ→Lightningページヘッダー設定→投稿 背景画像を、PC、モバイルそれぞれ設定できる。</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-44/">投稿アーカイブページのページヘッダー画像</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading"></h2>



<p><strong>外観→カスタマイズ</strong>→<strong>Lightningページヘッダー設定→投稿</strong></p>



<p>背景画像を、PC、モバイルそれぞれ設定できる。</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-44/">投稿アーカイブページのページヘッダー画像</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://inada.ico21lab.com/memo-44/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
