Tistory 블로그를 사용하면서, 15년 넘게 하나의 스킨을 사용했습니다.
그 후, "티 에디션"의 기능을 알고 나서는 지금까지 Gallery (White) 스킨 만을 사용했습니다.
그러던 중, 티스토리에서 더 이상 "티에디션" 스킨 기능을 지원하지 않겠다고 공지하면서,
[스킨] 티에디션과 태터데스크 기능이 종료됩니다.
안녕하세요. 티스토리 팀입니다. 더 효율적인 스킨 시스템과 편집 기능을 위해 티에디션과 태더테스크를 부득이하게 종료합니다. 무엇이 종료되나요? - 스킨 편집 기능 중 '티에디션'과' '태터
notice.tistory.com
기존의 블로그 첫페이지를 사용하기 어렵게 되었습니다.
그래서, 새로운 스킨으로 변경하는 작업을 시작하게 되었습니다.
오랜 스킨을 버리고, 새로운 Odyssey 스킨을 사용하게 되었습니다.
기존의 스킨도 [스킨 편집]의 [html 편집] 기능으로 "HTML"과 "CSS"을 수정 했었습니다.
저 같은 경우 프로그램 코드 문법 강조인 code 부분을 많이 사용하는데,
스킨을 변경하면서,
코드 문법 강조(Sytax Hightlight) 플러그인이 초기화된 모습을 보게 되었습니다.
이번 기회에 코드 문법 강조에 잘 보일 수 있게 수정해 보았습니다.
먼저, 가장 프로그램의 font 변경을 우선적으로 하였습니다.
코드 블록, 코드 하이라트로 가독성 높이기
프로그램 가독성을 위해서,
구글에서 무료로 지원하는 "Roboto Mono" 웹폰트를 추가해 보았습니다.
("Roboto Mono" 폰트는 구글의 무료 웹폰트입니다)
티스토리 계정 관리자에서 [꾸미기] > [스킨 편집]으로 이동합니다.
[html]을 선택 후에,
google font를 추가해주는 태그를 <head></head> 사이에 추가해줍니다.
<!--/* code 블록 영역 폰트 */-->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<!--/* code 블록 영역 폰트 */-->
[CSS]을 선택 후에,
소스 부분의 검색 단축키인 Ctrl+G 또는 cmd+G을 눌러서,
"code"의 CSS선언 부분을 이동합니다.
여기서, font-family와 font-size를 수정해 줍니다.
html 코드에 추가한 google font인 'Roboto Mono' 폰트를
font-family에 새롭게 추가해 줍니다.
기본 폰트 사이즈인 font-size: 1.0em를 그대로 두면 글씨가 커서 가독성이 떨어집니다.
(0.8em은 개인 취향이오니, 원하시는 사이즈로 조절하시면 됩니다)
code,
kbd,
samp {
font-family: 'Roboto Mono', monospace; /* 폰트 추가 */
/* 1 */
font-size: 0.8em; /* 사이즈 변경 */
/* 2 */
}
다음과 같이 변경 후, [적용]을 누르시면
기본 폰트가 수정된 모습을 확인할 수 있습니다.
여기서, 추가로 프로그램 코드의 가독성을 더 높이기 위해
티스토리(tisotry)에 코드 문법 강조(Syntax Highlight) 플러그 인을 추가해주면 가독성을 높일 수 있다.
여기서, 여러 가지 코드 문법 강조의 테마도 여러 가지가 있습니다.
코드 문법 강조 테마에는 "Atom One Dark", "Atom One Light", "Github", "Monokai", "Darcula", "Visual Studio", "Xcode"는 있습니다. 여기서, 원하시는 테마를 선택하시면 됩니다.
그중에 저는 "Darcula"를 선택하였습니다.
"Darcula"를 선택한 이유는, 제가 자주 사용하는 PhpStorm의 테마와 같아서입니다.
Daracla 테마를 적용해서 보면,
코드 블록 주위에 회색 테두리가 있어서, 집중을 방해시킵니다.
회색 테두리를 없애기 위해서, 스킨의 CSS를 수정해 주시면 됩니다.
CSS에서 검색어로, ".article-view pre"를 찾으시면 됩니다.
.article-view pre {
padding: 20px;
background: #2b2b2b; /* 배경 색상 변경 */
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}여기서, 배경색을 "background: #2b2b2b;"로 변경해 주시면 됩니다.
최종적인 테두리 색상까지 변경하면,
코드 부분의 모습이 집중하기에 너무 좋습니다.
메뉴 항목 높이와 디자인 변경
그 외에 개인적으로 또 다른 변경은 Nav Menu의 CSS를 수정했습니다.
/* nav menu 높이 줄이기 */
.wrap-right .header .category_list > li,
.wrap-right .header .t_menu_home,
.wrap-right .header .t_menu_guestbook,
.wrap-right .header .t_menu_tag,
.wrap-right .header .t_menu_link_1,
.wrap-right .header .t_menu_category{
padding: 25px 0 25px 0; /* padding: 32px 0 32px 0; */
}
/* nav menu hover 높이 내리기 */
.header .tt_category .category_list > li:hover > a:after,
.header .topnavmenu > ul > li:hover > a:after {
content: '';
position: absolute;
top: 25px; /* top: 16px; */
left: 0;
bottom: -10px;
width: 100%;
height: 4px;
background: #ef402f; /* NAV MENU 빨간색 */
z-index: 1;
}
참고로, Menu는 스킨 꾸미기에서 Default로 내비게이션 "사용 안 함"으로 선택이 되어 있습니다.
여기서, "티스토리 '메뉴'활용"을 선택해 주시면, 상단 메뉴가 활성화됩니다.
계속적으로 CSS만 변경해줘도, 좋은 디자인 나올 수 있습니다.
아직 더 작업이 필요한 부분은 POSTER방식의 이미지의 정렬 표시 방법인데요.
그 부분은 javascript를 이용해서 수정해야 할 것 같네요.
아마도 추측하기론, 이미지 로딩 후, 사이즈를 키우는 javascript가 적용되는 것 같습니다.
'연봉10배만들기' 카테고리의 다른 글
| AdSense 일치하는 콘텐츠 광고가 공백으로 나오지 않을 때 (0) | 2022.01.06 |
|---|---|
| 파워 블로그가 되서, 광고 수익으로 먹고 살 수 있을까? (0) | 2020.01.10 |
| IT 회사 합격 또는 거절 통지에 대처하는 요령 (《코딩 인터뷰 완전 분석》 중) (0) | 2018.04.13 |
| 유튜브 광고 수익 설정 방법 (0) | 2018.02.10 |
| 비트코인 채굴 프로그램 & 비트코인 지갑 비교 리뷰 (0) | 2018.01.10 |
| LTE 데이터 쉐어링 (KT, olleh, 올레) (0) | 2014.02.13 |
| 아이폰 보험 리퍼(수리) 받기 (KT Olleh폰 안심플랜) (0) | 2014.01.06 |
| nespresso 웰컵팩, 160세트, 250세트 (0) | 2013.03.25 |
(로그인하지 않으셔도 가능)