F9keNdht0AVQcppuf3xI7OoXlUQKLJAilfe6CEVo
Bookmark

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


리카수니 블로그 배경 만들기
위치 메인-- 가젯


<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>
 

댓글 쓰기
해당 자료에서 궁금하신 부분은 댓글로 남겨주세요.
최근 댓글을 불러오는 중...
태그