可愛い注意書きボックスを作ろう！HubSpotカスタムモジュールでふわもこデザイン

[{"name":"box_type","label":"メッセージタイプ","type":"choice","choices":[["note","補足（Note）"],["warning","注意（Warning）"],["tip","ヒント（Tip）"],["info","リソース紹介（Info）"],["question","質問形式（Question）"]],"default":"note","required":true}, {"name":"content","label":"本文","type":"richtext","required":true}]

{% set icon_map = {
    'note': '📝',
    'warning': '⚠️',
    'tip': '💡',
    'info': '🔗',
    'question': '❓'
  } %}
  
  <div class="custom-message-box custom-message-box--{{ module.box_type }}">
    <span class="custom-message-box__icon">{{ icon_map[module.box_type] }}</span>
    <div class="custom-message-box__content">
      {{ module.content }}
    </div>
  </div>

.custom-message-box {
    padding: 1.25rem 1.5rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 2rem 0;
    font-size: 1rem;
    line-height: 1.8;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  
  .custom-message-box__icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.3rem;
    opacity: 0.9;
  }
  
  .custom-message-box--note {
    background: linear-gradient(to bottom right, #eaf6ff, #f5fbff);
    border-left: 5px solid #64b5f6;
  }
  
  .custom-message-box--warning {
    background: linear-gradient(to bottom right, #fff1e6, #fff7f0);
    border-left: 5px solid #ffa726;
  }
  
  .custom-message-box--tip {
    background: linear-gradient(to bottom right, #eafaf1, #f4fff7);
    border-left: 5px solid #81c784;
  }
  
  .custom-message-box--info {
    background: linear-gradient(to bottom right, #f4f4f7, #ffffff);
    border-left: 5px solid #90a4ae;
  }
  
  .custom-message-box--question {
    background: linear-gradient(to bottom right, #f6f0fa, #fdfaff);
    border-left: 5px solid #ba68c8;
  }
  
  .custom-message-box__content p {
    margin: 0.2rem 0;
  }
  

{"global":false,"content_types":["LANDING_PAGE","SITE_PAGE","BLOG_LISTING","BLOG_POST"],"host_template_types":["PAGE","BLOG_LISTING","BLOG_POST"],"is_available_for_new_content":true}