리카수니 블로그 첫 화면 만들기
리카수니
... 분 소요
위치 메인-- 가젯
<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>
이전 글
...
다음 글
...
