마크쿼리 스킨 타이틀사진 본문넓이 배경색,패턴 수정하기

 

 

마크쿼리 스킨 타이틀사진 본문넓이 배경색,패턴 수정하기

 

요즘 티스토리 블로그는 반응형웹이 대세입니다. 모바일 화면을 따로 설치하지 않더라도

스마트폰이나 아이패드 화면에 자동으로 맞춰지기 때문에 텍스트큐브에서 반응형 스킨들이 인기를 얻고 있습니다.

그중에 마크쿼리 스킨 사용자가 아마도 가장 많을 듯 싶은데요..

 

제 이웃분들을 봐도 몇몇 분이 사용하고 계시기도 하고..

저도 몇년간 같은 스킨이 질려서 마크쿼리 스킨을 사용하려고 준비를 하려다가 보류한 상태인데..

조만간에 결단을 내려야 할듯 싶기도 하고..

 

하여튼.. 마크쿼리 스킨을 사용하려고 이것 저것 수정을 하려고 하는데

여지껏 사용해 왔던 티스토리 코드와는 조금 달라서..쉽지 않더군요..

하지만 결국 오래 걸리지 않아 핵심적 것들은 수정할 수 있었습니다.

 

1. 본문 폭 넓이 줄이기

2. 타이틀 사진,로고 넣기

3. 배경색 바꾸기

4. 배경패턴 사진 넣기

 

 

1 본문 폭,넓이 줄이기

 

 

 

스킨 본문 폭 줄이기 입니다. 넓은걸 좋아하시는 분들도 있지만..반대로 싫어하시는 분들도 계시는..

저도 너무 넓은 것 같아서 줄여봤는데.. 반대로 넓히는건 더이상 안되더군요.

아마도 이게 마크쿼리 본문 최대 넓이 같습니다.

 

마크쿼리 수정 코드.txt

 

먼저 위에 코드를 다운 받아 주세요~!

본문 복사하기를 막아놔서..코드를 따로 정리해놨습니다. 다운 받은 코드를 보시면서 설명 보시면 됩니다.

뭐 저 코드만 받으시면 솔직히  설명이 필요 없기도 한...ㅎ워낙 잘 정리해놔서..ㄷㄷ

 

 

 

가로 사이즈 월래 사이즈 1128px 에서 958px로 줄인 모습입니다.

 

 본문 폭, 넓이 줄이기

 

html 에서 컨트롤 + f 를 누르고 아래 코드를 찾습니다. (다운 받은 코드에서 아래 코드 복사하셔서 ctrl + f 에서 붙여 넣으세요.)
<div class="container skeleton"><!-- site layout : container -->

 

위 코드를 찾았다면 싹 지우고 밑의 코드를 붙여 넣습니다.
<div class="container skeleton" style="width: 958px;"><!-- site layout : container -->

 

위 코드중 width: 958px 이부분 숫자를 원하는 크기로 수정하시면 됩니다.

밑의 수정 가능한 사이즈들

 

월래 사이즈 1128
1058
908
858
758

 

위 사진 처럼 본문 폭은 줄었어도 상단 메뉴바와 하단이 그대로 있기 때문에 같이 줄여줘야 합니다.

 

 

하단과 상단 메뉴도 같이 본문 사이즈로 줄여줘야...

 

상단 메뉴바 줄이기

 

컨트롤+f 로 아래 코드를 찾아 상단도 메뉴바도 같은 사이즈로 줄여줍니다.

<div class="container skeleton-nav">

위 코드를 찾아 지우고 아래것로 바꾸세요

<div class="container skeleton-nav" style="width: 958px;">

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

하단 메뉴바 줄이기

 

하단도 같은 사이즈로 줄여줍니다.

<div class="container skeleton-footer">

위 코드를 찾아 아래걸로 바꿔줍니다.

<div class="container skeleton-footer" style="width: 958px;">

 

본문 넓이에 적용하신 사이즈를 상단과 하단에도 그대로 적용시켜 수정합니다.

 

 

 

2 타이틀 사진,로고 넣기

 

 

파일 업로드에서 추가를 눌러 타이틀로고나 사진을 업로드 합니다.

업로드한 타이틀 사진 이름을 기억해놓으셔야 html 코드에 붙여넣어 사용할 수 있습니다.

 

타이틀 사진 넣기

 

 

html 에서 컨트롤 + f 를 누르셔서 아래 코드를 일부를 붙여 넣어 찾습니다.

 <hgroup>
  <h1><a title="home" href="https://backin79.tistory.com/">살찌고 살빼는 story</a></h1>
  <h2>마른 분들을 위해 건강하게 살을 찌우고 뺄 수 있는 방법을 소개하고 다양한 세상 이야기들과 함께 합니다.</h2>
 </hgroup>

위 코드를 찾아 전체를 지우고 아래 코드 삽입 하세요.
<div class="logo"><a href="https://backin79.tistory.com/" title="살찌고 살빼는 story"><img src="./images/logo.gif" width="197" height="100" alt="살찌고 살빼는 story" /></a></div>

 

업로드한 타이틀 화면 이름(주소)을 위 코드중 logo.gif <<이 부분을 지우고 넣음

(이름을 abc로 파일 형식을 png로 저정했다면 abc.png << 이렇게 되는 겁니다.

 

위 코드중 폭과 넓이를 타이틀 사진 크기에 맞춰 수정

 

 

 

 

 

타이틀 사진이 삽입되었습니다.링크 코드도 넣어놨기 때문에 타이틀 로고 화면을 클릭하면 홈으로 이동됩니다. 훗..

근데 타이틀 사진 위 아래로 공간이 남아 어색합니다....

가만 두면 안되겠죠..

 

 타이틀 화면 위아래 남는 공간 수정하기

 

 

html 에서 컨트롤 + f 를 누르셔서 아래 코드를 일부,전체를 붙여 넣어 찾습니다.

<div class="skeleton-header">
위 부분을 찾아 지우고 밑의 코드를 삽입

 

<div class="skeleton-header" style="padding-top: 1px; padding-bottom: 1px;">

 

 

 

 

타이틀 사진 위 아래 빈 공간이 사라졌습니다.~!!!!!!!

 

 

 

3 블로그 배경 색상 변경

 

 

 

배경이 화이트라 썰렁합니다. 가독성도 않좋고..어떻게 보면 깔끔하고 좋기도 한데..

역시 취향 문제라..바꾸실 분은 바꾸셔야죠.

 

블로그 배경 색상 변경

 

html 바로 밑에 style.css 에서 컨트롤 + f  에서 body 입력후 아래 코드를 찾아서 원하는 색상 코드로 수정

배경 색상 코드는 body로 입력해서 찾을 경우 맨 처음에 나올겁니다.

 

background-color: #f8f8f8; <<요 코드 원하는 색상으로 변경

 

네이버 검색창에 네이버 색상표 치시면 색상들 바로 나옵니다.!!

그럼 원하는 색상 코드 복사해서 위 코드에 붙여넣기!

 

 

4 블로그 배경패턴,사진 넣기

 

 

색상표만 넣으면 좀 칙칙하기도 하고..해서

각종 패턴들을 다운받아 설정하면 고급스럽기도 하고 깔끔한 분위기도 납니다.

역시 이것도 취향문제인지라 패턴이 좋으신 분들은 하셔야죠~!

 

블로그 배경패턴 넣기

 

2번 타이틀 사진 넣을때 처럼 파일 업로드에서 배경사진이나 배경 패턴 업로드하시고

 

tyle.css 에서 컨트롤 + f 에서 "body" 입력 하시고 밑의 코드 찾아서 전체 지움니다.

 

body {
  position: relative; /* For scrollyspy */
  padding-top: 50px;  /*Account for fixed navbar */
  background-color: #f8f8f8;
}

 

위 코드 다 지우고 밑에 코드 넣음

body { background-image:/*@background-image*/url(./images/hh78.png)/*@*/; } 
 

배경화면에 넣을 패턴이나 사진을 파일 업로드하고 위 코드중 hh78.png <<이부분 지우고 업로드 파일 이름(주소) 넣음

방법은 타이틀 화면 넣기랑 같습니다.

 

 

블로그 배경 패턴들은 이 포스트를 참조 하셔서 다운 받으세요.ㅡ  블로그 배경 무늬 배경 패턴 다운받으세요. ㅡ

도움이 되셨으면 추천으로 보답받겠습니다.