본문 바로가기

티스토리/· 스킨편집36

티스토리 북클럽 스킨 최근글, 인기글 편집 북클럽 스킨의 사이드바 메뉴인 최근글, 인기글을 편집해 보겠습니다. 이 글은 누군가의 도움 요청으로 알려드렸는데 글로 남겨도 괜찮을 것 같아서 써봐요.^^ ▲ 최근글이 먼저 나오고 인기글을 클릭해서 보는 구조입니다. 인기글이 먼저 나오게 해 봅시다. ▲ 이 부분이 어디에 있는지 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.
오디세이 스킨 header 배경색 바꿀 때 ▲ 예를 들어 노란색으로 바꿉니다. ▲ 배경색을 지정합니다. 그런데 위에 사진을 보면 윗부분은 안 바뀝니다. 왜? ▲ overflow: hidden으로 가려진 부분을 다시 표시해줍니다. 왜 이렇게 만들었는지 이해할 수 없다. 공부하라는 뜻인가? 퀘스트인가? 그렇다면 클리어. 오디세이, 북마크보다 살짝 어렵다. 2021. 8. 19.
Q&A : 오디세이 스킨 배너 슬로건 순서 저번에 [티스토리/· 스킨편집] - 티스토리 오디세이 스킨 - 슬로건, 배너 위치 바꾸는 방법 글을 썼는데요. 이에 질문을 주셔 글로 남겨봐요. ▲ PC 화면에는 순서가 배너 - 슬로건입니다. ▲ 근데 화면 크기를 줄이면... 즉, 폰으로 보면 슬로건 - 배너 순서로 바뀌는군요. 저도 처음 알았어요. 다른 블로그에 오디세이를 쓰고는 있지만 배너랑 슬로건을 사용하지 않아서 말입니다. ▲ CSS 편집에서 다음 태그를 찾습니다. 저는 CSS 편집을 자주 해서 원래는 307번 줄이 아닐 수 있으니 근처에서 저 부분을 찾아주세요. @media screen and (min-width: 1061px) { [중간 생략] .wrap-drawer .header .area-align { display: flex; flex-.. 2021. 7. 31.
텍스트 블록(드래그)선택 시 배경색 바꾸는 방법 마우스로 글자를 드래그했을 때 기본은 파란색입니다. ::selection을 이용해 원하는 색으로 변경할 수 있습니다. 저는 토마토색을 좋아합니다. 근데 내 블로그는 우클릭, 블록 선택 막았는디??? - - - 3월 30일에 쓴 글이네 지금 보니 color 값은 왜 줬지? 원래 흰색인데 21.05.19 오늘 오른쪽 눈에 염증이 왔다. 왼쪽, 오른쪽 시력 차이 때문에 어질어질하다. 약 먹고 약 넣고... 좀 좋아졌다. 적응한건지 뭔지 어지럽지는 않다. 무료한 일상에 즐거운 눈병... 아뮈터블~ 2021. 5. 20.
티스토리 스킨 편집 - 굵은 글씨 더 잘 보이게 꾸미기 굵은 글씨를 더 잘 보이게 꾸며보아요. 참고로 에디터에서 글씨를 굵게 하는 단축키는 「Ctrl+b」여요. ▲ 브라우저에서 F12 눌러 검사창을 켜요. 그리고 저기 1번을 누릅니다. 마우스를 굵은 글씨에 가져가 클릭해주세요. ▲ 클릭하면 검사창에 굵은 글씨에 해당하는 스타일이 나옵니다. html 태그에서 굵은 글씨는 , 을 사용하니 참고하시고요. 그리고 스타일을 추가합니다. 저는 글씨 크기를 17px(기본 15px)로 키우고 빨간색으로 만들었습니다. ▲ 이것저것 해보고 마음에 들면~ ▲ 3번 줄번호를 기억해두고 추가한 스타일을 복사합니다. ▲ 스킨 편집 - css에서 아까 그 줄번호를 찾아 복사한 내용을 붙여넣기 합니다. 저장 눌러줘~ 끝. 이제 굵은 글씨는 자동으로 모두 17px, 빨간색으로 나오게 되는.. 2021. 4. 26.

티스토리툴바