티스토리 꾸미기 다섯번째는 사이드바 이미지를 적용해 보는 거에요.
사실 이번 내용은 요청주신 분이 있어 올리는건데...
내용을 어떻게 하면 쫌.. 쉽게 쓸수 있을까 고민을 많이 했어요.
아무래도 반응형이랑 얼켜있는 부분이라...
아무리 풀어써도 살짝 어려운 느낌이 있을꺼 같더라구요.
오늘 알려드리는건 제가 적용한 방법과는 살짝 다르지만
디자인적으로는 동일한 효과가 나는 좀더 쉬운 방법이에요.
한번 잘 따라해보세요~
참.. 블로그를 현재 운영 중이시라면,
스킨 변경전에 스킨을 꼭 보관하고 작업하세요!
관리 - 꾸미기 - 스킨변경 <<< 지금 현재 적용된 스킨을 보관하실 수 있어요.
그럼 나중에 스킨 수정하다 잘 못되 저장해둔 소스로 돌아갈 수가 있답니다.
스킨보관 누르시고 날짜로 제목 지정하면 알아보기 편할꺼에요!
일단 적용되어 있는 스킨은 티스토리가 만든 #2 라는 반응형 스킨이에요.
요 모양이 딱 기본형이조.
사이드바는 이미지만 바꾸고 색상만 바뀌어도 느낌이 확 변하기 때문에
굳이 어렵게 하지 않으셔도 되요.
티스토리 꾸미기 배경색 적용편을 보면서
좀더 간단하게 변화를 줄 수 있으니 참고하시면 될꺼같아요.
오늘은 총 두가지 방법을 설명할껀데...
첫번째 방법은 조금 더 쉽게 할수 있어요.
일단 관리 - 기본정보로 접속 후 이미지를 올려주면
저 부분에 이미지가 보여져요.
저 이미지만 잘 활용해도 조금 더 맘에 쏙 드는 블로그를 꾸며볼 수 있답니다.
일단 전 저 이미지가 조금 더 컸으면 좋겠어요.
그럼 사이드바에 포인트도 되고 심심해 보이지 않을꺼 같거든요.
F12버튼을 클릭하면 DOM탐색기가 열리고,
화살표 아이콘으로 원하는 부위를 클릭하면 해당 부분의 소스 위치를 알수 있조.
이 방법은 많이 설명한 부분이라 이젠 익숙하실 꺼 같아요.
잘 모르시겠다면 http://nanakono.tistory.com/155 이곳을 참고해 주세요~
흠... 소스를 확인해 보니
width:51px / height:51px 요 부분이 눈에 들어오는군요.
느낌 오신 그대로 저 부분이 이미지 사이즈를 말하는 거에요.
해당 이미지의 사이즈가 51로 지정이 되어 있어 작게 보였던 거네요.
그럼 저곳만 수정해 주면 되겠조?
관리 - HTML/CSS편집으로 접속한 후
CSS를 확인해 볼께요.
63번째 줄에 정확히 아까 본 내용이 있네요.
일단 width - 가로 / height - 세로 라는 것만 알아두고,
px 가 붙는거는 사이즈다 라고 알고 있으면 될꺼 같아요.
width:51px 라고 되어 있는 경우라면 가로 사이즈는 51 이라는 말이 되는거조.
쉽조?
즉 51이라는 숫자만 원하는 크기로 바꿔주면 된다는 말~
전 가로,세로 사이즈를 150으로 바꿔봤어요.
사이즈만 바꾼거지만 눈에도 더 잘 들어오고 좀더 포인트가 되네요.
그럼 배경 색상까지 바꿔볼까요?
배경색과 이미지 크기만 수정한건데도...
기존과 느낌이 확 달라진게 느껴지네요.
사실 이렇게만 써도 충분히 느낌적인 느낌의 블로그가 완성 된답니다.ㅋ_ㅋ
단 이미지 크기를 조정하려면
기본정보에 이미지 등록 시 사이즈에 맞는 이미지를 업로드 해주셔야
깨지지 않고 또렷한 이미지로 나옵니다~
만약 50px의 이미지를 올렸는데
사이즈만 100px로 바꾸면 이미지를 강제로 늘리다 보니...
이미지가 깨지고 흐려지겠조?
근대 한가지 이상한 점이 있네요.
전 분명 네모난 사각의 이미지를 올렸는데 왜 동그란 이미지로 보일까요?
그 이유는 이미지를 둥글게 하는 소스가 작성되어 있기 때문이에요.
border-radius << 바로 요 부분이 둥글게 만드는 것이조.
border-radius:51px 테두리를 51px만큼 둥글려라 뭐 요런 뜻인 거에요..ㅋㅋ
둥근 이미지가 싫다면 저 부분을 삭제해주면 되겠조?
하지만 나중에 또 사용할 수도 있는데...삭제는 쫌...
그런 경우 /* border-radius:51px */ << 요렇게 주석으로 표시해 주면 되요.
그럼 스타일은 작성되어 있지만 적용은 안하겠다 요런뜻이 되는거에요.
해당 부분을 삭제 했더니 비로써 네모난 이미지가 나오네요. ㅎㅎ
여기까지가 오늘 설명 할 첫번째 방법이였어요.
요 방법은 간단하면서도 좀더 나만의 느낌을 담을 수 있게 해주조.
오늘의 두번째 방법입니다~
전 사이드바에 꽉차게 이미지를 넣고 싶어요.
글씨도 빼고 싶구요...
그럼 어떻게 하나요?
일단 요렇게 꽉 차게 이미지를 넣으려면
위 소스처럼 배경으로 넣어주시는게 좋아요.
이미지 사이즈로도 할수는 있지만...
해당 스킨은 반응형 스킨이라는 중요한 점이 있조.
화면이 작아졌을때 문제가 생길 수 있기 때문에 깔끔하고 쉽게 배경으로 넣는거에요.
이미지로 할 경우
비율이 맞게 늘어나야 하기 때문에 이미지 가로 세로 사이즈가 함께 커져야 하는데
그럼 너무 많이 커질 수도 있는거조.
하지만 배경으로 하면 이미지가 위 아래로 늘어나지 않으니 영역이 너무 커지지도 않고...
보다 깔끔하게 보여질 수 있는거에요.
만약 이미지로만 할꺼라면 첫번째 방법 시
사이즈 조절을 width:100% / height:100% << 라고 작성해 주면 된답니다.
본인 스스로 적용하기 쉬운 방법으로 하시면 되요~
일단 전 배경으로 할께요~
일단 사이드바 전체 영역을 선택해요.
그럼 위 이미지처럼 소스가 확인 되조~
위에 부분이 첫번째 방법으로 이미지 사이즈를 조정한 것이고..
밑에 부분이 새롭게 배경으로 작성해 넣은거에요.
원래 작성되어 있던 소스는
.cont_sub .inner_sub {position:relative;width:100%;height:100%;} << 였지만
.cont_sub .inner_sub {position:relative;width:100%;height:100%; background:url("images/header_default.jpg") 50% 0 no-repeat}
이렇게 배경을 넣어 준거조.
배경색 적용편 보시면 50% 0 no-repeat 요 부분에 대한 설명과
이미지 경로 작성하는 방법이 있어요~
참고해주세요~
배경을 넣으면 이미지처럼 상단에 보여지게 되는거조.
밑에 이미지는 이제 필요 없어 졌으니 빼면 되겠조?
하지만 나중에 또 사용할 수도 있으니 그냥 사이즈를 0으로만 바꿀께요.
해당 부분에서 width / height 해당 부분을 0px로 바꿔주면 되는거조.
다른 방법도 있지만 쉽게 사이즈를 0으로 ~
그럼 밑에 있던 이미지는 사라져요.
사이즈가 0이니 안보이는게 당연하겠조?
긍대 왜 이미지가 꽉차지 않고 여백이 있을까요?
그 이유는 해당 스킨은 반응형 이기 때문이에요.
설명하자면 끝도 없으니 일단...
반응형은 사이즈가 고정일 수도 있지만 아닐수도 있다.
라고만 알고 있을께요.
그리고 우리가 적용한 스킨은
사이드바 사이즈가 고정되지 않았다!! 라는 점~~
브라우저 크기가 커지면
사이드바는 조금씩 커지게 소스가 작성되어 있답니다.
위 이미지보다 사이드바의 사이즈가 더 커졌조?
따라서 이미지를 넉넉하게 큰 이미지로 올려주셔야 되요.
저의 경우 세로는 사이즈가 고정이고 가로만 이미지가 길게 나오길 바라기 때문에
가로 사이즈가 긴 이미지로 업로드 할께요~
가로가 넉넉하게 긴 이미지로만 올려줘도
잘 보여진답니다~
이미지 올리고 불러오는 방법은 배경색 꾸미기편에 있어요~
다 맘에 들지만....
이미지가 있는 부분의 글씨가 가려지는거 같아요...
글씨의 위치를 조정할 수 있나요?
가능하조~
먼저 글씨가 있는 영역을 일단 확인해요.
해당 부분에 margin-top: 이라는걸 작성해 줄께요.
margin-top 이라는 건 쉽게 윗 부분의 간격을 준다 이런 뜻이에요.
자세한 설명은 너무 길어져서 일단 그렇게만 알고 작성할께요~
저는 150만큼의 간격을 주고 싶어요.
그럼 margin-top:150px 이라고 작성해 주면 되요.
모든 내용은 { margin-top:150px } << 대괄호 안에 작성되어야 합니다.
그럼 글씨가 150px만큼 내려와서 보여지조..
만약 글씨를 아예 안나오게 하고 싶다면
해당 부분에 text-indent:-9999px; 라고 작성해주면 되요.
쉽게 -9999만큼 이동한다 이런건데 그만큼 이동하면
브라우저 밖에서도 아주 멀리 가는거니 글씨가 안보이게 되는거조.
글씨를 뺐더니 이번엔 선이 하나 남았네요...ㅜ
저 선의 소스는 요 부분이에요.
(F12 눌러 찍어보면 위치는 알수 있답니다)
해당 부분을 전체 삭제하거나
background << 부분을 삭제 하거나....
width:0px / height:0px 사이즈를 0으로 만들거나
<!-- .aaa {내용} --> 이렇게 주석을 하거나 ~
여러 방법이 있으니 편한 방법을 사용하시면 되요~
비로써 글씨도 없고, 이미지는 꽉차게 보이고
사이드바가 맘에 들게 완성 되었네요.
그럼 브라우저를 가로 방향으로 이동 해서 해상도가 작아졌을때도 한번 확인해 볼까요?
확인해봐야 하는 이유는 해당 스킨이 반응형이기 때문이조~
반응형은 쉽게 브라우저 창을 가로 방향으로 움직여 보면 알수 있어요.
화면이 작아지면 살짝 디자인이 바뀌면서 총 3가지 스타일이 나오거든요.
PC용, 테블렛용, 모바일용 이라고 생각하면 되구요.
화면을 줄여 봤더니.... 이렇게 보이네요...ㅜ
가로가 더 큰 이미지가 들어가야 할꺼 같아요...
애초에 반응형을 감안해서 이미지 가로를 넉넉하게 제작하시거나
PC용 테블렛용 모바일용 세가지로 다르게 적용하셔도 되요.
하지만 쉽게 이미지 가로를 넉넉하게 만들어서 업로드 하는 걸로 할께요~
이미지를 더 긴 사이즈로 올리니 잘 나오네요.
이미지 작업 시 길게 넉넉하게 작업해주세요~
만약 테블렛용 이미지를 다르게 적용하려면 어떻게 해야 하나요??
일단 수정을 하려면 해당 소스의 위치를 알아야 겠조?
해당 부분을 찍어보니... 동일한 내용이 두개가 나왔어요.
빨간 선이 있는 부분과 그 밑에 부분의 네이밍이 동일하조?
하지만 작성된 소스는 다르네요...
이런경우 위에 부분을 보면 되요.
@media only screen and (min-width:738px) and (max-width:1262px){ .....
이런식으로 되어 있는 부분이 반응형이 가능하게 작성 된 소스인건데...
설명 하자면 너무 길어서....
그냥 저렇게 나오면 위에 있는 부분을 확인하자 라고만 알고 갈께요~
위 부분에 이미지를 넣어주면 테블렛 용 스킨에만 다른 배경을 적용할 수 있게 되는거랍니다.
하지만 저의 경우는 일단 이미지 한개로 다 사용하는 거니...
그냥 패스하면 되구요.
이미지를 다르게 적용하고 싶은 분들은
저 부분에 background 를 추가로 작성해 주면 되요~
여기서 중요한 점은 이미지 사이즈가 저렇게 긴 경우
짧은 화면에서든 긴 화면에서든 중간에 딱 맞게 나오게 하려면
background 작성 시 {background:url("images/header_default.jpg") 0 0 no-repeat;}
0 0 부분을 50% 0 이라고 작성해 줘야 한다는 점이에요.
해당 부분의 설명도 배경색 적용편 에 있답니다~
이번엔 이미지와 버튼들의 간격을 쫌 줄였으면 좋겠어요...ㅜ
먼가 해야할께 너무 많조...ㅜ
쉽게 쉽게 줄여서 설명하는 거지만 이렇게나 많고 복잡하네요...
이 방법보다는 첫번째 방법이 좀더 쉬우니
첫번째 방법을 많이 활용해 보세요~
일단 간격을 줄이는건...
해당 영역을 찍어보니... 위 이미지처럼 소스가 확인 되네요.
소스에서 눈에 띄는건... height:450px 이라는 건데...
아마도 높이가 지정되어 있어 간격이 크게 보이는거 같네요..
그럼 저 높이 부분을 줄여주면 되겠조?
만약 높이 말고 margin-top / padding-top << 요런 소스가 있다면
해당 부분을 조절해줘도 되요.
저는 height를 450px 에서 380px 로 수정해 볼께요..
음... 아주 맘에 들게 잘 나오네요...ㅎㅎㅎㅎ
이 정도면... 충분한거 같아요 ㅎㅎ
pc버전도 잘나오고...
힘들었지만.. 성공은 했습니다.!!!
사실 쉬운 방법을 알려드린다고 나름 작성한거지만...
html / css 를 모르는 분들이 보기엔 어려울 수 밖에 없는 부분이에요.
그래서 최대한 쉬우면서 만족도 높게 수정해 보시라...
첫번째 방법을 함께 올린거랍니다....
두번째 방법은 설명하는 사람도 참... 애매하고
보는 사람도 어렵게 느껴질 수 밖에 없는 구조구요...
첫번째 방법은 보다 쉽게 초보도 할수 있는 방법이에요.
두번째 방법을 본 후 너무 어렵다 포기하지 마시고...
첫번째 방법을 응용해서도 꾸며보시고~
두번째 방법에서 필요한 부분 (글씨 안보이게 하는거)만
따로 적용해보는 것도 좋은 방법인거 같아요.
물론 두번째 방법도 천천히 따라하시면 충분히 하실 수 있을꺼에요.
지금 설명 드리는 부분은 요청에 의해 올려드리는 내용이에요.
오늘 전체적인 내용이 다 요청에 의한 내용이네요 ㅋ_ㅋ
궁금하거나 원하는 부분이 있으면 댓글주세요~
최대한 제가 할수 있는 범위에서 알려드릴께요~
일단.. 사이드바에 메뉴 넣는 걸 설명드리려 하는데...
자세히는 올리지 않고,
그냥 딱 넣어야 하는 부분만 알려드리는 걸로 할께요~
html로 접속하신 후
이미지 처럼 소스를 넣어주시면 되는데...
html소스 영역을 클릭한 후
Ctrl + F 누르시면 위 이미지처럼 검색을 해서 찾을 수가 있어요.
검색한 내용은 area_profile <<
검색을 하면 노란색으로 표시가 되요...
해당 영역을 찾은 후
요 이미지 처럼 소스를 넣어 주세요.
<!-- 사이드바 메뉴 -->
<div role="navigation" class="navi_h">
</div>
요 부분이 메뉴 나오는 부분이고...
<!-- 방문자 통계 메뉴 -->
<div class="box_aside box_visitor navi_h">
<dl class="list_visitor">
<dt>Today</dt>
<dd></dd>
</dl>
<dl class="list_total">
<dt>Total</dt>
<dd></dd>
</dl>
</div>
요 부분이 방문자 통계 나오는 부분이에요..
필요한 부분만 복사 + 붙여넣기 해주시면 되요~
내용은 반드시 </div> 밑에 들어가야 하구요...
이미지 잘 확인하시고 똑같이 잘 넣어주시면 되요~~~
그리고 추가로 css 젤 마지막 부분에
.area_head .box_visitor {width:250px; margin:25px auto 0}
.area_head .box_visitor dt {color:#f1f1f1}
.area_head .box_visitor dd {color:#fff}
.navi_h .tt_category {width:250px; margin:20px auto 0}
.navi_h .tt_category a:hover {color:#fff !important}
.navi_on .navi_h {display:none}
이렇게도 넣어주세요...
제꺼처럼 스타일 잡는건데... 일단 넣어둔 후
색상이나 이런부분은 원하는데로 수정하면서 고치면 되요~
또.... max-width:738px << 검색해서 위치를 찾은 후
.navi_on .navi_h {display:none}
.navi_h {display:none}
위 내용을 이미지 처럼 넣어주시면 되요~
또....
max-width:1262px << 이것도 검색해서
위치를 찾은 후 위와 동일하게 입력해 주세요.
해당 내용을 입력 안하면 테블렛이랑 모바일에서 카레고리가 이상하게 보여진답니다!
-또한 해당 소스는 제가 적용한 스킨 기준이라...
그외 스킨을 사용하신 경우라면 스타일이 다르게 보일 수 있습니다.
스킨마다 적용 되어 있는 html구조와 css다르기 때문에..
변수가 있을 수 있어요!
또한 카테고리가 너무 많은 경우 내용이 일부만 보일 수 있어요.
그런 경우는
<div role="navigation" class="navi_h navi_scroll"> </div>
카테고리 입력 부분을 위와같이 작성하고,
.navi_scroll {overflow:auto; height:숫자px;} 를 넣어주세요.
숫자만큼 높이값이 생겨 스크롤이 생길꺼에요.
해상도에 따라 자동으로 조절되는걸 알려드릴까 했지만....
설명할 자신이 없어 가장 원초적인 방법으로 알려드립니다 ㅎ_ㅎ
그리고 저처럼 카테고리 갯수도 나오게 하려면 c_cnt << 검색 후
.tt_category li a .c_cnt,
.tt_category li a img { display:none }
.tt_category li a .c_cnt, << 요 부분을 삭제해 주면 되요..
뭐 하나 추가하려면 이렇게 손이 많이 가고 할게 많답니다...ㅜ
티스토리가 정말 꾸미기 어렵조?
어렵긴 하지만 꾸밀 수 있는 영역이 다양하고~
어려운 만큼 만족도도 높아요.
타 블로그에 비해 내 맘에 꼭 드는 블로그를 만들 수 있다는 점도 있고...
어려워도 꼭 도전해 보세요~~
그만큼의 만족도와 성취감을 느낄 수 있답니다!
그럼 예쁜 블로그 꾸미기 하세요~~
티스토리 꾸미기,사이드바 이미지 바꾸기,티스토리 사이드바 꾸미기, 사이드바
'나♡코 티스토리 관련' 카테고리의 다른 글
| [마감] 티스토리 초대장을 드립니다. (47) | 2018.01.24 |
|---|---|
| [마감] 티스토리 초대장을 드립니다. (20) | 2017.12.01 |
| [마감] 티스토리 초대장을 드립니다. (26) | 2017.11.03 |
| "정보" 티스토리 꾸미기(파비콘 적용편) (8) | 2016.02.11 |
| "정보" 티스토리 꾸미기(배경색 적용편) (8) | 2016.02.02 |
| "정보" 티스토리 꾸미기(웹폰트 적용편) (20) | 2016.02.01 |
| "정보" 티스토리 꾸미기(기본 스킨 적용편) (11) | 2016.01.31 |
