나나스킨 배너 로고 수정

나나스킨수정하기.md

나나스킨v4에서 카테고리별 배너 로고 만들기

스킨 편집 - HTML

배너 로고 아이디를 확인해 주세요. (크롬에서 대문 우클릭하고 검사 누르시면 나옵니다.)

아이디는 임의로 수정해도 좋지만 다른 태그에서 이 이름(아이디)이 식별자로 쓰인다는 점에 주의하세요.

-  <div id="logo"></div>
+  <div id="bg"></div>

제가 쓰고 있는 나나스킨 구버전에서 배너의 아이디는 bg인데 최근 버전에서는 logo로 바뀌어 있습니다.

나머지 태그에서 그 이름을 맞춰 주기만 하면 어느 쪽을 써도 괜찮습니다.

---

스킨 편집 - CSS

-  #logo {
-      border-bottom: 1px solid #7ad4e7;
-      height: 301px;
-      background: url(./images/main.jpg);
-      background-position: center;
-      background-size: cover;
-  }
+  #bg {
+    border-bottom: 1px solid #E74C3C;
+    height: 200px;
+    background: transparent;
+    background-position: center;
+    background-size: cover;
+  }

• #bg {: 위의 아이디에 맞게 설정
• border-bottom: 1px solid #E74C3C;: 이건 안 고쳐도 괜찮아요. 배너 하단 경계선 색상 설정
• height: 200px;: 배너의 세로 크기 설정
• background: transparent;: transparent는 배너 이미지를 비워둡니다.

---

스킨 편집 - HTML에 추가하는 스크립트

아래 스크립트에서 표시된 곳만 쓰고 계시는 스킨에 맞게 수정해서 스킨 HTML의 적당한 위치에 추가해 주세요. (스크립트가 들어가기 좋은 위치는 보통 </html> 조금 위쪽입니다.)

<script>
// 대문 표시
$(function() {
	function getResources() {
		return decodeURIComponent(location.href)
			.replace('http://','').replace('https://','')
			.split('#')[0].split('?')[0].toLowerCase().split('/');
	}
	function determineImgToDisplay(obj) {
		function getResourcesUrl() {
			var pathConcat = '';
			var rscs = getResources();
			for (var i = 1; i < rscs.length; ++i) {
				pathConcat += rscs[i] + '/';
			}
			return pathConcat;
		}
		function inArray(e, s) {
			if($.inArray(e, s) != -1) { return true; }
			return false;
		}
		for (var key in obj) {
			if (inArray(getResourcesUrl(), obj[key])) {
				return key;
			}
		}
		var imgs = Object.keys(obj);
		return imgs[Math.floor(Math.random() * imgs.length)];
	}
	var img = determineImgToDisplay({
-		'banner-frodo-bow.jpg': ['', 'category/'],
-		'banner-frodo-greetings.jpg': ['guestbook/', 'category/초대장/'],
-		'banner-frodo-cameup.jpg': ['category/methods/']
	});
-	$('#bg').css('background-image', 'url("./images/' + img + '")');
});
</script>

형식

• '추가한_이미지_파일_이름.확장자': [주소, 주소, 주소, ...],: 주소는 이미지가 표시되게 하고 싶은 카테고리를 가리킵니다. 마지막 라인에 쉼표가 안 들어가는 점에 주의하세요.
• $('#아이디'): 아이디만 맞게 수정

이미지 파일은 스킨 편집 - 파일 업로드에서 추가해 주세요.

나나스킨수정하기2.md

나나스킨v4에서 카테고리별 배너 로고 만들기 (업데이트)

스킨 편집 - HTML

배너 로고 아이디를 확인해 주세요. (크롬에서 대문 우클릭하고 검사 누르시면 나옵니다.)

아이디는 임의로 수정해도 좋지만 다른 태그에서 이 이름(아이디)이 식별자로 쓰인다는 점에 주의하세요.

<div id="logo"></div>

---

스킨 편집 - CSS

-  #logo {
-      border-bottom: 1px solid #7ad4e7;
-      height: 301px;
-      background: url(./images/main.jpg);
-      background-position: center;
-      background-size: cover;
-  }
+  #logo {
+    border-bottom: 1px solid #E74C3C;
+    height: 200px;
+    background: transparent;
+    background-position: center;
+    background-size: cover;
+  }

• #logo {: 위의 아이디에 맞게 설정
• border-bottom: 1px solid #E74C3C;: 이건 안 고쳐도 괜찮아요. 배너 하단 경계선 색상 설정
• height: 200px;: 배너의 세로 크기 설정
• background: transparent;: transparent는 배너 이미지를 비워둡니다.

---

스킨 편집 - HTML에 추가하는 스크립트

아래 스크립트에서 표시된 곳만 쓰고 계시는 스킨에 맞게 수정해서 스킨 HTML의 적당한 위치에 추가해 주세요. (스크립트가 들어가기 좋은 위치는 보통 </html> 조금 위쪽입니다.)

<script>
// 대문 표시
$(function() {
	function getResources(_url) {
		return decodeURIComponent(_url)
			.replace('http://','').replace('https://','')
			.split('#')[0].split('?')[0].toLowerCase().split('/');
	}
	function determineImgToDisplay(obj) {
		function getResourcesUrl(_url) {
			var pathConcat = '';
			var rscs = getResources(_url);
			for (var i = 1; i < rscs.length; ++i) {
				pathConcat += rscs[i] + '/';
			}
			return pathConcat;
		}
		function inArray(e, s) {
			if($.inArray(e, s) != -1) { return true; }
			return false;
		}
		var cat = $('.title-cate');
		var href_ = (cat.length > 0)?cat[0].href:location.href;
		for (var key in obj) {
			if (inArray(getResourcesUrl(location.href), obj[key])) {
				return key;
			}
			if (inArray(getResourcesUrl(href_), obj[key])) {
				return key;
			}
		}
		var imgs = Object.keys(obj);
		return imgs[Math.floor(Math.random() * imgs.length)];
	}
	var img = determineImgToDisplay({
-		'banner-frodo-bow.jpg': ['', 'category/'],
-		'banner-frodo-greetings.jpg': ['guestbook/', 'category/초대장/'],
-		'banner-frodo-cameup.jpg': ['category/methods/']
	});
	if (typeof mylogo !== 'undefined') {
		img = mylogo;
	}
	$('#logo').css('background-image', 'url("./images/' + img + '")');
});
</script>

형식

• '추가한_이미지_파일_이름.확장자': [주소, 주소, 주소, ...],: 주소는 이미지가 표시되게 하고 싶은 카테고리를 가리킵니다. 마지막 라인에 쉼표가 안 들어가는 점에 주의하세요.
• $('#아이디'): 아이디만 맞게 수정

이미지 파일은 스킨 편집 - 파일 업로드에서 추가해 주세요.

---

목록보기만이 아니라 글을 읽을 때에도 해당 게시물이 속한 카테고리의 로고를 표시합니다.

게시물별로 특별한 로고 이미지를 지정하고 싶다면...

게시물 본문의 HTML로 아래 같은 스크립트를 추가합니다.

<script>
  mylogo = 'banner-frodo-cameup.jpg';
<script>

원리

목록보기인 경우

1. 카테고리에 대해서 지정한 이미지가 있다면 그것을 표시
2. 지정한 이미지가 없다면 랜덤 이미지 표시

게시물인 경우

1. 게시물에서 지정한 이미지가 있다면 그것을 표시
2. 게시물에서 지정한 이미지가 없다면 게시물이 속한 카테고리의 이미지를 표시
3. 아무 것도 없다면 무작위 이미지 표시

로고 이미지는 (스킨 편집 - 파일 업로드)에 위치하고 파일 이름으로 구분합니다.

스크립트샘플.js

<script>
// 대문 표시
$(function() {
	function determineImgToDisplay(obj) {
		function getResources() {
			return decodeURIComponent(location.href)
				.replace('http://','').replace('https://','')
				.split('#')[0].split('?')[0].toLowerCase().split('/');
		}
		function getResourcesUrl() {
			var pathConcat = '';
			var rscs = getResources();
			for (var i = 1; i < rscs.length; ++i) {
				pathConcat += rscs[i] + '/';
			}
			return pathConcat;
		}
		function inArray(e, s) {
			if($.inArray(e, s) != -1) { return true; }
			return false;
		}
		for (var key in obj) {
			if (inArray(getResourcesUrl(), obj[key])) {
				return key;
			}
		}
		var imgs = Object.keys(obj);
		return imgs[Math.floor(Math.random() * imgs.length)];
	}
	var img = determineImgToDisplay({
		'banner-frodo-bow.jpg': ['', 'category/'],
		'banner-frodo-greetings.jpg': ['guestbook/', 'category/초대장/'],
		'banner-frodo-cameup.jpg': ['category/methods/']
	});
	$('#bg').css('background-image', 'url("./images/' + img + '")');
});
</script>

스크립트샘플2.js

// 대문 표시
$(function() {
	function getResources(_url) {
		return decodeURIComponent(_url)
			.replace('http://','').replace('https://','')
			.split('#')[0].split('?')[0].toLowerCase().split('/');
	}
	function determineImgToDisplay(obj) {
		function getResourcesUrl(_url) {
			var pathConcat = '';
			var rscs = getResources(_url);
			for (var i = 1; i < rscs.length; ++i) {
				pathConcat += rscs[i] + '/';
			}
			return pathConcat;
		}
		function inArray(e, s) {
			if($.inArray(e, s) != -1) { return true; }
			return false;
		}
		var cat = $('.title-cate');
		var href_ = (cat.length > 0)?cat[0].href:location.href;
		for (var key in obj) {
			if (inArray(getResourcesUrl(location.href), obj[key])) {
				return key;
			}
			if (inArray(getResourcesUrl(href_), obj[key])) {
				return key;
			}
		}
		var imgs = Object.keys(obj);
		return imgs[Math.floor(Math.random() * imgs.length)];
	}
	var img = determineImgToDisplay({
		'banner-frodo-bow.jpg': ['', 'category/'],
		'banner-frodo-greetings.jpg': ['guestbook/', 'category/초대장/'],
		'banner-frodo-cameup.jpg': ['category/methods/']
	});
	if (typeof mylogo !== 'undefined') {
		img = mylogo;
	}
	$('#logo').css('background-image', 'url("./images/' + img + '")');
});