Atelier BiCute

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

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

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

#1 자체 문제점이라는 게 무엇? 스킨을 수정하면서 블로그를 사용하다 보니 '어? 이건 왜 이러지?' 싶은 문제점들이 몇 가지 보이기 시작했습니다. 처음엔 내가 뭔가 수정하다가 잘못 건드렸나 보구나... 싶었는데 다른 오디세이 스킨을 쓰는 사람들 모두에게 이 증상이 나타나고 있는 것을 확인했습니다. 공식적으로 배포한 스킨 자체의 문제였기에 해당 문제를 찾아서 제 맘대로(?) 수정해 보았습니다. #2 오류 1. 그리고 수정. 이 부분은 오류...라고 하기엔 별 문제는 아니고, 그렇다고 정상이라고 보기엔 애매한 것 같아 일단 수정은 하였습니다. 비교를 위해 우선 수정 전, 후 이미지부터 확인해 보시고 원하신다면 따라서 수정하시면 될 거 같습니다. 웹 브라우저의 사이즈를 조절하다보면 PC 모드와 Mobile ..

#1 부드러움이 필요하다 어느 순간 문득 썸네일 이미지들이 네모네모 한 것이 너무 신경 쓰이기 시작했습니다. 로고도 원형이고, 트위터의 게시물도 모서리가 살짝 둥글어서 서로 어울리지 않아 보이기도 했고요. 그래서 수정해 보았습니다! #2 썸네일 이미지의 모서리를 둥글게 만들기 ※ 아래 내용은 이 블로그에서 현재 사용하고 있는 Odyssey Skin의 [이미지 비율 유지 타입]에만 해당합니다. 메인 화면의 썸네일 (1) [style.css:2161~2163] .article-type-common .thumbnail .img-thumbnail { display: none; }을 찾아 다음과 같은 내용을 추가해줍니다. .article-type-common .thumbnail .img-thumbnail { di..

#1 Odyssey 스킨의 프로필 박스 이 블로그를 스킨 글을 적으려고 시작한 것이 아닌데 언제까지 스킨 관련 글을 적게 될 것인가!! 이전 글로 대충 취향대로 다 만들어졌다고 생각했지만... 뭔가 중요하진 않지만 괜스레 눈에 거슬리는 것이 있었습니다. 사람에 따라 이쁘게 보일 수도 있겠지만 제 기준에서는 블로그의 모든 선이 가로로 그어져 있는데 프로필 영역의 테두리에 세로로 그어진 선이 있어 뭔가 모르게 계속 신경이 쓰여 지워버리기로 했습니다. #2 프로필 박스의 외곽선 지우기 블로그 관리 > 스킨 편집 > HTML 편집으로 이동한 후, CSS 탭으로 이동합니다. [style.css:1485~1491]의 '.area-aside .box-profile' 항목 중, [style.css:1488]인 'bor..

#1 Odyssey 스킨의 게시물 상단 썸네일 부분 처음에 자동으로 생성되는 '환영합니다!'만 봤을 때는 나름 잘 어울리는 거 같아서 그러려니 하고 넘어갔었는데, 새로운 게시물을 작성하면서 대표 이미지가 글자가 있는 이미지로 적용이 되어버리니 제목 부분이 매우 혼란스러워졌습니다. 그리하여 상단의 이미지는 크게 중요하지 않고 범위를 너무 넓게 차지하고 있기에 제거하기로 하였습니다. #2 게시물 상단 썸네일 제거하기 (1) 관리 페이지 > 스킨 편집 > HTML 편집을 클릭한 후 CSS탭으로 이동합니다. [style.css:2730~2738]의 '.article-header { 속성: 속성값 ... }' 내용과 [style.css:2741~2750]의 '.article-header:before { 속성: 속..

#1 페이스북 트위터 플러그인 Odyssey스킨은 사이드바 위치에 페이스북 트위터 플러그인이 기본으로 설정되어 있으며 사이드바-SNS를 설정하지 않아도 다음과 같이 공백으로 표시된 상태로 페이스북이 활성화되어있습니다. 저의 경우는 트위터는 사용하지만 페이스북은 사용하지 않아서 필요가 없는데, Odyssey스킨은 트위터 타임라인을 등록하더라도 여전히 페이스북이 우선 활성화되어있으며, Twitter 텍스트를 클릭해야 트위터가 활성화됩니다. 이게 여간 불편한 게 아닌데... 저와 동일하게 페이스북은 쓸 일이 없고, 트위터만 사용할 것이라면 아래와 같은 방법으로 해결할 수 있습니다. #2 수정하기 (1) 스킨 편집에서 HTML 편집을 선택한 후, 다음 부분(style.css:981~997)을 과감하게 삭제(또는..