-
티스토리｜스킨 수정｜사이드바 위에 프로필 사진 넣기｜Letter 스킨｜HTML / CSS티스토리/스킨｜수정 2020. 12. 29. 18:00
서론
티스토리의 기본 스킨 중에
Letter 스킨이 깔끔하고 마음에 들어서 선택을 했다
Letter 스킨은 사이드바가 실제로는 하단에 있어
인기 포스트, 링크, 관리자 메뉴, 블로그 정보 등이 하단에 표시가 되고
방문자 수만 왼쪽 사이드 메뉴바의 하단에 표시가 된다
이것들도 공부하여 사이드바 위치 변경, 폰트 등을 하나하나 바꿔나갈 생각이다
아직 나는 HTML과 CSS가 뭔지 하나도 모른다
그리고 Letter 스킨은 다른 스킨들처럼
사이드 메뉴바 상단에 프로필 사진을 지원하지 않는다
관리 - 꾸미기 - 사이드바에 기본 모듈에 플러그인을 설치하면
[플러그인] 이미지 배너 출력
[플러그인] HTML 배너 출력
등이 추가가 가능한데 두 가지 모두
사이드바가 하단에 있기에 이렇게 화면 맨 아래에 사진이 뜬다
그래서 방법을 알아보던 중
사이드바 위치를 옮기는 것에 대한 자료는 많은데
어떻게 적용해야 할지 답이 안 나왔고
프로필 사진을 사이드 메뉴바 위에 올리는 것을 성공하여
Letter 스킨을 쓰는 사람들에게 도움이 될까 해서 포스팅 한다
도움을 받은 곳은
블로그 최상단에 스킨 - 이용자 제작 스킨에 많은 분들이 스킨을 올려 주시는데
기존 Letter 스킨을 수정시킨
'Letter&suhak'라는 스킨을 '수학이야기'라는 분께서 올려주셔서
이 'suhak_820'스킨파일을 다운 받아서 다른 블로그에 스킨을 적용시키고
HTML과 CSS를 비교하며 수정해보았다
주소는 여기고
이 글에 내용 중에 보면
noneo.tistory.com/21 
noneo.tistory.com/21 이러한 내용이 있고
실제로 이렇게 메뉴 위에 사진이 적용되어 있다
수정하신 다른 기능들도 많은데
저 게시글만 보고는 나로서는 해석이 안된다
그래도 마침 이미지 넣는 내용에는 간단한 설명과
코드를 넣어주셔서 그대로 따라 해보았다
(1)
우선 다른 브라우저로 계정의 다른 블로그에
게시글에 올려주신'suhak_820' 스킨파일을 다운받아
스킨을 적용시키고
블로그 관리 - (왼쪽 사이드) 꾸미기 - 스킨 편집에서
오른쪽 Letter 스킨의 HTML 편집으로 들어간다
(2)
편집하려는 블로그 역시
Letter 스킨을 적용하고 나서 HTML 편집으로 들어간다
noneo.tistory.com/21
글 내용의 이미지 넣는 코드<div class="area_menu"> <--! 메뉴를 누르면 왼쪽 옆에서 밀려나오는 부분-->
<div class=blog_img>
</div>......................................................
</div>
.blog_img img {
width: 80px;
margin: 40px 0 0 61px;
border-radius: 40px; <!--테두리를 둥글게 만들었다.---//>
}(3)
양쪽의 HTML 편집 부분 모두
"area_menu" 를 검색하여 비교 (Ctrl+F)
좌 : 'Letter&suhak' 스킨 / 우 : 'Letter' 기본 스킨 
area_menu 아래부터 해서
우측 사진의 빨간 박스 공간에
좌측 사진의 빨간 박스 공간의 내용이 추가로 들어가고나서
<nav class="menu_navigation">
부분이 시작 된다
바로 아래부터 또 달라지고
area_menu가 각각
62행('Letter&suhak' 스킨), 28행('Letter' 기본 스킨)인것으로 보아 그 위에도 많은 수정이 이루어진듯 하다
어쨌든 똑같이 넣기 위하여 우측 사진의 HTML 편집에
<div class=blog_img>
</div>이 3줄을 복사하여 추가
(4)
그리고 이제 아래 빨간 박스 부분을 수정하기 위해서
.blog_img img {
등과 같은 부분을 검색해도 나오지 않는다
그런데 구글링을 하면서 여러 자료들을 보면서 떠오른 게
width, margin 등을 수정하던 곳은 HTML이 아니고
CSS였던 거 같은 기억이 나서 CSS에서 검색해보니 나온다 ('Letter&suhak' 스킨)
그래서
'Letter' 기본 스킨 쪽 CSS에서 어디쯤인지 확인해 본 결과
좌 : 'Letter&suhak' 스킨 / 우 : 'Letter' 기본 스킨 'Letter' 기본 스킨 쪽의 61행과 63행의 사이에
'Letter&suhak' 스킨 쪽의 106행 ( /* etc */ )부터 220행까지의
긴 /* etc */ 부분이 추가가 되었고 그 사이에 있는 것이 177행의
.blog_img img {
width: 80px;
margin: 40px 0 0 61px;
border-radius: 40px;
}이부분 인것이다
(5)
/* etc */ 부분의 다른 내용은 모르기에 냅두고
'Letter' 기본 스킨 쪽의 63행 /* thema */ 부분 위에
.blog_img img {
width: 80px;
margin: 40px 0 0 61px;
border-radius: 40px;
}이 부분을 추가한다
잘 모르지만 빈칸인 행도 똑같이 남겨본다
(6)
그렇게 HTML과 CSS를 수정 후 우측 상단에 적용을 누르고
내 블로그에 들어와 메뉴를 열어보니
성공 했다
그리고 크기나 위치 등을 수정할 수 있을듯하여
CSS 편집으로 돌아와
이 부분을 수정하면서 확인해보니
* width는 사진의 폭 (가로, 세로 동시 적용인듯)
* margin(여유 길이) 4개 숫자 각각
40 / 0 / 0 / 61 -> 사진 위의 여유 / ?? / 사진 아래의 여유 / 사진 좌측의 여유
2번째 숫자는 모르겠다 100 150 200px로 바꿔봐도 변화가 없어 보인다
* border-radius(모서리 반지름) : 모서리를 얼마나 둥글게 하는지
(7)
그렇게
width : 200px
margin : 50px 0 0 100px
border-radius : 100px
로 맞춘 결과
이렇게 완성이 되었다
그리고 궁금한 점은
'프로필 사진으로 등록한 사진 이외에
다른 사진으로는 할 수 있는지'이다
분명 방법은 있을 텐데
잘 모르겠다
마무리
HTML / CSS를 처음 접하고
이쪽 일에 관련해서 하나도 모르는데
인터넷 검색과 주변의 도움을 받아 조금씩 수정해 보니
재미있고 조금씩 꾸준히 수정하여
나만의 블로그를 만들어야겠다는 생각이 든다
그렇다고 막 거창하거나 화려하진 않을 거고
그냥 심플하게 기본 Letter 스킨에서 원하는 위치로 이동한다든지 폰트나 크기 정도이겠다
이쪽 일을 잘 아시는 분들이 보면
금방 눈에 보이고 이렇게 장황하게 글이 길어질 필요가 없을 텐데
나로서는 큰 성공이었고
이렇게 기록으로 남기는 것도
그 어떤 누가 보더라도 쉽게 이해하고 따라 할 수 있게끔 하기 위하여
이렇게 기록으로 남긴다 (어쩌면 나를 위하여)
Rmx
반응형'티스토리 > 스킨｜수정' 카테고리의 다른 글