정보2017.08.12 23:23

◆ 사용 중인 블로그 스킨에 레이아웃 늘리기, 타이틀 넣기, 푸처 기재하기 

 요즘같이 스마트 폰이 대세일 때는 대체적으로 선호하는 블로그 스킨이 반응형인 경우가 많다.
아무래도 웹과 모바일상에서 사이즈가 자동으로 맞춰지는 형태다보니 편한 부분도 있을테고, 인기있는 사이트가 반응형인 경우가 많기 때문이다.  
대표적으로 핀트레스트가 그동안 봐온 디자인 중에 가장 깔끔한 반응형 사이트가 아닌가 생각한다.  
하지만 그렇게 현란하게 움직이는 사이트 보단 조금 차분하고 콘텐츠를 찾기 편한 사이트를 선호하는 사람들도 많다.
현재 블로그에 적용 중인 스킨은 티비의 세상구경 (http://nextgoal.tistory.com) 블로그에서 배포하는 무료 스킨인데 벌써 스킨이 소개 된 지가 꽤 되었지만 아직도 적용하는 사람이 있다.
얘기가 조금 길어졌는데, 이런 스킨은 약간의 html 코딩 학습 수준을 요구한다.
하지만 나처럼 아무것도 모르는 사람은 다른 사람이 설명해줘도 뭔 소린지 알아듣기 어렵다. 
좀 친절하게 설명해주면 좋겠지만, 전문가 입장에선 충분히 친절히 설명했다 하더라도 내가 부족하여 못알아 듣는 것이 대부분이다.  
그래서 혹시나 이 스킨을 처음으로 적용하고 싶은 사람들이 있을 것 같아서 내가 이 스킨을 적용 할 때마다 기억이 나지 않던 부분을 정리해서 남겨 놓음으로써 공유하고자 한다. 
우선 이 스킨을 사용하면 전체 레이아웃이 조금 좁은 감이 있다. 일단 다른 건 나중에 차차 학습해서 적용하더라도 일단은 사이즈부터 늘려야 보기가 좋다. 
오늘은 사이즈와 타이틀, 그리고 푸처에 내 블로그 네임 정도 넣어보기로 한다.
나는 정말 아무것도 모르고 오로지 여기저기 찾아서 학습하며 알아가고 있는 초보이므로 혹시 틀린 부분도 있더라도 이 부분은 조금 너그럽게 지적해 주면 감사하겠다.
지금 스킨을 본 블로그에 바로 적용 후 까먹기 전에 작성 하는 것이므로 대체로 맞지 않을까 싶다. 

1. 레이아웃(Layout) 늘리기 
우선 이 스킨을 다운로드 받으면 레이아웃 사이즈가 아래와 같다.(티스토리 블로그 관리자 페이지에서 꾸미기 >> HTML/CSS 편집을 열어서 CSS 화면에서 찾을 수 있다)


[레이아웃 늘리기 전 상태(원본 상태)]


우선 CSS 부분을 열어서 수정하면 되겠다.

그 전에 홈페이지 레이아웃 구성에 따른 용어가 어떻게 되는지 알고 가야 조금 편하다.



엑셀로 보기좋게 만들어 봤다.

홈페이지의 전체 레이아웃 구성은 대략 위 이미지와 같다.



블로그 CSS에서 위 밑줄 친 부분을 원하는 크기로 조절한다. 좌측 번호를 참고 하면 쉽게 찾을 수 있다. 나 같은 경우는 Head보다 Body 사이즈를 조금 작게 하였다. 특별한 이유는 없는데 html을 잘 모르다보니까 이것 저것 고치는 것이 부담되어 오래 전 다른 블로그에 적용했 던 수치를 그대로 따라서 기재했다. 지금도 왜 저 값을 넣었는지 의문이긴하다.

그리고 사이바 사이즈는 고치지 않고  Content부분 만 고쳤다. footer 부분도 그대로 놔뒀다.



그리고 댓글 부분 사이즈도 조절하였습니다

Content 하단부에 배치되는 것 같은데 아무래도 댓글 창은 앞서 본 Content 폭 보단 작아야 할 테니까 작게 기재했습니다.



페이지 부분은 대충 어느 영역인지 잘 모르겠는데 내 생각에 포스트 부분에 글이 기재되는 영역을 말하는 것 같다.(혹시 아시는 분 알려주세요^^) 

댓글 창 크기와 동일하게 기재하였다.



포스트가 페이지를 둘러싼 영역이라고 생각하고 Content사이즈와 동일하게 기재하였다.



그리고 원래는 제일 처음 알렸어야 할 Header 부분이다. 제일 처음 봤었던 블로그 레이아웃 값과 동일하게 기재하였다.


2. Header에 타이틀 넣기

Header 사이즈를 설명하기 위해 제일 앞에 이미지를 배치하여 설명하지 못한 이유는 바로 타이틀 삽입 방법을 설명하기 위해서였다.

위 이미지를 보면 "images/title.jpg"라고 표시 된 곳이 있다. 

스킨 적용시 title.jpg 이미지가 있었는데 그 이미지 사이즈에 맞게 포토샵 등으로 수정 후 업로드하게 되면 title을 변경 할 수 있다.


3. 푸처 기재하기 

일반 적으로 티스토리 블로그 하단부에 보면 다음과 같이 디자인 되어 있다.



바로 BLOG라고 적힌 부분에 본인이 관리하고 있는 블로그 제목을 기재하게 되는 것이다.


이번에는 티스토리 관리자 모드에 있는 html/CSS 편집에서 html을 오픈하여야 한다. 전체 코딩 된 영역의 거의 하단부를 살펴보면 푸터 메뉴라는 곳을 찾을 수 있는데 Blog라고 기재되어 있는 부분을 수정하면 된다.

내 블로그는 아직 정확한 명칭의 블로그 네임을 정하지 않아서 아직 수정하지 않았지만 블로그 네임이 정해지면 수정 할 예정이다.


이렇게 간단히 처음 적용한 스킨에 대한 폭 조절과 타이틀, 푸처 기재 방법을 알아보았다.

어쩌면 내가 또 앞으로 비슷한 블로그를 만들게 될 때 활용하려고 작성한 포스팅이기도 하다만 이 내용이 필요한 분에게도 충분한 도움이 되었으면 좋겠다.

코딩을 잘 모르다보니 블로그 관리에 조금 애를 먹기도 하는데 조금씩 코딩 학습을 하는 것이 여러모로 도움이 될 것 같다는 생각이 든다.

댓글을 달아 주세요