블로그 관리 (Blog Management)/BiCute Skin 18

BiCute Skin ver.2.3.0217 - 수정 사항

자잘한 수정은 계속해서 있었지만 이번에 크게 눈에 띄진 않지만 소소게 많은 기능들에 수정이 있었습니다. 댓글창 관련 최신 댓글이 먼저 보이도록 정렬 댓글의 댓글은 가장먼저 달린(오래된) 댓글이 먼저 보이도록 지정 프로필 사진과 글 간격 재조정 댓글간의 간격과 수정 버튿들 위치 재조정 다크모드 다크모드 스위치 아이콘을 해와 달로 변경 자동 목차 목차로 사용할 내용이 없을경우 자동 목차 박스가 나타나지 않도록 변경 목차 박스 내부의 컨텐츠 높이 재조정 1단 서랍 사이드바의 간격 재조정 1단 서랍 사이드바 레이아웃 관련 전체적인 조정 기존에는 2단 우측 사이드를 우선 고려하여 설정하였었지만, 이제는 1단 서랍 사이드바 형식에서도 모두 문제없이 사용할 수 있도록 수정하였습니다. ※ 기존 스킨 사용자분들께서는 최..

[Tistory Odyssey Skin] 댓글 최신순으로 정렬하기와 밑줄 추가

스킨에 소소한 업데이트가 있었습니다. 변경된 내용은 아래와 같습니다. #1 댓글 최신순 정렬하기 Odyssey Skin 기준으로 댓글 부분은 위와 같습니다. 위와 같이 수정해주면 최신순으로 정렬이 됩니다. 추가로. .area-reply .list-reply-comment .item-reply:last-child { margin-bottom: 0; } 이라고 되어있는 부분을 찾아 아래와 같이 fitst-child로 변경해 줍니다. .area-reply .list-reply-comment .item-reply:first-child { margin-bottom: 0; } #2 밑줄에 스타일 추가 밑줄의 색상과 두께, 그리고 거리를 조금 수정하였습니다.

라인 일본 계정 스탬프 구매(선물)에 대한 안내

#1. 일본 라인 계정 생성에 관하여 우선 일본 라인 계정 생성 방법인데, 지금까지는 어떻게 해야 만들 수 있는지 물어보는 분들에게 나름 설명을 드렸었는데... 사람에 따라서 **가 안된다거나 **가 안 나온다거나, 이제는 막힌 거 같다.라고 답변을 주셨습니다만, 제가 직접 만들면서 설명하는 게 아니라 현재는 어떻게 바뀌었는지 모릅니다. 그리고 제가 라인 계정 생성할때만해도 이미 진작부터 막혔다는 이야기가 있었지만 잘 됐었기에... 이 부분을 설명드리는 건 여러 가지 변수가 있어 앞으로 일본 라인계정 생성에 관한 질문은 단호하게 거절합니다. #2. 일본 스탬프를 사용하고 싶지만 일본 계정이 없어 구매를 못하고 있는 분들에게 원하는 스탬프(또는 테마)가 있는데, 일본 계정이 없어서 사고 싶어도 살 수가 없..

BiCute 스킨 ver.2.0 - 대규모 업데이트

BiCute 스킨에 많은 부분 변화가 있었습니다. 전체적으로 모바일에서 보기 좋아졌으며, 효과들이 단순화 되었습니다. 추가로 게시물의 스타일을 조금은 애플스럽게(?) 변경하였습니다. 상세한 변동 내용은 아래와 같습니다. 커버 스타일 Ver. 1 Ver. 2 (1) 전체적인 마우스 오버 효과 삭제 썸네일에 검게 테두리가 나타나는 효과 / 제목에 배경 색이 슬라이드 되는 효과 제거. 마우스 포인터에 효과를 주어 링크 위로 마우스가 올라가면 포인터가 변하도록 변경 (2) 반응형 1:1 비율 3단 포스터 하단 제목을 삭제 / 이미지로 표시 / 게시물간 여백 조절 (3) 단순 텍스트 타입 스타일 변경 하단 날짜 삭제 및 모바일에 어울리는 디자인으로 변경 본문 스타일 (1) 폰트 색상 조절을 통하여 라이트 모드와 ..

티스토리 이용자 제작 스킨 설치 및 적용하기

유저들이 제작한 이용자 제작 스킨을 자신의 블로그에 적용하는 방법입니다. #1 스킨 파일을 다운 이용자가 직접 제작한 스킨 파일을 다운 받습니다. 공유 방식이 어떻든 압축이 되어있다면 압축을 다 풀어줍니다. #2 스킨 파일을 업로드 1) '블로그 관리 > 꾸미기 > 스킨 변경'으로 이동합니다 2) '스킨 등록' 버튼을 클릭 3) '추가' 버튼을 눌러 다운 받은 파일을 모두 업로드 해 줍니다. * 파일은 폴더째로 업로드 되지 않기 때문에 바깥에 있는 파일을 모두 업로드 한 후, images 폴더 안에 파일들도 다시한번 모두 업로드 해 줍니다. (폴더는 자동으로 지정되니 신경스지 않아도 됩니다) 4) 업로드가 완료되었다면 '저장'을 합니다. #3 블로그에 적용 1) '꾸미기 > 스킨 변경'에서 '스킨 보관함..

[Tistory Odyssey Skin] 소소한 수정과 정리. 다크모드의 추가

#1 푸터 영역 수정 오디세이 스킨에 관련 사이트를 등록해놨을 경우 푸터 근처로만 가져가도 마우스 포인터가 활성화되는데, 원래는 +를 눌러 활성화하여 목록을 나오겐 한 후 사이트를 이동하는 것이지만, 아무것도 보이지 않아도 허공을 클릭하면 보이지는 않지만 해당 사이트로 이동하게 되는 문제를 수정하였습니다. #2 HTML / CSS / JS 정리 겸 리팩터링 파일 정리, 각 파일별 소스 줄 맞춤 등 쓸데없는 작업을 상당히 많이 했습니다. 중간중간 왜 있는지 모를 아무런 내용도 없는 속성들도 발견할 수 있었기에 모두 정리를 했습니다. #3 다크 모드를 사용할 수 있게 되었습니다 원래는 전혀 예정에 없던 기능이었지만, 아무래도 있는 게 좋을 거 같아 다크 모드 기능을 넣었습니다. 다크 모드라도 이미지 같은 경..

[Tistory Odyssey Skin] 포스터 타입 커버 수정

Odyssey 스킨의 5가지 커버 스타일중 4번째 커버 스타일을 수정해 보았습니다. #1 포스터 타입 커버 5가지 커버 스타일중 4번째. 포스터 스타일은 다음과 같이 생겼습니다. 새로타입으로 길쭉하게 되어있어, 말그대로 포스터나 책 리뷰용으로 괜찮게 생겼지만... 둘다 저랑은 인연이 없는지라, 이 커버 스타일은 사용할 일이 없을줄 알았습니다. 하지만 기왕 있는거... 그냥 제 스타일대로 뜯어고쳐서 다른데 써먹을 생각으로 열심히(?) 수정을 해 보았습니다. #2 수정하기 박스 사이즈 변경 주말 심심풀이 삼아 아무생각없이 하다보니 기록이 누락되어 대충 코드만 남겨봅니다. 포스터 관련 CSS의 범위는 대략 다음과 같습니다. [style.css:2483~2595] 아래 내용으로 수정하였습니다. /* articl..

[Tistory Odyssey Skin] 베이직 타입 커버 썸네일 수정

#1 베이직 타입 커버 썸네일 이제 블로그에 글이 조금씩 쌓여가면서 새로운 타입의 커버를 하나씩 추가하게 되었습니다. 이미지 비율 유지 타입, 단순 텍스트 타입에 이어 3번째로 사용하게 되는 커버인 '베이직 타입'입니다. 베이직 타입 커버를 사용해 보면, 썸네일의 이미지가 깔끔하지 못하고 억지로 이미지를 과하게 줄여서 굉장히 자글자글하게 깨진 상태로 보입니다. 특히나 이미지보다 글자가 메인일 때 크게 눈에 띄는데... 이 부분을 어떻게든 수정해 보기로 했습니다. #2 수정하기 해당 부분은 스킨 편집의 HTML과 CSS가 아닌, 자바스크립 파일 중 common.js 안에 포함되어 있습니다. 자바스크립트를 수정하기 위해선 메모장이나 vscode 등의 코드 편집기를 사용하시면 됩니다 해당 파일을 열어 다음 항..

[Tistory] 자동 목차(TOC) 적용하기

#1 TOC란? Table of contents(TOC)는 블로그나 사이트에서 종종 볼 수 있는데, 글을 작성하면서 사용된 태그(h1, h2 ...)를 이용하여 자동으로 목차를 만들어 주는 기능입니다. 검색을 해보면 수많은 TOC 관련 내용이 있는데 대부분 완전히 동일한 내용이고, 화면의 사이즈를 조절하면 화면을 뚫고나가던가 본문을 덮어버리는 설정들이 많아 가장 많이 사용하는 TOC를 이용하여 제 스타일에 맞게 조금 수정하였습니다. #2 TOC 적용하는 방법 1. js 파일 다운 다음 파일을 다운받아 티스토리의 HTML 편집으로 이동하여 파일을 업로드합니다. 2. js 파일 적용 HTML 편집에서 위쪽에 다음 코드를 삽입해 줍니다. 3. 목차 적용할 장소 찾기 HTML 편집에서 목차를 적용하기 위한 본문..

[Tistory] 블로그 상단 진행바(Progress Indicator) 넣기

#1 Progress Indicator 진행 바, 상단 스크롤, 프로그래스 인디케이터, 프로그래스 바 등 다양하게 불리고 있는 스크롤에 따른 진행도를 표시해주는 선을 블로그에 삽입하는 방법입니다. #2 블로그에 적용하기 HTML 편집에서 가장 아래쪽으로 이동한 후, 다음 코드를 복사하여 위쪽에 붙여 넣어주면 적용은 끝입니다. 중간에 보이는 height: 4 가 선의 굵기를, color: "#180204"가 선의 색상을 나타냅니다. 숫자만 바꿔주거나 ""안에 원하는 색상을 넣어주시면 쉽게 자신의 스타일로 수정할 수 있습니다. #3 기타 이 항목은 신경 쓰지 않으셔도 됩니다. HTML에 스크립트 계속 적히는거 싫어하는 스스로를 위해서(?) 만든 파일입니다. 파일 업로드 후, 다음 한줄만 삽입하면 작동.

반응형