분류 전체보기103 [티스토리 블로그 꾸미기] 본문 공감 버튼 5분 만에 쉽게 꾸미기 안녕하세요! 지난번에 본문 표 꾸미기를 소개해드렸습니다. 이번에는 본문 공감 버튼들을 5분만에 쉽고 빠르게 꾸미는 방법을 알려드리겠습니다.이번 작업은 각 버튼들의 테두리 색상을 변경하고, 마우스를 올렸을 때 확대되는 느낌을 주는 방법을 소개해드리겠습니다. 저는 이 부분을 고치려고 약 13시간을 헤맸습니다. 여러분의 시간을 아껴드리겠습니다!이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인.. 인사이트/블로그 2024. 5. 25. 더보기 ›› [티스토리 블로그 꾸미기] 본문 표 꾸미기 안녕하세요! 지난번에 인용문 꾸미기 시리즈를 소개해드렸습니다. 이번에는 본문 표를 꾸미는 방법을 알려드리겠습니다.이번 작업은 각 표를 글자 길이에 맞게 조절할 수 있는 방법과 테두리 색상을 꾸미는 방법을 소개해드리겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인 표 스타일의 기본 설정은 회색 테두리에 각 박스 크기가 넓고, 텍스트가 왼쪽에 붙어 있는 것을 확인할 수 있습니다. .. 인사이트/블로그 2024. 5. 24. 더보기 ›› [티스토리 블로그 꾸미기] 인용문 꾸미기 3탄 (박스 스타일) 안녕하세요! 지난번에 인용문 꾸미기 2탄 블록 스타일에 이어, 이번에는 인용문 꾸미기 3탄 (박스 스타일)에 대해 알려드리겠습니다.이번 작업에서는 박스 우측 하단에 서명 같은 느낌을 주는 방법과 테투리, 배경색을 꾸미는 방법을 소개하겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인 박스 스타일의 기본 설정은 테두리가 회색으로 되어 있고, 배경은 아이보리 느낌으로 되어 있는 것을.. 인사이트/블로그 2024. 5. 23. 더보기 ›› [티스토리 블로그 꾸미기] 인용문 꾸미기 2탄 (블록 스타일) 안녕하세요! 지난번에 인용문 꾸미기 1탄 따옴표 스타일에 이어, 이번에는 인용문 꾸미기 2탄 (블록 스타일)에 대해 알려드리겠습니다.이번 작업은 1탄보다 쉽기 때문에 따라 하기 쉽습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 기본 설정 확인 블록 스타일의 기본 설정은 왼쪽 테두리가이 회색으로 되어 있는 것을 확인할 수 있습니다. 블록 스타일 변경하기 CSS 파일 내에서 코드 있는 부분 아무 .. 인사이트/블로그 2024. 5. 22. 더보기 ›› [티스토리 블로그 꾸미기] 인용문 꾸미기 1탄 (따옴표 스타일) 안녕하세요! 지난번에는 본문 리스트 형식의 여백 조절 방법을 소개해드렸습니다. 이번에는 본문에서 자주 사용되는 인용문인 따옴표 스타일을 꾸미는 방법을 알려드리겠습니다.저도 따옴표 스타일을 변경하려고 많은 시간과 실패를 경험했습니다. 이 글을 보는 여러분이 저와 같은 실패를 겪지 않도록, 방법을 자세히 소개하겠습니다.이번 작업에서는 따옴표를 위아래 배치하는 방법과, 필요에 따라 테두리 또는 배경색을 추가하는 방법을 안내해드리겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 .. 인사이트/블로그 2024. 5. 21. 더보기 ›› [티스토리 블로그 꾸미기] 본문 리스트 형식 꾸미기 안녕하세요! 지난번에는 굵은 글꼴 밑줄 효과 주는 방법을 소개했습니다. 이번에는 본문에서 리스트 형식을 꾸미는 방법을 알려드리겠습니다.기존의 방법으로는 리스트 형식을 바꾸기 어렵습니다. 여백, 글자색, 밑줄 등 텍스트와 배경만 스타일링할 수 있습니다. 이번 글에서는 여백 조절 방법을 알려드리겠습니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭합니다.새로운 창이 열리면 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. 우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 리스트 여백 조절 리스트 형식의 기본 설정은 왼쪽 여백이 많은 것을 확인할 수 있습니다.CSS .. 인사이트/블로그 2024. 5. 21. 더보기 ›› [티스토리 블로그 꾸미기] 굵은 글꼴 밑줄 효과 주기 이전 글인 본문 제목 1, 2, 3 스타일링에 이어, 이번 글에서는 굵은 글씨에 밑줄 효과를 주는 방법에 대해 소개해드리겠습니다. 이 효과는 글 작성 시에는 표현되지 않지만, 글을 다 작성한 후 읽을 때는 표현이 됩니다. 이 방법을 사용하여 강조하고 싶은 부분이나 중요한 포인트를 강조하면 더욱 읽기 쉬운 글이 될 것입니다.이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 굵은 글씨 밑줄 효과 주기 글.. 인사이트/블로그 2024. 5. 20. 더보기 ›› [티스토리 블로그 꾸미기] 제목 1, 2, 3 스타일링 (h2, h3, h4) 이전 글인 커버 이미지 변경하기에 이어, 이번에는 본문 제목 1, 2, 3 스타일링 방법에 대해 소개해드리겠습니다. 다양한 스타일링 방법이 있지만, 이번 글에서는 각 제목을 다르게 스타일링을 하는 방법을 안내해드리겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 제목 1 (h2) 제목 1의 기본 설정을 확인합니다. 폰트 크기 외에 다른 스타일은 적용되지 않은 것을 확인할 수 있습니다.CSS 파일 내에서.. 인사이트/블로그 2024. 5. 20. 더보기 ›› [티스토리 블로그 꾸미기] 커버 이미지 변경하기 이전 글인 카테고리 글자색 및 실선 색상 변경하기에 이어, 이번에는 블로그 글의 커버 이미지를 썸네일이 아닌 고정 이미지 또는 고정된 색상으로 설정하는 방법을 소개해드리겠습니다. 이 글에서는 썸네일 이미지가 커버 이미지에 맞지 않아 잘리는 현상을 방지하고, 고정된 이미지로 깔끔하게 보이도록 하는 방법에 중점을 뒀습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 단색 커버 이미지 기본 설정인 커버 이미지는.. 인사이트/블로그 2024. 5. 19. 더보기 ›› [티스토리 블로그 꾸미기] 카테고리 글자색 및 테두리 색상 변경하기 이전 글인 카테고리 추가하기에 이어, 이번에는 메인 카테고리와 서브 카테고리의 글자색 변경 및 서브 카테고리 테두리 색상 변경 방법을 소개해드리겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. ;새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 메인 카테고리 글자색 변경하기 사이드바에 추가한 카테고리의 기본 설정인 연한 검은색과 연한 회색으로 되어 있는 것을 확인할 수 있습니다.CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 .. 인사이트/블로그 2024. 5. 19. 더보기 ›› [티스토리 블로그 꾸미기] 카테고리 추가하기 이전 글인 사이드바 메뉴 글자색 변경하기에 이어, 이번에는 카테고리 추가하는 방법을 소개해드리겠습니다. 이번 글에서는 원하는 카테고리를 만들어서 추가하고, 메인 카테고리 아래에 서브 카테고리를 추가하는 방법을 안내해드립니다. 마지막으로 사이드바에 추가된 카테고리 글자색 변경 방법도 포함되어 있으니 끝까지 봐주세요.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 카테고리 관리 들어가기관리자 페이지 왼쪽 메뉴에서 '콘텐츠' 탭 안에 '카테고리 관리'를 클릭합니다.카테고리 관리에 들어오면, 기본 설정은 아무것도 되어 있지 않은 것을 확인할 수 있습니다. 메인 카테고리 추가하기 첫 번째로, '카테고리 추가'를 눌러 메인 카테고리를 추가합니다.카테고리 이름은 원하는 이름을 넣으세요. 그리고, 주제를 선택해주세요... 인사이트/블로그 2024. 5. 19. 더보기 ›› [티스토리 블로그 꾸미기] 사이드바 메뉴 글자색 변경하기 이전 글인 사이드바 메뉴 설정하기에 이어, 이번에는 사이드바 메뉴 글자색 변경하는 방법에 대해 소개해드리겠습니다. 포스 리스트 글자색과 통일감을 주기 위해 똑같은 색상으로 진행하겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지의 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 사이드바 메뉴 글자색 변경하기 사이드바 글자색이 기본 설정인 연한 회색으로 되어 있는 것을 확인할 수 있습니다. 카테고리 메뉴 글자색과 글씨 굵기 CSS 파일 내에서 아무 곳이나.. 인사이트/블로그 2024. 5. 19. 더보기 ›› [티스토리 블로그 꾸미기] 사이드바 메뉴 설정하기 이전 글인 콘텐츠와 사이드바 실선 색상 변경하기에 이어, 이번에는 사이드바 메뉴를 설정하는 방법을 소개해드리겠습니다. 이번 글에서 메뉴들의 위치는 각자 선호하는 위치로 이동할 수 있으니, 마음에 드는 곳으로 이동하는 것을 권장합니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 사이드바 메뉴 설정하기 관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '사이드바' 버튼을 클릭합니다.사이드바 설정에 들어오면, 기본 설정은 아무것도 되어 있지 않은 것을 확인할 수 있습니다.첫 번째로, 카테고리 메뉴를 사이드바 1번으로 이동합니다.각 메뉴 오른쪽에 '+' 버튼을 누르면 사이드바 번호가 나옵니다.두 번째로, 최근글/인기글 메뉴를 사이드바 2번으로 이동합니다. 세 번째로, 전체 방문자 메뉴를 사이드바 3번으로 .. 인사이트/블로그 2024. 5. 17. 더보기 ›› [티스토리 블로그 꾸미기] 콘텐츠와 사이드바 테두리 색상 변경하기 이전 글인 카테고리 리스트 글자색 변경하기에 이어, 이번에는 콘텐츠와 사이드바 사이의 실선 색상 및 사이드바 실선 색상을 변경하는 방법을 소개해드리겠습니다. 현재도 실선이 적용되어 있지만, 배경색에 가려 잘 보이지 않을 수 있습니다. 이번 글에서는 실선을 선명하게 보이도록 설정하는 방법을 알려드리겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 콘텐츠 실선 색상 변경하기 콘텐츠와 사이드바 사이의 실선이 .. 인사이트/블로그 2024. 5. 16. 더보기 ›› [티스토리 블로그 꾸미기] 카테고리 리스트 글자색 변경하기 이전 글인 카테고리 리스트 위아래 실선 변경하기에 이어, 이번에는 리스트 글자색을 변경하는 방법에 대해 소개해드리겠습니다. 기본 설정으로 된 글자색이 현재 적용된 배경색에 잘 보이지 않아서, 선명하게 보이도록 하겠습니다. 리스트 내에 제목, 본문 내용, 그리고 날짜까지 변경하겠습니다. 마지막에 소소한 선물 팁이 있으니, 끝까지 봐주세요.티스토리 '북클럽'스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 글자색 변경하기리스트 내 제.. 인사이트/블로그 2024. 5. 16. 더보기 ›› [티스토리 블로그 꾸미기] 카테고리 리스트 위아래 테두리 변경하기 이전 글인 카테고리 리스트 타입 변경하기에 이어 이번에는 리스트 위아래 실선을 변경하는 방법에 대해 소개해드리겠습니다. 현재도 실선이 적용되어 있지만, 배경색에 가려 잘 보이지 않을 수 있습니다. 선명하게 보이도록 변경하고, 게시글 별 구분선을 점선으로 설정하는 방법도 소개하겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 위쪽 실선 색상 변경하기 '전체 글' 하단에 연한 회색으로 실선이 있는 것을 확인.. 인사이트/블로그 2024. 5. 15. 더보기 ›› [티스토리 블로그 꾸미기] 카테고리 리스트 타입 변경하기 이번 글에서 블로그 홈이나 카테고리에서 보여지는 리스트 타입을 변경하는 방법에 대해 소개해드리겠습니다. 여러 가지 리스트 타입이 있지만, 개인적으로 설명드리는 '뉴북' 스타일이 좋다고 생각이 듭니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기 먼저, 새로운 글을 대충 작성해주세요. 이렇게 하면 리스트 타입 변경 전과 후의 모습을 미리보기를 통해 확인할 수 있습니다.관리자 페이지 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집' 버튼을 클릭하면 새로운 창이 열립니다.html 편집 창을 열면 기본 설정으로 되어 있습니다.새로운 창이 열리면, 오른쪽 메뉴에서 스크롤로 내려 '리스트' 탭 안에 '리스트 타입'을 찾습니다.'리스트 타입'에서 '북리뷰'를 클릭하면 다양한 리스트 타입이 나옵니다.. 인사이트/블로그 2024. 5. 15. 더보기 ›› [티스토리 블로그 꾸미기] 푸터 배경색/글자색 변경하기 이번 글에서는 블로그 푸터(바닥글) 배경색/글자색 변경하는 방법에 소개해드리겠습니다. 헤더 부분과 원리는 동일합니다. 코드의 위치만 조금 다르니 이 부분만 확인해서 변경하면 됩니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 배경색 변경하기 푸터(바닥글) 색상이 본문 배경색과 같은 것을 확인할 수 있습니다.CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#footer'를 입력합니다.. 인사이트/블로그 2024. 5. 15. 더보기 ›› [티스토리 블로그 꾸미기] 모바일 메뉴 배경색 변경하기 이전 글인 블로그 헤더 배경색/글자색 변경하기에서 배경색 변경한 후, 모바일 화면 전환 시 메뉴의 배경색이 투명한 것을 확인할 수 있었을 것입니다. 그래서 이번에는 검색 버튼과 색상을 통일하기 위해 모바일 메뉴 배경색을 변경하는 방법을 소개해드리겠습니다. 한번에 알려드리지 못해 죄송하지만, 이렇게 하나씩 변경되는 모습을 보며 성취감을 느끼실 수 있을 것입니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다. 모바일.. 인사이트/블로그 2024. 5. 15. 더보기 ›› [티스토리 블로그 꾸미기] 검색 버튼 배경색 변경하기 이전 글인 블로그 헤더 배경색/글자색 변경하기에 이어, 이번에는 헤더에 있는 검색 버튼(돋보기)의 배경색을 변경하는 방법을 소개해드리겠습니다. 지난 글에서 배경색을 변경했지만, 검색 버튼(돋보기)의 배경색이 함께 변경되지 않아 어울리지 않는 느낌을 받으셨을 것입니다. (제가 그래요...) 그래서 이번에는 검색 버튼의 배경색도 함께 변경하여 통일감을 주도록 하겠습니다.티스토리 '북클럽' 스킨을 기준으로 진행합니다. 스킨 편집 들어가기관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다. CSS 코드 바꾸기우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.. 인사이트/블로그 2024. 5. 14. 더보기 ›› 이전 1 2 3 4 5 6 다음
