-
Letter - Enhanced 스킨 공개.[Ver 1.52]프로그래밍/Web 2018. 10. 23. 00:30* 공지: Letter - Enhanced 버전 1.52를 공개합니다.* 공지: 새로운 버전이 나왔으므로 전 버전에 대한 지원은 끊깁니다.
개발 중인 스킨의 기능을 간단히 알고 싶다면,
2018/10/31 - [IT] - Letter - Enhanced Ver. 2 프리뷰.
를 참고하세요.
1. 제작 동기.
티스토리에서 이번에 공개된 스킨 중 Letter 스킨이 마음에 들더라고요.
처음엔 Poster 스킨을 써보려고 했는데 굵기가 다른 이상한 메뉴버튼과 못생긴 사이드바의 콜라보로 포기.. 글 내부 배치도 Letter가 더 낫드란.
요개 젤 큰 이유였다.ㅋㅋ
덕분에 슬슬 질려가던 #2에서 Letter로 스킨을 변경!!
그런데 일부 폰트, 인용에 대한 불만과 수식기능, 코드 하이라이트 기능이 미지원 때문에 스킨을 수정하게 되었습니다.
그 이름은 Letter - Enhanced!!
혹시 필요하신 분들이 있을까봐 공유해봅니다.
* 파일은 4번 문항에 있습니다. '파일 첨부'를 눌러 이동!!
* 파이어폭스를 기준으로 변경했습니다.
Letter - Enhanced는 기존 Letter 스킨의 심플함은 간직하면서 더 나은 느낌과 기능을 추구합니다.
현대적이면서 적당히 클래식하여 종이보는 느낌 정도?
디자인시 주로 참조하고 있는 서비스는 미디움, 브런치, 익스포저, 인스타페이퍼 등이 있습니다.
기타: 지킬, 워드프레스, 텀블러, 실버백, 네어버 포스트, 티스토리 모바일 정도?
특히 익스포저랑 인스타페이퍼가 넘나 취향저격.
기술적인 것이나 각종 코드 스니펫의 경우 MDN, CSS-Tricks, W3Schools를 참고하고 있습니다.
다 만들기는 넘 귀찮;;
참고로 티스토리에서 구형 브라우저는 지원하지 않기로 했고 제 스킨 또한 앞으로도 지원하지 않을 예정입니다.
이점 유의해주십시오.
2. 주요 변경점.
2.1 폰트 변경.
Lato와 맑은고딕 기반에서 Noto Sans(본고딕)으로 옮겼습니다.
개인적으로 산돌 고딕 Neo1을 좋아하지만 상용폰트라 사용은 못하고..
Noto Sans를 사용했습니다.비교해보죠.
Lato.
Bright vixens jump; dozy fowl quack.
맑은고딕
동틀 녘 햇빛 포개짐.
Bright vixens jump; dozy fowl quack.
Noto Sans.
동틀 녘 햇빛 포개짐.
Bright vixens jump; dozy fowl quack.
가독성이 좋아집니다.ㅎㅎ
2.2 폰트 렌더링 옵션.[Ver. 1.5 Bugfix]
제가 만든 유저 스타일에서 적용했던 폰트 렌더링 + Calibre(이북리더)에서 사용하는 설정 일부를 적용했습니다.
차례대로 적용 전, 후 사진.
살짝 두꺼워진듯한 느낌이 납니다.
코드.
body, input
{
-webkit-text-stroke-width: 0.02px !important;
-webkit-font-smoothing: antialiased !important;
text-shadow: 0px 0px 0.001px #ACACAC !important;
text-align:justify;
text-justify:inter-cluster;
text-rendering: optimizeLegibility;
}Ver. 1.5: 일부 !important를 제거하였습니다.
2.3 인용구.
원래 이런 느낌이었던 인용구를
동틀 녘 햇빛 포개짐.
Bright vixens jump; dozy fowl quack.
이렇게 바꾸었습니다.
동틀 녘 햇빛 포개짐.
Bright vixens jump; dozy fowl quack.
Simple and Nice Blockquote Styling을 참고했습니다.
아무래도 인용은 명조(세리프)가 좋죠?
2.4 수식.
Mathjax를 사용하여 '$$'사이에 LaTeX 수식이 있으면 바꾸어주도록 했습니다.
* "AMSmath.js", "AMSsymbols.js", "color.js", "mhchem.js"을 추가기능으로 설정했습니다.
예1.
$$ \LaTeX \\ is\, a\, document\, preparation\, system \\ $$ $$ \begin{align} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \end{align} $$
$$ \LaTeX \\ is\, a\, document\, preparation\, system \\ $$ $$ \begin{align} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \end{align} $$예2.
$$\ce{C6H5-CHO}
\ce{$A$ ->[\ce{+H2O}] $B$}
\ce{SO4^2- + Ba^2+ -> BaSO4 v}$$$$\ce{C6H5-CHO} \ce{$A$ ->[\ce{+H2O}] $B$} \ce{SO4^2- + Ba^2+ -> BaSO4 v}$$예3.
인라인 기능도 제공합니다. '$'으로 쌍으로 감싸면
글 중간에 $f:X \rightarrow Y$처럼 적용.
2.5 코드 하이라이트.[Ver. 1.5 Add]
위에서 본것처럼 코드들의 하이라이트를 제공합니다.
사용법은
<pre><code class="언어이름"> 코드.. </code></pre>.문단안에서도 'code'태그를 사용하면 인라인 코드
inline code를 입력할 수 있습니다.언어이름은 Highlight.js를 참고.
따로 적지 않으면 자동으로 적용됩니다.
Ver 1.5:
긴 코드는 자동 줄바꿈이 아니라 가로 스크롤바로 볼 수 있게 바뀌었습니다.(수식 참고)
한줄로 이어진 코드가 예전엔 이렇게 나왔었죠.
2.6 메뉴 버튼 이동.[Ver 1.5 Add @베누시안]
티스토리 공지를 보다가 좋은 기능을 발견해서 추가하게 되었습니다.
메뉴의 'X' 버튼의 위치를 다음과 같이 바꾸게 됩니다.(전후)
3. 기타 변경점.
자잘한 변경 사항들입니다.
- 아티클 이미지 보기 옵션 수정(width: 100%; max-width: 100%; height: auto !important;).
- 마우스로 글 드래그시 청녹색(#007878)을 띄게함.[아쿠아 스킨과 어울리게!!]
- 메타 컬러 지정.(#EB531F 티스토리 상징인 주황색)
- 로봇 지정("noindex, nofollow" $\rightarrow$ "ALL")[처음 발견시 수정했었는데 지금은 "ALL"을 기본으로 수정이 되었다고 합니다.]
- index.xml 정보 수정[Ver. 1.5]
- skin.html을 2018.10.24 기준으로 업데이트[Ver. 1.5]
- 중복된 코드 제거(.category_list .list_horizontal .thumbnail_post)[Ver. 1.5]
- 본문에서 표를 자동으로 가운데 정렬.[Ver. 1.5]
- 댓글 잘림 현상 해결(.category_content_area .list_reply li)[Ver. 1.5 @베누시안]
- CREDITS 파일 추가(컨트리뷰터들 표시)[Ver. 1.5]
- LICENSE 파일 추가(MIT)[Ver. 1.5]
- 일부 버그 픽스(.area_menu .btn_menu)[Ver. 1.52]
4. 파일 첨부.
Ver. 1.0
Letter - Enhanced(2018-10-23).zip라이센스: MIT(원래 Letter 라이센스와 같습니다.)
Ver. 1.52
Letter - Enhanced(2018-10-24).zip따로 수정하고 싶으신 분들은 깃허브에서 포크하시면 됩니다.
좋은 기능이나 버그 패치를 만들어 풀리퀘스트(Pull Request)해주시면 아주 좋아하고, CREDIT 목록에 넣어드립니다.
베타 버전(?) 또한 사용해볼 수 있어요.
black7375/Letter-Enhanced
Tistory's Letter Skin + Font setting, Pretty Blockquote, Math & Code highlighting - black7375/Letter-Enhanced
수정이 필요한 것이 있으면 댓글로 알려주세요~
검토 후 적용을 고려해보겠습니다.
5. 스킨 적용하기.
5.1 다운 받고 압축풀기.
첨부되어 있는 파일이나 깃허브에서 파일을 받아 압축을 풉니다.
5.2 스킨 등록하기.
블로그 관리의 '꾸미기-스킨 변경' 메뉴에서 '스킨 등록'을 누릅니다.
'추가' 버튼을 누른 뒤
폴더를 제외하고 모두 선택합니다.한번 더 '추가'를 눌러 이미지 폴더 내부의 것들을 모두 업로드 합니다.
'저장' 버튼을 누릅니다.
적당한 이름을 지어줍니다.
5.3 스킨 적용하기.
블로그 관리의 '꾸미기-스킨 변경' 메뉴에서 '스킨 목록'을 고른뒤 저장해 놓았던 스킨을 클릭합니다.
그러면 팝업과 함께 '적용'이 나오는데 버튼을 누르면 됩니다.
5.6 추가 사항.
아참.
Letter - Enhanced 스킨은 모바일에서도 볼 수 있어요.
모바일에서 Letter - Enhanced를 사용하려면 다음과 같이 하면 됩니다.
블로그 관리의 '모바일'에 들어가 티스토리 모바일웹 자동연결을 '사용하지 않습니다.'로 바꾸어 주고 변경 사항을 적용하면 됩니다.
앞으로도 이쁜 스킨들을 티스토리에서 만나볼 수 있다면 좋겠네요.
-끝-
댓글
