본문 바로가기

티스토리/· 스킨편집31

티스토리 북클럽 스킨 최근글, 인기글 편집 북클럽 스킨의 사이드바 메뉴인 최근글, 인기글을 편집해 보겠습니다. 이 글은 누군가의 도움 요청으로 알려드렸는데 글로 남겨도 괜찮을 것 같아서 써봐요.^^ ▲ 최근글이 먼저 나오고 인기글을 클릭해서 보는 구조입니다. 인기글이 먼저 나오게 해 봅시다. ▲ 이 부분이 어디에 있는지 div 구조를 파악해야 합니다. 크롬 브라우저에서 F12를 눌러서 소스를 보죠. 살펴보니 div 'post-list tab-ui'에서 컨트롤해야 합니다. ▲ 스킨 편집 html 편집 화면으로 들어가서 찾기(Ctrl+f)로 post-list tab-ui를 찾아줍니다. 참고로 저는 html이나 css 편집 시 다른 편집기에서 수정 후에 복/붙합니다. 편집기는 sublimetext입니다. 무료니 이용해 보세요. ▲ ~ : 최근글 ~ :.. 2022. 1. 24.
티스토리 스킨 편집 기초 스킨 편집의 기초입니다. 조금만 공부하면 누구나 할 수 있어요. ▲ 크롬 브라우저를 기준으로 설명합니다. 엣지, 웨일 브라우저도 가능해요. 먼저 F12(검사)를 눌러 오른쪽에 검사창을 켜줍니다. 그럼 영어가 막 나와요. ▲ 검사창 구조를 간단히 살펴보면 1. 요소 선택 툴 2. 휴대폰 화면으로 보기 3. 현재 페이지의 HTML 4. 현재 페이지 또는 1. 요소 선택 툴로 선택한 요소의 CSS(style) 요 4가지 정도만 알면 충분합니다. 더 많이 알고 싶다면 막 클릭해보고 우클릭 메뉴도 보세요. "HTML은 사이트의 구조고 구조를 꾸미는 것은 CSS입니다." 예를 들어서 해볼게요. 먼저 1. 요소 선택 툴을 클릭하고 편집하고 싶은 부분을 클릭합니다. ▲ 홈 화면의 글 목록에서 제목 부분을 수정해봅시다... 2021. 10. 27.
글 목록 - 마우스 반응 꾸미기 .list-type-thumbnail .post-item:hover { /* 마우스가 올라가면 */ transform: scale(1.02); /* 크기를 1.02배 키운다 */ box-shadow: 6px 6px 12px #e9e9e9; /* 박스에 그림자를 넣는다 */ } 글 쓰는 것보다 스킨 꾸미기가 더 재미나다. 어쩔... 글도 써야 하니 꾸미기를 글로 남긴다. ㅎ 핑계 만랩. 2021. 10. 25.
코드블럭 꾸미기(테마, 넘버링) - 티스토리 ▲ 플러그인에서 적용 중인 코드블럭 모양은 이렇다. ▲ 꾸며봤다. 앞에 넘버링도 달고 좀 더 알아보기 쉽게 해 봤다. 지금 보니 짜다시리 달라진 게 없어 보인다. ㅎ ▲ 외부 테마를 적용하려면 플러그인에서 코드 문법 강조 기능을 사용하면 안된다. 끄자. ▲ 테마는 여기서 가져오고 https://highlightjs.org/ 넘버링은 https://github.com/wcoder/highlightjs-line-numbers.js 에서 가져온다. ▲ 2번 줄에 monokai-sublime.min.css가 테마다. 위 영어 사이트 왼쪽 메뉴의 테마 이름은 무조건 소문자, 공백은 -로 써야 한다. 예를 들어 Nnfx Light 테마는 nnfx-light.min.css라 적는 거다. 티스토리 스킨에 따라 적용 안.. 2021. 10. 18.
검색창 꾸미기 - 티스토리 원래 검색창은 이렇게 생겼다. 검색을 클릭해야 입력창이 열린다. 그리고 마우스가 입력창을 벗어나며 닫혀버린다. 아주 불편하다 할 수 있겠다. 그래서 이렇게 만들어 봤다. 부족한 실력이지만 만족스럽다. ㅎ CSS가 맞는지는 모르겠으나 뭐 대충 ㅎㅎ. 필요 없는 태그도 분명 있을 것 같다. 글 쓰는데 신경을 많이 써야 하는데 스킨 꾸미기가 더 재미있다. 올바르지 않다. 어쩔... 2021. 10. 16.
스크롤바 모양과 색 꾸미기 /* 스트롤바 스타일 */ ::-webkit-scrollbar{ width: 12px; } /* 바 넓이 */ ::-webkit-scrollbar-track { background-color: #dcdcdc; border: 3px solid transparent; background-clip: padding-box; } /* 트랙(배경) 색 */ ::-webkit-scrollbar-thumb { background-color: #bbbbbb; border-radius: 5px; } /* 바색, 바 둥근*/ ::-webkit-scrollbar-thumb:hover { background: #333; } /* 마우스 hover 색*/ ::-webkit-scrollbar-button:start:decremen.. 2021. 9. 27.
스킨 보관함을 사용하자 어제 다른 블로그 스킨 편집 놀이를 하다 큰 실수를 했다. 어찌어찌해 닐기의 HTML 전체를 다른 블로그 HTML에 붙여 넣기 하고 저장해버렸다. 그것도 모르고 오늘 그 블로그를 보니 난리 난리 이런 난리가 없다. ㅎㅎㅎ 그 블로그는 하나의 주제만 쓰는 곳이라 나름 좀 신경 써서 이쁘게 만들었는데 다 없어졌다. 방심했다. 나를 너무 믿었다. 그래서 모든 블로그의 스킨을 보관함에 저장했다. 큰 편집에만 사용했는데 이제 작은 변화라도 있으면 무조건 저장해야겠다. 사소한 건 저장 안 했는데 말이다. 또 나이를 느끼는 시간이었다. 실수로 인해 잠시 스킨을 처음부터 만져봐서 재미있었다 라고 결론을 지었지만 중간에 분명 난 욕을 했다. 풉~ 웃자.^^ 썅~ 2021. 9. 3.
티스토리 - 마우스 우클릭, 드래그, 복사, 붙여넣기 막기 내 블로그의 글을 보호하는 방법입니다. 드래그로 글을 선택하지 못하게 하고 복사, 붙여 넣기도 못하게 합니다. ▲ 플러그인에 마우스 오른쪽 클릭 방지 기능이 있긴하나 부족합니다. ▲ 아래에 다음 코드를 넣어주세요. 2021. 8. 22.
오디세이 스킨 header 배경색 바꿀 때 ▲ 예를 들어 노란색으로 바꿉니다. ▲ 배경색을 지정합니다. 그런데 위에 사진을 보면 윗부분은 안 바뀝니다. 왜? ▲ overflow: hidden으로 가려진 부분을 다시 표시해줍니다. 왜 이렇게 만들었는지 이해할 수 없다. 공부하라는 뜻인가? 퀘스트인가? 그렇다면 클리어. 오디세이, 북마크보다 살짝 어렵다. 2021. 8. 19.
블로그 글자 크기 변경 ▲ 글자 크기는 에디터에서 변경 가능합니다. 글을 쓸 때마다 수정하기 귀찮으니 미리 원하는 크기로 설정합니다. ▲ 브라우저 F12 눌러 검사창을 켭니다. ① 선택 툴 ② 글자를 클릭하면 ③ 글자에 관한 CSS를 보여줍니다. font-size가 글자 크기입니다. px 앞에 숫자를 원하는 만큼 수정해보고 맘에 들면 ④ css 1461번 줄에 가서 수정하면 됩니다. ▲ 스킨 편집 > html 편집 > css 1461번 줄에. entry-content p가 있어요. 그중 font-size를 수정합니다. 위에 적용 버튼! 2021. 8. 19.