티스토리 북클럽스킨14 티스토리 북클럽 스킨 제목 높이 조절하기 티스토리 북클럽 스킨에서 글제목에 이미지 배경의 높이를 조절하는 방법에 대해 알아보겠습니다. 스킨편집 > html편집 > CSS에 들어가서 .post-cover { position: relative; z-index: 20; display: table; width: 100%; height: 340px; background-color: #6DC5D1; background-position: 50% 50%; background-size: cover; box-sizing: border-box;} height: 340px; → 180px로 수정 원하는 높이만큼 값을 넣어주면 됩니다. 이렇게 높이를 줄이면 제목과 본문 사이에 공간이 많이 비게 됩니다. 제목과 메타부분 공간을 줄여주기 .pos.. 2024. 7. 16. 티스토리 북클럽 스킨 이미지에 테두리 넣기 티스토리 북클럽 스킨을 사용하다 보면 이미지에 테두리가 있었으면 할 때가 있습니다. 이미지가 좀 더 도드라져 보일 수 있는 방법을 알아보겠습니다. css 수정 이미지에 테두리 넣기 /*comment*/를 찾아서 그 위쪽에 넣어줍니다./*이미지테두리 넣기*/ .entry-content figure.imageblock{ max-width:95%; border: 1px solid #e3e3e3; } border: 1px 에서 보더 두께를 설정할 수 있습니다. solid 는 일반 선으로 표시됩니다. dash로 하면 점선으로 표시됩니다. #e3e3e3 색상을 지정합니다. 이미지테두리에 그림자도 넣기 /*이미지테두리에 그림자 넣기*/ .entry-content figure.imageblock { ma.. 2024. 7. 16. 티스토리 북클럽 스킨 글제목 다 나오게 설정하기 티스토리 북클럽 스킨에서 글제목이 한줄로만 표시되어 제목이 다 보이지 않는 경우가 있습니다. 이럴때는 제목이 2~3줄로 세팅해두면 내용이 다 보이게 됩니다. CSS수정할 부분.post-cover .inner>h1 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } 코드 수정-webkit-line-clamp: 1;이라고 되어 있다면 1을 3으로 수정해 줍니다. 만약 이렇게 변경했는데도 적용이 안된다면.post-item .title { display: block; overflow: hidden; max-width: 98%; margin-.. 2024. 7. 16. 티스토리 버튼 넣기 티스토리 블로그 글에서 아래와 같이 버튼을 넣고 싶다면 서식을 활용하여 미리 저장해놓고 필요할 때 꺼내 쓰는 방법에 대해 알아보겠습니다. 코드 #"> 공모전 자세히 알아보기 버튼 형식이므로 #은 링크 경로를 넣으면 됩니다. ▶ 배경색 설정background-color: #00d7ff ▶ 양쪽 동그랗게 border-radius: 50px ▶ 글자색 color: #333 ▶ 폰트(글꼴) font-family: 'HSSanTokki20-Regular' ▶ 폰트 크기 font-size: 22px ▶ 배경 박스 두깨 border: 0 1, 2, 3, 4,... 등 두깨설정 가능 원하는 디자인으로 세팅해보시기 바랍니다. 서식등록버튼 디자인을 완성했다면 서식에 등록합니다. 서식관리에 들어가서 글쓰기 .. 2024. 7. 16. 티스토리 북클럽스킨 사이드바 고정시키기 티스토리 북클럽스킨에서 사이드에 카테고리와 광고를 넣고 고정을 시키는 방법에 대해 알아보겠습니다. 관리 페이지에서 스킨편지에 들어갑니다.CSS 에서 아래의 코드를 넣어주면 끝 /* 사이드바 고정 */ #aside { position: sticky; position: -webkit-sticky; top: -60px; } 이렇게 넣어주고 저장하고 블로그에서 확인해보면 사이드바가 아래로 스크롤 되지 않고 광고가 늘 노출이 될 수 있습니다. 2024. 7. 16. 티스토리 북클럽 제목바 색상 변경 티스토리 북클럽스킨에서 제목바에 이미지 말고 색상을 넣는법에 대해서 알아보겠습니다. 스킨편집 CSS에 들어가서 .post-cover를 검색합니다. .post-cover { position: relative; z-index: 20; display: table; width: 100%; height: 180px; background-color: #cbcbcb; background-position: 50% 50%; background-size: cover; box-sizing: border-box;} background-color : #cbcbcb; 부분에서 색상을 변경해줍니다. ▶ 그라데이션 배경을 원한다면 background: linear-gradient(-225deg, #fddb9.. 2024. 7. 15. 이전 1 2 3 다음
