ソーシャルメディアアイコンリンク

{% assign social_accounts = 'Facebook, Instagram, X, Tiktok, Pinterest, Snapchat, YouTube, Linkedin, GitHub' | split: ', ' %}

{% if settings.social_title != blank and show_title %}
  <p class="social-icons-title">
    {{ settings.social_title }}
  </p>
{% endif %}

<ul
  class="social-icons nav nav-horizontal nav-icons"
  aria-label="{{ 'general.accessibility.social_media_links' | t }}">
  {% for social_account in social_accounts %}
    {% assign social_handle = social_account | handleize %}
    {% capture social_link %}social_{{ social_handle }}{% endcapture %}
    {% unless settings[social_link] == blank %}
      <li class="nav-item">
        <a
          class="nav-link"
          href="{{ settings[social_link] }}"
          data-bs-toggle="tooltip"
          data-bs-placement="bottom"
          title="{{ social }}"
          aria-label="{{ social_account }}"
          target="_blank">
          {% case social_handle %}
            {% when 'facebook' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-facebook"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07"/>
              </svg>
            {% when 'instagram' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-instagram"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M16.98 0a6.9 6.9 0 0 1 5.08 1.98A6.94 6.94 0 0 1 24 7.02v9.96c0 2.08-.68 3.87-1.98 5.13A7.14 7.14 0 0 1 16.94 24H7.06a7.06 7.06 0 0 1-5.03-1.89A6.96 6.96 0 0 1 0 16.94V7.02C0 2.8 2.8 0 7.02 0h9.96zm.05 2.23H7.06c-1.45 0-2.7.43-3.53 1.25a4.82 4.82 0 0 0-1.3 3.54v9.92c0 1.5.43 2.7 1.3 3.58a5 5 0 0 0 3.53 1.25h9.88a5 5 0 0 0 3.53-1.25 4.73 4.73 0 0 0 1.4-3.54V7.02a5 5 0 0 0-1.3-3.49 4.82 4.82 0 0 0-3.54-1.3zM12 5.76c3.39 0 6.2 2.8 6.2 6.2a6.2 6.2 0 0 1-12.4 0 6.2 6.2 0 0 1 6.2-6.2zm0 2.22a3.99 3.99 0 0 0-3.97 3.97A3.99 3.99 0 0 0 12 15.92a3.99 3.99 0 0 0 3.97-3.97A3.99 3.99 0 0 0 12 7.98zm6.44-3.77a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z"/>
              </svg>
            {% when 'x' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-x"
                viewBox="0 0 255 239">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Artboard" transform="translate(-1, -9)" fill="currentColor" fill-rule="nonzero">
                        <g id="Twitter-X" transform="translate(1, 9)">
                            <path d="M0.621715062,0 L99.074372,131.822652 L0,239 L22.2976578,239 L109.037101,145.164644 L179.120186,239 L255,239 L151.007964,99.7625789 L243.225634,0 L220.927976,0 L141.045235,86.4205874 L76.5015288,0 L0.621715062,0 L0.621715062,0 Z M33,17 L67.897684,17 L222,223 L187.102316,223 L33,17 Z" id="path1009"></path>
                        </g>
                    </g>
                </g>
              </svg>
            {% when 'pinterest' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-pinterest"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M12 0a12 12 0 0 0-4.82 23c-.03-.85 0-1.85.21-2.76l1.55-6.54s-.39-.77-.39-1.9c0-1.78 1.03-3.1 2.32-3.1 1.09 0 1.62.81 1.62 1.8 0 1.09-.7 2.73-1.06 4.25-.3 1.27.63 2.31 1.89 2.31 2.27 0 3.8-2.92 3.8-6.38 0-2.63-1.77-4.6-4.99-4.6a5.68 5.68 0 0 0-5.9 5.75c0 1.05.3 1.78.78 2.35.23.27.26.37.18.67l-.25.97c-.08.3-.32.4-.6.3-1.67-.69-2.46-2.52-2.46-4.59 0-3.4 2.88-7.5 8.58-7.5 4.58 0 7.6 3.32 7.6 6.88 0 4.7-2.62 8.22-6.48 8.22-1.3 0-2.51-.7-2.93-1.5l-.84 3.3c-.26.93-.76 1.86-1.21 2.58A11.99 11.99 0 0 0 24 12 12 12 0 0 0 12 0z"/>
              </svg>
            {% when 'snapchat' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-snapchat"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M12.15 23.5h-.3c-1.42 0-2.34-.66-3.22-1.3-.6-.44-1.18-.85-1.86-.97a5.9 5.9 0 0 0-.98-.08c-.57 0-1.02.1-1.35.16-.2.04-.38.07-.5.07-.15 0-.3-.03-.36-.25-.05-.2-.1-.39-.13-.57-.1-.47-.18-.76-.37-.8-2.26-.35-2.9-.84-3.04-1.18a.45.45 0 0 1-.04-.15c0-.13.08-.25.21-.27 3.47-.58 5.02-4.2 5.09-4.35v-.01c.22-.44.26-.82.13-1.14-.24-.57-1.02-.82-1.53-.99l-.34-.11c-1.02-.42-1.1-.84-1.07-1.06.07-.37.55-.62.94-.62.11 0 .2.02.28.05.47.22.88.34 1.24.34.5 0 .71-.22.74-.24l-.05-.75c-.1-1.68-.23-3.75.29-4.94A6.25 6.25 0 0 1 11.75.5h.49c.97 0 4.27.28 5.83 3.84.52 1.18.39 3.26.29 4.94v.07l-.05.68c.03.02.23.22.68.23.34 0 .73-.12 1.16-.33a.86.86 0 0 1 .36-.07c.15 0 .3.03.42.08.35.13.58.38.59.64 0 .25-.18.61-1.08.98l-.34.11c-.51.17-1.29.42-1.53 1-.13.3-.09.69.13 1.13.07.16 1.62 3.78 5.09 4.36.13.02.22.14.21.27 0 .05-.02.1-.04.15-.14.34-.78.83-3.04 1.18-.18.03-.26.28-.37.8a8.1 8.1 0 0 1-.13.56c-.05.16-.15.24-.32.24h-.03c-.12 0-.3-.02-.5-.06a6.6 6.6 0 0 0-2.34-.07c-.68.12-1.25.53-1.86.97-.88.64-1.8 1.3-3.22 1.3z"/>
              </svg>
            {% when 'youtube' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-youtube"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M12.04 3.5c.59 0 7.54.02 9.34.5a3.02 3.02 0 0 1 2.12 2.15C24 8.05 24 12 24 12v.04c0 .43-.03 4.03-.5 5.8A3.02 3.02 0 0 1 21.38 20c-1.76.48-8.45.5-9.3.51h-.17c-.85 0-7.54-.03-9.29-.5A3.02 3.02 0 0 1 .5 17.84c-.42-1.61-.49-4.7-.5-5.6v-.5c.01-.9.08-3.99.5-5.6a3.02 3.02 0 0 1 2.12-2.14c1.8-.49 8.75-.51 9.34-.51zM9.54 8.4v7.18L15.82 12 9.54 8.41z"/>
              </svg>
            {% when 'linkedin' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-linkedin"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M22.23 0H1.77C.8 0 0 .77 0 1.72v20.56C0 23.23.8 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.2 0 22.23 0zM7.27 20.1H3.65V9.24h3.62V20.1zM5.47 7.76h-.03c-1.22 0-2-.83-2-1.87 0-1.06.8-1.87 2.05-1.87 1.24 0 2 .8 2.02 1.87 0 1.04-.78 1.87-2.05 1.87zM20.34 20.1h-3.63v-5.8c0-1.45-.52-2.45-1.83-2.45-1 0-1.6.67-1.87 1.32-.1.23-.11.55-.11.88v6.05H9.28s.05-9.82 0-10.84h3.63v1.54a3.6 3.6 0 0 1 3.26-1.8c2.39 0 4.18 1.56 4.18 4.89v6.21z"/>
              </svg>
            {% when 'tiktok' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-tiktok"
                viewBox="0 0 32 32"
                fill="currentColor">
                <path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z"/>
              </svg>
            {% when 'github' %}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="{{ icon_size | default: 20 }}"
                height="{{ icon_size | default: 20 }}"
                class="icon-social-github"
                viewBox="0 0 16 16"
                fill="currentColor">
                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
              </svg>
          {% endcase %}
        </a>
      </li>
    {% endunless %}
  {% endfor %}
</ul>