리카수니 블로그 첫 화면 만들기 - 리카수니

리카수니 블로그 배경 만들기

위치 메인-- 가젯

<style>

  /* 단일 배너 레이아웃 스타일 */

  .custom-hero-banner {

    width: 100%;

    margin-top: 20px;

    margin-bottom: 0px; /* 기존 20px에서 0px로 수정하여 하단 여백 최소화 (더 줄이려면 -30px 처럼 음수값 입력) */

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid #e0e0e0;

    background: #f8f9f9;

    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

    transition: 0.3s;

  }

  

  .custom-hero-banner:hover {

    transform: translateY(-3px);

    box-shadow: 0 6px 15px rgba(0,0,0,0.1);

  }

  

  .custom-hero-banner a {

    display: block;

    width: 100%;

    text-decoration: none;

  }

  

  /* 가로형 이미지 비율 및 반응형 설정 */

  .custom-hero-banner img {

    width: 100%;

    max-height: 450px;

    object-fit: cover;

    display: block;

  }

  /* 블로그 기본 게시물 및 메시지 숨김 처리 */

  body.index #Blog1,

  body.home #Blog1,

  .status-msg-wrap,

  .status-msg-body,

  .status-msg-border {

    display: none !important;

  }

</style>

<div class="custom-hero-banner">

  <a href="https://www.likasuni.com/">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxm9j3Tv7b-FguwBTnN4x0IYAXxXWPLmysQ9KcklN06mQg6CFbrq89Q5ulxmXCYjPW49QEu4T09r9O5wsmJPea_oF4kZJmbsRWwu6RP37j3LYscP9srORoYsihtOaRxG0ZnIRW_YHUrXh7I7o321AKLAeMeUyp5nHw-H3Zs0iJGYH1plKhqrYbcSfjyUs/s1982/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202026-07-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.23.18.png" alt="리카수니 블로그 통합 안내 배너" />

  </a>

</div>

<script>

  /* 메인 화면에서 기본 블로그 글 숨기기 스크립트 */

  window.addEventListener('load', function() {

    if (window.location.pathname === "/" || window.location.pathname === "/index.html") {

      var blog = document.getElementById('Blog1');

      if (blog) blog.style.display = 'none';

      var msg = document.querySelector('.status-msg-wrap');

      if (msg) msg.style.display = 'none';

    }

  });

</script>