본문 바로가기

티스토리/· 스킨편집31

티스토리 스킨 편집 기초 스킨 편집의 기초입니다. 조금만 공부하면 누구나 할 수 있어요. ▲ 크롬 브라우저를 기준으로 설명합니다. 엣지, 웨일 브라우저도 가능해요. 먼저 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.
Q&A : 오디세이 스킨 배너 슬로건 순서 저번에 [티스토리/· 스킨편집] - 티스토리 오디세이 스킨 - 슬로건, 배너 위치 바꾸는 방법 글을 썼는데요. 이에 질문을 주셔 글로 남겨봐요. ▲ PC 화면에는 순서가 배너 - 슬로건입니다. ▲ 근데 화면 크기를 줄이면... 즉, 폰으로 보면 슬로건 - 배너 순서로 바뀌는군요. 저도 처음 알았어요. 다른 블로그에 오디세이를 쓰고는 있지만 배너랑 슬로건을 사용하지 않아서 말입니다. ▲ CSS 편집에서 다음 태그를 찾습니다. 저는 CSS 편집을 자주 해서 원래는 307번 줄이 아닐 수 있으니 근처에서 저 부분을 찾아주세요. @media screen and (min-width: 1061px) { [중간 생략] .wrap-drawer .header .area-align { display: flex; flex-.. 2021. 7. 31.