<티스토리 스킨 편집 1탄>
코딩 초보가 티스토리를 시작하면서 느낀건 이 사이트 자체가 실험실 같다는 것이었다.
나는 Whatever 스킨을 선택했는데 처음에는 이게 뭔가 싶었다.
인터넷 검색을 해보니 html 편집을 직접 하라고 하더라.
그래서 이런저런 실험을 해 본 끝에 지금 이 상태가 되었다.
-티스토리 스킨 편집한 것들-
- 글씨체: 네이버의 바른 히피
- 글자 간격: 좁아 보여서 조금 넓힘
- 본문 글자 색상: #456771
- 제목, 본문 가운데 정렬.
- 맨 위에 로고 살짝 편집.
- 메뉴 hover 밑줄 없애고 가운데 오게끔 padding 같은거 없앰.
- 카테고리 하나하나 들어가면 글 목록이 사진이랑 나오는데 width가 90%로 되어 있는거 수정.
이것 말고도 조금씩 고쳐나갔다.
마지막으로는 스크롤을 한 다음 맨 위로 뿅 올라갔으면 좋겠는데 버튼이 없길래 하나 만들었다.
아래 유튜브 동영상을 참고해서 scroll top button을 만들었다.
(물론 각자 취향대로 바꾸면 된다)
DarkCode 님의 도움으로 티스토리 스킨 편집이 완성되는 듯 하였다.
하지만 안되는게 있었다.
버튼 크기를 width와 height로 키우시던데 나는 안되더라.
그래서 유추해보건데 Font Awesome 버튼 아이콘 중 일부는 고정값을 입력해놨나 싶다.
물론 나는 아무것도 모른다.
말로 설명하라고 하면 아무말도 못해준다.
그냥 감으로 했다.
그래서 내가 수정한 티스토리 스킨 편집 소스를 아래 갖고 왔다.
참고하실 분들은 얼마든지 참고하시길 바란다.
코드는 엉망이지만 어쨌든 되긴 했으니까 ㅋㅋ
질문해도 답변 못한다..
아는게 별로 없다;;
수정은 관리자에 들어가서 스킨편집 -> html편집 들어가면 된다.
버튼은 움직이는 거니까 javascript를 만져야 되는데 상단에 html, css, 파일업로드만 있더라.
음, 그래서 <script></script> 태그를 만들고 그 안에 소스를 넣고 html 밑부분에 저장하면 되지 않을까 싶었다.
그랬더니 되더라..
코딩하는 사람들이 보면 비웃겠지만 초보들은 이런것도 몰라서 정말 어렵다..
몇년 후에는 옛날의 나를 보며 많이 늘었군 했으면 싶다.
<수정한 부분들만 잘라서 붙였음>
HTML
<!doctype html>
<html lang="ko">
<head>
<!-- 수정하지 않은 부분들은 삭제했음 너무 길어서;; -->
<!-- css link 아래 폰트어썸이랑 jquery 소스 갖고옴. DarkCode님 동영상에 나옴.
폰트어썸은 회원가입 - 오른쪽 상단 계정 아이콘 - kits - be12345678 킷 받은거 누름
- 그럼 How to Use에서 <script src="ㅁㅁㅁㅁ"></script> 이렇게 생긴 코드 복사
- 아래처럼 붙여넣기 -->
<link rel="stylesheet" href="./style.css">
<!-- scroll top button 만들기-->
<script src="https://kit.fontawesome.com/be98661673.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!-- scroll top button 만듦-->
<!-- 폰트어썸에서 아이콘 갖고 올때 동영상처럼 복사하기
<i class="fas fa-chevron-circle-up">내가 복사한 아이콘은 이건데
<i class="fas fa-chevron-circle-up fa-2x"> 이렇게 해주면 크기가 2배가 된다
동영상처럼 width, height 값을 넣어도 안되길래 저렇게 함-->
<button id="topBtn"><i class="fas fa-chevron-circle-up fa-2x"></i></button>
<!-- 버튼을 이렇게 만들면 됨 -->
<script src="./images/script.js"></script>
<!-- 이렇게 원래 js파일 불러온거 밑에 새로운 script를 붙여넣었음 -->
<script>$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 40){
$('#topBtn').fadeIn();
} else {
$('#topBtn').fadeOut();
}
});
$("#topBtn").click(function(){
$('html ,body').animate({scrollTop:0},800);
});
});</script>
</s_t3>
</body>
</html>
CSS
@charset "utf-8";
/* 2번째 줄에 아래 코드를 넣으면 웹폰트를 불러올 수 있다.
https://noonnu.cc/font_page/514 나는 여기에서 폰트를 갖고 왔음
웹폰트로 사용 소스를 복사해서 갖고 오면 된다*/
@font-face {
font-family: 'Bareun_hipi';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_01@1.0/Bareun_hipi.woff') format('woff');
font-weight: normal;
font-style: normal;
};
/* Web Font Load */
/* 이거는 원래 있던 코드인데.. 아래 항목마다 글씨체를 적용하면 바뀌질 않더라
정확한 이유는 모르겠다. 그래서 그냥 전체를 다 바꿔버렸다. */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
/*글씨체 변경 안되길래 아예 전체 적용
이렇게 별표 넣고 폰트 쓰면 다 바뀐다.*/
*{
font-family: 'Bareun_hipi', sans-serif;
}
/* Type Selector Reset */
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'Bareun_hipi', sans-serif;
/*이렇게 했었는데.. 부분으로만 바뀌던데;;*/
font-size: 1em;
line-height: 1.25;
/*그 다음, 글씨체를 바꿨더니 글자 간격이 너무 좁아서 이렇게 넓혔다*/
letter-spacing: 1px;
}
/* 이거는 스크롤 탑 버튼 만들어서 편집한거다 */
#topBtn{
position: fixed;
bottom: 40px;
right: 40px;
font-size: 32px;
/*width: 50px; height: 50px; 나는 이렇게 해도 안됨*/
/*color: #456771; 내가 원하는 글자 색상*/
border: none;
color: rgba(69, 103, 113, 0.6);
/* 아이콘이 내가 원하는 색상에서 약간 투명했으면 싶었다.
그래서 투명도를 0.6 넣었고 내가 원하는 색상은 #456771 이건데
rgb로 바꿔야했다. http://www.codicut.com/util/cssColor.html
나는 여기에서 바꿨다. rgba 써있는 부분에 #456771 색상코드를 넣으면
알아서 바꿔준다. 그거 복사해서 씀. */
cursor: pointer;
outline: none;
/* 내 그림은 동그란건데 네모난 박스 생기길래 이것저것 넣어봤다
테두리 네모 박스가 없어지긴 했다 */
display: none;
}
#header h1 img {
width: auto;
height: 55px;
border-radius: 5px;
/*로고자리에 호두 그림을 넣었는데 약간 두툼하게 만들고 싶었다*/
border-bottom:5px solid #eed231;
border-right:4px solid #5e5d5d;
transition:all 0.1s ease;
/* transition을 넣으면 클릭했을때 방정맞지 않고 자연스럽다 */
}
/*로고를 눌렀을때 살짝 움직이게 만듦*/
#header h1 img:active{ /* :active는 마우스로 클릭을 했을때 상황을 말한다.
이게 뭔지 모를때에는 생활코딩 egoing 선생님의 강의를 들으면 된다. 아래 주소 참고하시길.
https://www.youtube.com/watch?v=UK9GF5Kg__A&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62&index=9&t=376s
*/
transform:translate(1px,1px); /*트랜스폼으로 위치를 살짝 바꿔준다.*/
}
/*여기는 홈 메뉴버튼에 padding을 줘서 가운데로 오게 만들었다.
원래는 링크 밑줄도 있었고 메뉴 글씨 전체가 가운데보다 윗쪽으로 올라가있었다.*/
#gnb ul li {
float: left;
/*padding:26px 16px; 원본*/
padding:39.5px 16px;
/*font-size: 0.875em; 원본*/
font-size: 1.3em;
font-weight: 500;
}
#gnb ul li a:hover {
/*color: #7a583a; 메뉴 글자들을 누르지 않고 마우스 커서만 올렸을때의
글자 색상과 두께를 바꿨다.*/
color: #456771;
font-weight: 700;
}
/*이 부분이 아마도 링크 밑줄이었던거 같다.. 뒤돌아서면 잊어벼려서;;;
text-decoration을 없애려고 했는데 아무리 찾아봐도 없길래
이걸 주석처리했다.. */
/*#gnb ul li a:hover:after {
content: "";
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
margin-top: 22px;
background-color: #7a583a;
}*/
/*이부분은 유튜버 리뷰요정리남 님의 영상을 보고 따라해봤다.
아래 동영상을 보면 스킨 편집에 관한 내용이 나온다.
https://www.youtube.com/watch?v=S5NNa8ORq10
*/
/*본문너비 수정*/
#content .inner {
overflow: hidden;
/*여기 수정함*/max-width: 690px;
margin: 0 auto;
}
/*처음 홈 버튼을 누르면 사진이랑 글 목록이 나온다.
그런데 컴퓨터랑 핸드폰으로 봤을때 가운데 정렬이 아니어서
봤더니 왼쪽만 padding이 되어있었다. 그래서 0 처리함.*/
.cover-special-contents ul{
padding-left: 0;
}
.post-item .title,
.cover-thumbnail-list-2 ul li .title {
display: block;
overflow: hidden;
/* 카테고리를 눌러서 나오는 목록을 보면 사진밑에
글 제목과 내용이 왼쪽으로 치우쳐져있다. 봤더니 width가 90%..
나는 꽉 찬게 보기좋아서 100%로 바꿨다.*/
/*제목부분 이렇게*/width:100%;
margin-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
font-size: 1em;
color: #000;
-webkit-transition: color .2s;
transition: color .2s;
}
.post-item .excerpt,
.cover-thumbnail-list-2 ul li .excerpt {
display: block;
display:-webkit-box;
overflow: hidden;
/*width: 90%;내용부분 오른쪽 여백 없애고 꽉 채움*/
width: 100%;
height: 4.125rem;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
margin-bottom: 16px;
text-overflow:ellipsis;
font-size: 0.875em;
line-height: 1.375rem;
color: #666;
-webkit-transition: color .2s;
transition: color .2s;
}
/*이거는 리뷰요정리남님 영상에서 밑줄을 없애야
훗날 광고를 넣을때 보기좋다고 하셔서 주석 처리함*/
.hgroup {
max-width: 1200px;
margin: 0 auto 60px;
padding: 78px 0 40px;
/*border-bottom: 1px solid #7a583a;*/
}
/*기억이 잘 안나는데 이 밑부분에 text-align: center를
여기저기 썼음..*/
.hgroup .category {
margin-bottom: 20px;
font-weight: 700;
font-size: 0.875em;
color: #557A74;
text-align: center;
}
.hgroup h1 {
font-size: 1.5em;
font-weight: 400;
line-height: 1.0666;
color: #7a583a;
text-align: center;
}
.hgroup .post-meta {
margin: 18px 0 -2px;
font-size: 0.75em;
color: #b2b2b2;
text-align: center;
}
/*폰트크기, 가운데 정렬로 바꿈. 리뷰요정리남님 동영상 참고함.
폰트 색상 바꿈*/
.entry-content p {
margin-bottom: 22px;
word-break: break-all;
font-size: 20px;
text-align: center;
line-height: 1.5714;
/*color: #666;*/
color: #456771;
}
/* Media Screen - Tablet */
/*미디어쿼리 부분도 조금씩 수정.
최대 1199px은 화면이 1199px을 넘지 않을때
아래 내용들을 적용시킨다는 뜻.
생활코딩 egoing 선생님의 수업을 참고하시길.
https://www.youtube.com/watch?v=y3Zx-nVH25s&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62&index=40
*/
@media screen and (max-width:1199px) {
#header,
#aside,
#content .inner,
.cover-thumbnail-list-1,
.cover-special-contents,
.cover-thumbnail-list-2,
.pagination {
padding-left: 34px;
padding-right: 34px;
}
.cover-slider .prev {
left: 20px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 20px;
margin-left: 0;
}
/*이부분 수정함*/ .cover-special-contents ul{
padding-left: 0;
}
/*화면크기 최대 1023px까지만 아래내용 적용*/
@media screen and (max-width:1023px) {
/*이부분 수정함*/.cover-special-contents ul{
padding-left: 0;
}
/* Media Screen - Mobie */
/*여기는 최대 767px일때 적용되는 부분
화면에 대고 마우스 우클릭 - 검사를 눌러서 보면
화면 크기를 볼 수 있다.
미디어쿼리로 지정한 최대 사이즈, 그에 맞는 속성들로 다 바뀐다.
*/
@media screen and (max-width:767px) {
/*이부분 수정함*/ .cover-special-contents ul{
padding-left: 0;
}
.post-item .title,
.cover-thumbnail-list-2 ul li .title {
/*padding-right: 10%; 오른쪽만 여백있어서 없앰*/
padding-right: 0;
font-size: 1em;
box-sizing: border-box;
}
.post-item .excerpt,
.cover-thumbnail-list-2 ul li .excerpt {
height: 2.5rem;
margin-bottom: 8px;
/*padding-right: 10%; 오른쪽 여백 없앰*/
padding-right: 0;
font-size: 0.75em;
line-height: 1.25rem;
}
}
(인스타툰, 텀블러, 유리컵, 그립톡, 폰케이스, 슬리퍼 등)
hodululu | 인포크링크
hodululu님의 멀티링크를 구경해보세요 👀
link.inpock.co.kr
'코딩 공부 + IT 정보 > 코딩 실험' 카테고리의 다른 글
| 티스토리 스킨 편집 2탄, 구글 노출용 포스팅은 따로 있었다! (0) | 2021.08.04 |
|---|---|
| 타자 게임 만들고 영어, 스페인어 공부해보자 (Vanilla JavaScript Speed Typing Game) (0) | 2021.07.29 |
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 세번째 이야기 (mp3 플레이어) (4) | 2021.07.25 |
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 두번째 이야기(short-answer question quiz app) (0) | 2021.07.23 |
| 코딩 자격증 없이 온라인 퀴즈앱 만들기 - 첫번째 이야기(multiple choice quiz app) (0) | 2021.07.21 |
