|
✨오늘은 오디세이 스킨에서 글 목록에 표시되는 썸네일 위치를 바꿔보겠습니다 이런 식으로 썸네일 위치가 오른쪽에서 왼쪽으로 변경하였습니다 티스토리 스킨 편집 - CSS 수정 [블로그 관리 홈] > 꾸미기-스킨 편집 > html 편집 - CSS 항목을 클릭하여 ctrl+f를 눌러 .article-type-thumbnail를 검색해 주세요 flex-direction: row-reverse;로 되어있을 텐데 row로 고쳐주시면 됩니다 그러면 썸네일 위치가 왼쪽으로 변경이 되는데, 썸네일과 글 사이의 간격이 좁게 나오게 됩니다 이를 해결하기 위해서 margin-left 값은 주석 처리를 하고 밑에 margin-right: 30px이라는 간격을 추가해 줍니다 border-radius는 사진 테두리를 둥글게 만드는 역..
오디세이 스킨에서 글을 작성하면 제목 영역에 배경 이미지가 생기면서 많은 영역을 차지하게 됩니다 디자인 부분에서 마음에 들지 않아 이 부분을 제거해 봤습니다 해당 사진을 이번 시간에 적용해 봅시다 티스토리 스킨 편집 - CSS 수정 .article-header:before { display: none; } .article-header { background-image: none !important; } .article-header .inner-header { color: #333; } #tt-body-page .main { padding-top: 88px; } @media screen and (max-width: 1060px) { #tt-body-page .main { padding-top: 48px; ..
안녕하세요 오늘은 티스토리에서 지원하는 오디세이 스킨 왼쪽 사이드 메뉴를 오른쪽으로 옮겨보도록 하겠습니다 아무래도 한국 사람들은 대부분 왼쪽부터 글을 쓰고 읽기 때문에 이런 점을 고려해서 메뉴 위치를 변경했습니다 우리가 오늘 적용할 왼쪽 사이드 메뉴입니다 티스토리 스킨 편집 - CSS 수정한다 [블로그 관리 홈] > 꾸미기-스킨 편집 > html 편집 - CSS 항목을 클릭해서 ctrl+f 키를 눌러 .wrap-right .main이나 .wrap-right .area-aside 태그를 검색합니다 검색 후 사진과 같이 flex-direction 값과 margin 값을 설정해 주세요 여기까지 적용했으면 메뉴바 위치가 왼쪽으로 이동될 겁니다 메뉴바가 옮겨졌으면 본문 내용 크기와 메뉴 폭이 알맞지 않을 텐데 이..
오늘은 티스토리에서 지원하는 인용구 blockquote를 수정하여 인용구에 폰트와 디자인을 입맛대로 설정해 봅시다 해당 인용구를 사용했을 때 폰트와 디자인을 변경할 겁니다 1. 인용구에 적용할 색상을 선택하자 구글에 '색상 선택 도구'를 검색하여 인용구에 적용할 색깔을 선택해 주세요 HEX 값을 복사하여 티스토리 css 편집에서 사용할 겁니다 2. 인용구에 적용할 폰트를 선택하자 눈누 상업용 무료한글폰트 사이트 noonnu.cc 적용할 폰트를 눈누 사이트를 통해서 선택하시면 됩니다 상업적 무료로 사용할 수 있습니다 전 '넥슨 배찌체' 를 선택했습니다 여기서 오른쪽 부분에 [웹폰트로 사용] 항목을 복사해 주세요 3. 티스토리 인용구(blockquote) 수정하기 [블로그 관리 홈] > 꾸미기-스킨 편집 >..
블로그를 꾸미는 도중 마우스 커서와 애니메이션 적용 방법을 알게 되었습니다 티스토리에서 html과 css을 능숙하게 다룬다면 웹 페이지를 좀 더 예쁘게 꾸밀 수 있습니다 오늘은 티스토리에 마우스 커서와 애니메이션을 설정해 보겠습니다 1️⃣ 마우스 커서 디자인 선택하기 Free Cursor Downloads - Cursors-4U.com Date: 4 Feb 2021, 21:35 By Tor With 7 Comments This month's favorite cursors is the "Sexy Red Lips". It's unknown who made the image. If you know who did it, send me an email so I can give proper credit. Also ..
보통 크롬 브라우저를 이용하여 웹 페이지 번역하고 있지만, 모든 사람들이 크롬 브라우저를 사용하지는 않습니다 그렇기에 직접 티스토리에 번역기를 달아 봤습니다 오늘은 글로벌 시대에 맞게 티스토리에 번역기를 등록해 봅시다 1️⃣ Gtranslate 사이트에서 코드 가져오기 Website Translator Widget Widget Look Float Nice dropdown with flags Flags and dropdown Dropdown Flags Flags with language name Flags with language code Language names Language codes Globe Popup ? Translate From EnglishArabicBulgarianChinese (Simp..
지난 시간에 코드 블럭 복사 버튼을 추가했습니다 복사 버튼을 추가하면서 좀 욕심이 생겼는데, 티스토리에서 지원하는 코드블럭은 디자인적 요소가 너무 아쉬웠습니다 좀 더 다양한 코드 블럭 테마를 적용하고 싶어 html과 css를 설정하여 외부 사이트에서 예쁜 코드블럭을 적용했습니다 오늘은 highlight.js 사이트를 이용하여 코드블럭을 꾸며봅시다 1️⃣ highlight.js 사이트에서 CDN 코드를 가져온다 highlight.js Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once. highlightjs.org 해당 사이트에 접속합니다 접속 후..
지난 시간에 티스토리의 무단 복제를 방지하기 위해 복사 금지를 추가하였는데, 코드로 작성된 부분도 똑같이 복사가 금지됩니다 제 강좌 글은 공부를 목적으로 코드 파일을 배포하지 않고, 코드 블럭으로만 작성하였는데 아무래도 급하신 분들을 위해 코드 블럭 복사 기능을 추가하였습니다 오늘은 이 코드 블럭 복사 기능을 티스토리에 적용해 봅시다 오늘 적용할 코드 블럭 복사 버튼입니다 1️⃣ clipboard.min.js 라이브러리를 다운로드합니다 GitHub - zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped :scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :c..
오늘은 자신의 티스토리 게시물 내용들을 무분별하게 복사하여 마치 자신이 쓴 글인 것처럼 포스팅하는 사람들이 있을 수 있기에, 이를 사전에 방지해 봅시다 1️⃣ 마우스 오른쪽 클릭 방지 플러그인을 티스토리에 설치해 줍니다 [블로그 관리 홈] > 플러그인 > 마우스 오른쪽 클릭 방지 플러그인을 설치하시면 됩니다 현재 전 설치되어 있는데 설치하는 방법은 오른쪽 상단에 플러그인 검색 부분을 이용하여 '마우스 오른쪽 클릭 방지'를 입력해 주세요 검색이 끝났으면 해당 플러그인을 선택하여 [적용] 버튼을 눌러주면 됩니다 2️⃣ 티스토리 html 편집을 이용하여 드래그 금지 코드를 추가합니다 해당 코드를 복사해 주세요! [블로그 관리 홈] > 꾸미기-스킨 편집을 눌러 > html 편집을 클릭해 주세요 복사한 코드를 태..
