'BlogCustom' 카테고리의 글 목록

내 블로그 커스터마이징 진행 상황 (2024.12.04 기준)

2024.12.05· BlogCustom

⚡1. Main 영역 원래 티스토리 기존 스킨 현재 커스텀 상황 전체 뷰 Dark 모드 Light 모드 ✅ 오늘의 명언(랜덤명언) 삽입명언은 퍼왔으나 HTML/CSS는 직접 커스텀함✅ Header 이미지 변경변경전기존에는 프로필 사진이 반투명 효과 적용되어 메인 헤더 부분에 띄워짐. 변경후고양이 이미지로 변경 해 주고 border-radius ✅ 상단에 Navigation Bar 삽입 헤더 커스텀이 끝나고 나니 모바일 화면에서는 Side바에 hidden이라 카테고리명이 안 뜬다.그래서 상단에 네비게이션 바를 달아주기로 했다. 변경 후 - `Home`, `Algorithm`, `Coding`, `ETC.`, `Visitor` 탭 Navigation Bar 달아줌- hover 하면 그림자 생기고, 폰..

[블로그 커스텀] heLLO스킨 헤더 편집 (아이콘 추가, hover 효과)

2024.11.11· BlogCustom

✨커스텀 전 기본 헤더 티스토리에서 hELLO 스킨을 적용하고 게시글을 발행 한 뒤 헤더 부분의 모습이다. 썸네일로 설정한 이미지가 blur 처리되면서 헤더 배경으로 오고, 제목이 가운데로 온다. 그리고 아래는 글 발행시간과 해당 글의 카테고리가 한 줄로 나오는데, 카테고리명에는 태그에 href 속성이 걸려 있어서 클릭하면 해당 카테고리로 넘어 간다. 🧞‍♀️헤더 커스텀 완성작 이번 포스팅에서 커스텀할 내용은 크게 두 가지이다.헤더 좌측 상단에 아이콘 추가카테고리 이름에 마우스 올리면 색상이 변하는 hover 효과 주기물론 위 캡처처럼 발행일, 카테고리명의 위치를 카테고리명이 먼저 나오게 바꾸어 줄 것이다.카테고리에 hover 효과를 주면서 배경에 박스가 생기게 되어 앞으로 나오는 것이 더 낫기 ..

[블로그 커스텀] 티스토리 마우스 이펙트 추가하기🧞‍♂️

2024.11.11· BlogCustom

이번 컨텐츠에서는 티스토리 블로그 마우스 커서 변경하는 법 & 마우스 이펙트 추가하는 법 소개 해 드리려고 합니다.블로그 특성상 모바일에서는 안 되고 PC버전 블로그에서만 보여지는 기능입니다~!svg 아이콘을 받아서 css 추가 해 주는 법도 있지만 오늘은 정말 간단하게 소스만 복사해오면 바로 쓸 수 있는 방법 알려드리겠습니다. 1. 마우스 커서 모양 바꾸기 아래 링크에 접속해서 마음에 드는 커서를 선택한다. Free Cursor Downloads - Cursors-4U.comDate: 16 Jan 2024, 22:00 By Tor With 11 Comments All commenting and comments have been removed from the cursor pages. Too many n..

[블로그 커스텀] 티스토리 코드블럭 커스텀하기 (Feat. highlight.js)

2024.11.10· BlogCustom

어제 블로그에 MAC 스타일 코드블럭 테마 적용하려고 했는데COPY 블럭이 안 먹히는 문제 & window에서 코드블록 깨지는 현상으로 원상복구 했다. 내 블로그는 다크모드 막아놨는데 코드블럭만 다크모드로 나오게 해 주고 싶어서그래서 그냥 다크모드로 직접 커스텀 하기로 했음 참고로 나는 heLLO 스킨 사용중 + 다크모드 강제로 해제 + 코드블럭인라인넘버 추가해 놓은 상태에서 시작함 완성작 (코드 카피 버튼은 별도로 포스팅 할 예정) 1. 코드블럭 배경 색상 변경스킨편집 > html편집 > css 편집 > pre code 검색해당 블럭 주석 처리#content .contents_style pre code { padding-left: 1rem; padding-right: 1rem; line-height:..

[블로그 커스텀] 티스토리 hELLo 스킨 본문 너비(폭) 늘이기

2024.11.09· BlogCustom

티스토리 heLLO 스킨을 쓰는데 컨텐츠(본문 영역) 가로 폭 길이가 너무 좁아서 양 옆 여백이 많이 남는다. 그래서 크기가 좀 큰 이미지를 첨부하면 본문 크기를 넘어가는 일도 많고, 코드가 조금만 길어지면 코드 블럭에 자꾸 스크롤이 생기는 것이었다. 그래서 오늘은 컨텐츠 좌우 여백 늘리는 방법을 연구해보았다. 처음에는 구글링 했는데 이 문제에 대한 정보가 많이 없어서 그냥 내가 개발자 도구 열어서 찾아보았다. 참고로 본문 컨텐츠 너비를 늘이면 코드블럭 가로 길이도 저절로 늘어날 거 같다고 생각했는데 늘려 보니 같이 늘어난다 ㅎㅎㅎ 1. 개발자 도구로 css 찾기일단 Mac 기준 option command i 눌러서 개발자 도구 가면 현재 본문 컨테이너 크기와 CSS 속성을 확인할 수 있다. 가서 해당..

[블로그 커스텀] 티스토리 코드블럭 폰트 바꾸기 (Feat. Google Fonts)

2024.11.09· BlogCustom

티스토리 블로그는 html/css/js로 얼마든지 커스텀 할 수 있기 때문에 폰트도 수정 가능해요 오늘은 구글 폰트에서 제공하는 무료 폰트를 이용해서 코드블럭의 글씨체를 바꿔보겠습니다. https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com 저는 Montserrat 체가 마음에 들어서 이걸로 골랐어요 ㅎㅎㅎ원하는 폰트 정했으면 화면 상단 Get Font 클릭해주세요.그러면 1 font family selected 화면으로 넘어오는데요 Get embed code를 클릭해주세요 web용 선택 해 주고 Copy..

[블로그 커스텀] 티스토리 코드블럭에 인라인 넘버 적용하기 (css, js 코드)

2024.11.09· BlogCustom

코드블럭에 인라인 넘버 적용하기 1. html편집 블로그 관리 > 스킨 편집 > html편집 바로 위쪽에 아래 코드를 복사 붙여넣기 해 준다. 맥북의 경우 command + F, 윈도우는 ctrl + F 해서 /body 검색 해주면 바로 찾을 수 있다.or 스크롤 쭉 내려서 찾아주셔도 됩니다 ㅎㅎ 2. CSS 편집위 작업이 끝났으면 CSS 들어가서 아래 코드 추가 해 주자.#content에 이어서 쭉 붙여줘도 되지만 저 같은 경우 커스텀한 것들은 주석달아서 맨 밑에 붙여 넣어 주었어요~/* 코드블럭 인라인 넘버 적용*/#content .hljs-ln-numbers { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-..

[블로스 커스텀] 티스토리 hello 스킨 이미지 본문 폭 안에 맞추는 방법

2024.11.09· BlogCustom

이미지가 본문 폭을 벗어나는 문제 티스토리에서 hello 스킨을 적용해서 잘 쓰고 있는데, 이 스킨은 이미지가 본문 폭을 벗어났을 때 줄여주는 기능은 탑재하고 있지 않다. 그래서 블로그 스킨편집 창에서 손을 좀 봐 주어야 겠다고 생각했다. 일단 티스토리에서 width가 860보다 더 큰 이미지는 에디터에서는 무조건 860으로 보이게 해 놓은 거 같은데...글을 발행하면 최대크기가 1100으로 되어 있는지 1100까지도 나온다 1. 본문 쪽 맞춤 기능우선 스킨편집에서 html/css를 수정하지 않아도 본문 폭 맞춤 기능을 사용하면 이미지가 줄여지기는 한다. 하지만 에디터로 글을 작성할 때 이미지 크기랑 실제로 글을 발행하고 나서 보여지는 크기가 다르기 때문에 글 작성중에는 실제로 이미지 크기가 어느 정..

My Tech Blog (BlogCustom)

티스토리툴바