[CSS] 티스토리 슬라이드쇼 이미지 크기와 여백, 버튼 투명도 수정

간만에 공책 스킨을 적용해보면서 사용자화 수정을 해보았다. 티스토리의 여러 이미지 슬라이드쇼 기능에서 이미지를 크게 보이도록, 버튼이 선명하게 나타나도록 수정해보았다.

블로그 20년 해오면서 많은 유료 무료 스킨들을 써봤다. 개인적으로 프라치노 공책 스킨은 속도와 간결함, SEO 면에서는 수익형 애드센스에 특화된 라꼬 스킨에는 밀린다. 하지만 돈 벌 생각없이 일기장처럼 꾸미는 블로그에는 제격이다.

티스토리 유료스킨 3대장 속도비교 테스트 >

카카오의 멍멍 병짓거리로 인해 블로그 본진은 워드프레스로 이사해왔지만, 티스토리에도 아직 깨작깨작 올리는 곳은 있다. 맛집 후기나 애 데리고 키즈카페 갔다온 것 같이 돈 안되는 것들 취미 포스팅이다.

티스토리 이미지 좌우 가로폭 여백없이 꽉 차게 보이는 모습

공책 스킨 사용자화 수정을 하면서 이렇게 본문 텍스트 영역은 좌우에 여백을 주고, 이미지는 화면 가로폭에 꽉 차게 만들어서 깔끔하게 해놓았었다.

그런데 이미지 슬라이드쇼 형태로 삽입을 하니 좌우 여백이 다시 생긴다. 심지어 좌우 슬라이드 넘김 버튼과 겹치지 않게 이미지 사이즈가 줄어들어서 코딱지만하게 나와버린다.

티스토리 슬라이드쇼 이미지

🔺 최종적으로는 이와 같은 형태로 이미지 슬라이드쇼가 보이도록 수정하였다. 단일 이미지와 마찬가지로 슬라이드쇼에서도 좌우 여백이 없이 화면 꽉차는 형태가 되도록, 그리고 저 화살표 버튼이 흐려서 있는지 잘 안보이는데 클릭할 때만 하얗게 진해지는게 아니라 아예 항상 진하게 보이도록 고쳤다.

슬라이드쇼 좌우 여백 수정

먼저 슬라이드쇼 이미지도 좌우 여백이 없도록 늘려주는 부분이다.

#fc-article .image-container {
    display:block !important;
}

@media (max-width:800px) {
    #fc-article {
        padding-left: calc(5vw - 4px);
        padding-right: calc(5vw - 4px);
        margin-left: calc((5vw - 4px) * -1);
        margin-right: calc((5vw - 4px) * -1)
    }

    #fc-article .imageslideblock {
        display:block !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

}

#fc-article 부분은 원래 사용자화 수정을 할 때 단일 이미지의 좌우 가로방향 여백을 없애서 화면 꽉차게 해주었던 부분이다.

본문에 (-) marging 걸리고 동일한 수치만큼 padding이 걸려서 여백을 만드는 형태이다. 이렇게 하면 보기에는 똑같지만 실제로 최대폭은 크지만 여백을 주는 상태가 된다. 이미지나 다른 오픈그래프를 본문 폭보다 늘릴 수 있는 여지가 생기게 된다.

일단 이미지가 작게 표시되는 이유를 보니, display:flex 가 속성으로 설정되어 있기 때문으로 보인다. 옆에 버튼이 있으니 그만큼 auto로 사이즈를 줄였던 것이다. display:block 속성으로 바꿔주니 원래의 자기 사이즈대로 표시가 된다.

그리고 미디어쿼리를 이용해 800px 모바일 반응형 화면에서만 좌우 역마진을 주도록 하면 단일 이미지와 마찬가지로 화면 가로폭에 꽉찬 형태로 보여지게 된다.

말은 쉬운데 어디를 바꿔야 하는지 무얼 건드려야 하는지 찾느라 한참을 헤맸다. 기초 지식이 없으니 챗지피티에 물어봐도 답 구하기가 어렵다.

이미지 슬라이드쇼 버튼 투명도 조정

버튼은 티스토리 자체에서 불러오는 배경 투명한 이미지로 사용하는 것인데, 여기에 걸려있는 투명도를 강제로 선명하게 바꿔주어야 한다.

.image-container .btn span {
    opacity: 1!important;
}

이렇게 해주면 하단 마크 바를 포함한 전체 슬라이드쇼 부분인 imageslideblock 안의 이미지가 표시되는 부분 image-container 영역에서 버튼의 투명도가 사라져서 선명한 하얀색으로 항상 표시가 된다.

초기 값, 마우스 올렸을 때, 클릭한 후 각각의 경우에 대해 다르게 설정해줄 수 있는데, 하이퍼링크 css 설정 규칙에 따라 hover, touch 등의 옵션에 대해 따로 지정해주면 된다.

일단은 방문자가 슬라이드쇼 이미지를 보게 만드려는 것이 목적이라, 더 복잡한 기능이나 예쁘게 꾸미는 것보다는 큼직하게 잘보이게 하는 것에 중점을 두었다.

아예 티스토리 이미지 슬라이드쇼에서 왼쪽 오른쪽 드래그 시에 이미지가 넘어가는 기능도 해보고 싶었는데 지금의 실력으론 잘 되지 않아서 훗날을 도모하기로 했다. 자바스크립트나 css에 대해 좀 더 공부한 뒤에 다시 도전해 봐야겠다.

0 0 투표
Article Rating

0 Comments
Inline Feedbacks
댓글 모두 보기