티스토리 poster 스킨 꾸미기 메뉴 버튼과 메뉴 디자인 변경

1년간을 마크쿼리 3.0.5 스킨을 사용해오다가 스킨을 변경하였습니다.

1차적으로 변경을 한 스킨은 티스토리 #1 반응형 스킨이었습니다.

하지만 #1 반응형 스킨의 문제점은 data-full-width-responsive="true"값을 주었을 경우 모바일 화면에서 광고가 처음에는 꽉찬 화면으로 제대로 되다가 몇초후에 광고가 잘리게 보이는 현상이 발견되었습니다.

물론,이 문제는 data-full-width-responsive="false"로 하게되면 제대로 된 광고가 나온다는 것입니다.

하지만,수익적인 면에서 본다면 data-full-width-responsive="false"보다는 true가 좀 더 수익적인 면에서 좋다는 점은 구글 애드센스에서도 알리고 있는 부분입니다.

그래서 선택한 스킨이 바로 Poster 스킨입니다. 첨에는 버그가 많은 스킨인거 같았지만 4시간에 걸쳐서 수정을 해보았습니다.

 

그 중 첫번째로 '티스토리 poster 스킨 꾸미기 메뉴 버튼과 메뉴 디자인 변경'을 하는 방법에 대한 포스팅입니다.

티스토리 스킨인 Poster 이쁘게 꾸미기로 수정을 한 부분이 좀 되어서 하나하나씩 시간 될때마다 어느것을 수정하였는가를 알려 드리고자 합니다.

먼저 CSS로 넘어가서 #header .mobile-menu부분을 찾아줍니다.그리고는 코드블럭에서 보는 바와 같이 #header .menu부분까지 주석처리를 해 줍니다.

아 미리 혹시나 잘못될 경우를 대비해서 수정전에 기존 사용하던 스킨의 보관은 필수입니다.

메뉴 버튼과 디자인 변경을 위해서 위의 부분은 전체 주석처리를 하였습니다.

그리고서는 아래의 코드로 교체를 하였습니다. 혹시나 몰라서 에러가 난다면 다시 복구하기가 힘들어서 일단 주석처리를 해 둔 것입니다.

CSS 메뉴 버튼,메뉴 디자인 변경을 위해서 적용한 부분

CSS 메뉴 버튼,메뉴 디자인 변경을 위해서 적용한 부분
/* 메뉴 버튼과 메뉴 디자인 변경 후 */
#header .mobile-menu {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 500;
	width: 40px;
	height: 40px;
	background-color: #000;
	border-radius: 50%;
}

#header .mobile-menu span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	background-color: #fff;
	text-indent: -999em;
}

#header .mobile-menu:before,
#header .mobile-menu:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	background-color: #fff;
}

#header .mobile-menu:before {
	margin-top: -8px;
}

#header .mobile-menu:after {
	margin-top: 6px;
}

#header .mobile-menu.on {
	position: absolute;
}

#header .mobile-menu.on span {
	display: none;
}

#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
	margin-top: -1px;
}

#header .mobile-menu.on:before {
	transform: rotate(-45deg);
}

#header .mobile-menu.on:after {
	transform: rotate(45deg);
}
/* 사이드바 크기 지정 */
#header .menu {
	position: absolute;
	top: 80;
	left: -300px;
	z-index: 400;
	width: 300px;
	height: 1200px;
	padding: 0 20px 0;
	background-color: #000;
	box-sizing: border-box;
	border-top-right-radius: 26px;
	border-bottom-right-radius: 26px;
	transition: left .3s ease-in-out;
}
/* 메뉴 버튼과 메뉴 디자인 변경 후 */

이렇게 변경을 하였습니다. 그리고 또 다른 주석처리 부분입니다. CTRL+F로 #dimmed 부분을 찾아서 주석처리를 해주시면 되겠습니다.

 

지우셔도 무방하지만 코드를 잘 모를 경우에 대처가 안될 수 있으니 전 주석처리하는 방법을 택하였습니다.

CSS 메뉴 버튼과 메뉴 디자인 변경을 위해 주석처리 한부분
/* 메뉴 버튼,
#dimmed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.43);
}메뉴 디자인 변경 주석처리 */

그리고 다시 CTRL+F를 사용하여서 @media 부분을 검색후에 max-width:767px 부분을 주석처리를 하였습니다.

이후에 #header .mobile-menu부분을 추가하였습니다. top:10px;left:10px를 선언하였습니다.

@media screen and (max-width:767px) {
/* 메뉴 버튼과 메뉴 디자인#header .mobile-menu {
		top: 10px;
		left: 11px;
	}
	#header .menu {
		padding: 84px 20px 189px;
	} 변경을 위해서 주석처리 한 부분 */
/* @media screen and (max-width:767px) 수정 후(메뉴 버튼과 메뉴 디자인 변경을 위해서 바뀐 부분) */
#header .mobile-menu {
		top: 10px;
		left: 10px;
	}
/* @media screen and (max-width:767px) 수정 후(메뉴 버튼과 메뉴 디자인 변경을 위해서 바뀐 부분) */
@media screen and (max-width:767px) {

물론 여기서 #header .menu { padding: 84px 20px 189px; 이 부분만을 삭제하면 해결이 되지만 혹시나 잘못 건드리면 주석처리한 부분만을 원래대로 되돌리면 된다는 생각으로 주석처리를 하게되었습니다.

제가 Poster 스킨을 선택하게 된 이유로는 가독성면에서 뛰어나다고 판단을 해서입니다.

티스토리 poster 스킨 #1 메뉴 버튼과 메뉴 디자인 변경.txt

0.00MB

참고로 피시상에서는 기본적으로 사이드바에 있는 메뉴인 카테고리가 펼쳐진 상태에서 닫을 수 있는 상태로 되어졌으며,모바일 상에서는 접혀진 상태에서 펼쳐 보일 수 있는 상태로 되어져 있습니다.