반응형 ▸티스토리 이야기/•티스토리 꾸미기47 티스토리 꾸미기 | 블로그 하단의 푸터 영역 꾸미기 #2 블로그 '푸터' 영역 꾸미기 #2푸터를 꾸미는 주요 이유▪ 정보 제공: 푸터에는 연락처, 사이트맵, 저작권 정보 등 중요한 정보를 포함할 수 있습니다. ▪ 브랜드 이미지 강화: 통일된 디자인과 색상 등을 사용하여 브랜드 이미지를 강화하고 일관성을 유지할 수 있습니다. ▪ SEO 향상: 푸터에 키워드를 포함한 텍스트를 추가하면 검색 엔진 최적화(SEO)에 도움이 될 수 있습니다.▪ 푸터를 잘 꾸미면 웹사이트의 전반적인 사용자 경험이 향상되고, 방문자들에게 긍정적인 인상을 줄 수 있습니다.이번에는 '푸터' 영역 꾸미기 #1에 이어 글 크기를 키우거나 로고를 추가하여 '푸터'를 더 스타일리시하게 꾸미는 방법에 대해 알아보겠습니다. '푸터 1'의 글 크기 변경하기푸터 1의 글 크기를 변경하는 방법은 HT.. 2025. 1. 15. 티스토리 꾸미기 | 블로그 하단의 푸터 영역 꾸미기 블로그 '푸터' 영역 꾸미기 #1블로그의 푸터(Footer)란 블로그 하단에 위치한 영역으로, 주로 저작권 정보나 사업자 정보 등을 표기하는 부분을 말합니다. 이 영역은 방문자들에게 중요한 정보를 제공할 뿐만 아니라, 블로그의 전체적인 디자인과 분위기를 완성하는 데에도 중요한 역할을 합니다. 티스토리 블로그의 경우, 기본 푸터 문구는 "Designed by 티스토리 (c) Kakao Corp."로 설정되어 있지만, 사용자의 취향에 맞게 수정할 수 있습니다. 이를 통해 블로그가 본인만의 개성을 표현할 수 있게 됩니다.내 블로그 관리 > 왼쪽 메뉴에서 꾸미기 > 스킨편집으로 들어가서 아래 부분의 푸터 문구 1과 푸터 문구 2를 수정해주면 됩니다. '푸터'의 기본 문구 변경하기푸터 변경하기:처음 블로그를 시.. 2025. 1. 13. 티스토리 꾸미기 | 북클럽 스킨 관련글 썸네일 정사각형 설정하기 '관련글' 썸네일 정사각형 설정하기'북클럽 스킨'의 관련글 썸네일은 가로로 길게 되어 있습니다. 이 형태도 나쁘지 않지만, 정사각형 비율의 썸네일이 깔끔하고 일관된 느낌을 줄 수 있어 많이 선호되며, 특히 정사각형 썸네일은 다양한 해상도에서 일관된 모양을 유지하도록 돕습니다.'관련글' 썸네일을 정사각형 비율 미리보기 '관련글' 썸네일 HTML 수정하기1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다. 2) [Ctrl]+[F] 키를 이용해 s_article_related_rep_thumbnail을 찾아줍니다.s_article_related_rep_thumbnail 3) img 태그에서 C176x120 부분을 C150x150으로 수정 후 [적용]을 클릭합니다. '관련.. 2025. 1. 11. 티스토리 꾸미기 | 북클럽 스킨 상단과 하단에 광고 2개씩 넣는 방법 상단과 하단에 각각 2개의 광고를 넣는 방법티스토리 관리자에서 자동 광고 삽입 기능을 사용하면 본문 상단과 하단에 광고를 삽입할 수 있습니다. 하지만 이 기능이 제대로 작동하지 않을 때가 종종 있습니다. 이에 광고 노출을 통해 더 많은 수익을 얻기 위해, HTML 코드를 사용하여 상단과 하단에 각각 2개의 광고를 넣는 방법을 소개합니다. 상단과 하단의 설정 미리보기 상단과 하단에 광고 적용 절차 요약📌 북클럽 스킨의 상, 하단에 광고를 적용하는 절차는 다음과 같이 요약할 수 있습니다.1. 애드센스 홈페이지에서 상단용 광고 2개와 하단용 광고 2개를 생성합니다.2. 생성한 상단과 하단 광고 코드 중 PUB 숫자와 SLOT를 메모장에 메모해 둡니다.3. 편집한 HTML 코드를 스킨 편집기에서 HTML 코.. 2025. 1. 9. 티스토리 북클럽 | 코드블럭에 D2Coding 코팅체 적용하기 코드블럭에 D2 Coding 코팅체 적용하기개발자들 사이에서 한글과 영문의 조화가 잘 되어 평이 좋은 네이버 D2Coding 폰트를 코드 블록에 적용해 보겠습니다. 모든 폰트를 바꾸는 것은 아니며, 코드 블록에 한정하여 적용합니다. ⁕ 제가 북클럽 스킨을 사용하고 있기 때문에 북클럽을 중심으로 설명드립니다. 아마 다른 스킨들도 웹폰트 적용 위치만 약간 다를 뿐, 큰 차이는 없을 것이라 생각합니다.📌 D2Coding 폰트를 적용하는 이유!일부 폰트에서는 알파벳, 한글, 특수기호, 숫자들의 구별이 어려운 경우가 있습니다. 예를 들어, 숫자 1과 알파벳 l, 숫자 0과 알파벳 O는 폰트에 따라 구별하기 어려울 수 있습니다. D2Coding 폰트는 이러한 혼선을 최소화하기 위해 나눔바른고딕을 기본으로 하고 있.. 2024. 11. 30. 티스토리 북클럽 스킨 | 글 목록 하단, 페이지 번호 꾸미기 글 목록 하단, 페이지 번호 꾸미기. 제가 사용하는 웹폰트 때문인지 북클럽 스킨의 특성 때문인지는 알 수 없지만 글 목록 하단의 페이지 목록에서 사용자가 현재 보고 있는 페이지를 확인하기 어려운 경향이 있습니다. 이 부분을 CSS 코드를 수정하여 테두리로 강조하고 또 마우스 오버 시 밑줄을 없애고 색상을 변경하여 쉽게 인식할 수 있도록 수정해 보겠습니다. 페이지 번호 꾸미기 예제페이지 번호 꾸미기 (전)페이지 번호 꾸미기 (후) 페이지 번호 꾸미기 CSS 코드 수정① CSS코드를 수정하려면 '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > CSS로 들어갑니다.② ctrl+F를 눌러 .pagination .selected { 를 검색하여 찾아줍니다..pagination .selected { ③ .. 2024. 11. 15. 티스토리 꾸미기 | 본문 이미지에 그림자 및 확대 효과 주기 본문 이미지에 이벤트 효과를 주기.이번에는 본문에 업로드된 이미지에 그림자 효과 및 모서리를 둥글게 만들기, 마우스 오버 시 확대 등 다양한 효과를 넣는 방법에 대해 알아보겠습니다. 참고로 스킨에 따라 세부적인 내역에 차이가 있을 수 있으며, 제 경우는 티스토리 스킨 중에서 "Book Club"을 사용하고 있어 이 글의 설명도 이 스킨을 기준으로 하고 있습니다.📌 본문 이미지 이벤트 내용1. 이미지의 모서리를 둥글게2. 이미지에 그림자 효과3. 이미지에 얇은 테두리4. 이미지에 마우스 오버 시 이미지 확대 효과 CSS코드 적용법본문의 이미지 이벤트 효과는 CSS 코드만 추가하는 간단한 방식입니다CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 1. 'h.. 2024. 10. 2. 티스토리 꾸미기 | 하이퍼링크 CSS코드 모음집 (북쿨럽 스킨) 하이퍼링크의 CSS코드 스타일 모음집. 블로그 본문의 하이퍼링크에 효과를 주는 것은 사용자 경험을 향상시키는 좋은 방법입니다. CSS를 사용하면 하이퍼링크에 다양한 효과를 쉽게 적용할 수 있습니다. 하이퍼링크에 마우스를 올릴 때 색상이나 밑줄 등의 스타일을 변경하며 이를 통해 클릭 가능한 요소를 더 효과적으로 알리고, 피드백을 제공할 수 있습니다. 하이퍼링크의 CSS코드 적용법필요한 하이퍼링크의 CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 📌 자세한 설명은 아래 포스팅을 참고 하시기 바랍니다.2024.09.26-티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들기 (북쿨럽 스킨) 티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들.. 2024. 9. 27. 티스토리 꾸미기 | 본문의 하이퍼링크에 마우스오버 효과 만들기 (북쿨럽 스킨) 하이퍼링크에 마우스오버 효과를 만들기. 블로그 본문의 하이퍼링크에 효과를 주는 것은 사용자 경험을 향상시키는 좋은 방법입니다. CSS를 사용하면 하이퍼링크에 다양한 효과를 쉽게 적용할 수 있습니다. 하이퍼링크에 마우스를 올릴 때 색상이나 밑줄 등의 스타일을 변경하며 이를 통해 클릭 가능한 요소를 더 효과적으로 알리고, 피드백을 제공할 수 있습니다.이번에는 많은 분들이 물어보시는 제가 사용하는 하이퍼링크에 대해 알아보겠습니다.제가 사용하는 하이퍼링크는 플러그인의 무지개 링크가 아닌 CSS에 코드를 추가한 방식입니다. CSS코드 적용법작업 방법은 의외로 간단합니다.필요한 하이퍼링크의 CSS코드를 "관리 > 스킨편집 > CSS"로 진입 후 CSS탭 맨 아래 넣어 주기만 하면 됩니다. 1. 'html'탭에서 '.. 2024. 9. 26. 이전 1 2 3 4 ··· 6 다음 반응형
