티스토리 뷰
[블로그꿀팁] 배경이미지 자동으로 변경시키기! #블로그팁 #티스토리배경변경 #티스토리꿀팁 #배경이미지자동변경 #매일새로운배경이미지
배곧동개발자 2016. 9. 7. 11:01
안녕하세요.
용테크의 용사장 입니다.
오늘은
좀 특별한 포스팅을 할까해요!
블로그 배경이미지!
하나만 쓰자니 질리고 단조롭고
그렇다고 매번 바꾸자니
손이가고 귀찮고.
다들 이런 경험이 있으실텐데요
이런분들을 위해 제가 준비했습니다!
먼저 뭐 어떻게 자동으로 바뀌나?
궁금하실텐데요
제 블로그에서 F5를 눌러서
새로고침을 해보세요
그러면 옆 또는 위의 배경이미지가
계속 바뀌는것을 볼수 있으실거에요
어떻게하냐고요?
간단히 순서를 알아볼께요
1. 배경이미지가 될 파일들을 업로드한다
2. 파일이 업로드된 위치를 알아낸다
3. 이미지를 지정하는 클래스를 알아낸다
4. 그 클래스에 랜덤으로 이미지를 입힌다
입니다.
어려워보이죠?
실제 해보면 간단합니다!
아, 저는 티스토리 두번째 반응형스킨을
기반으로 했음을 미리 알려드려요!
자, 시작해볼까요?
먼저 블로그 관리에 들어가주세요!
관리에서 보시면
HTML/CSS편집 이라는 것이 있습니다
사실 웹개발,퍼블리싱 안하시는분들은
안건드는게 좋은 메뉴인데요
어렵지 않게 설명할테니
차근차근 따라와주세요!
들어가보시면 오른쪽 위에
HTML/CSS/파일업로드가 있으실꺼에요
파일업로드를 클릭해주시고
변경될 사진들을 올려주세요
위에 보시면 저는 기존에 쓰던
header_default.jpg를 따서
뒤에 1~5의 숫자를 붙혀
파일 이름을 만들었는데요
따로 파일명 중요하게 생각 안하신다면
저 파일 이름을 추천드려요
물론 필수는 아닙니다!
하지만 숫자를 붙혀서 구분한다는것은 지켜주세요!
그리고는 기존에 있던
배경이미지 파일 보이시지요?
그 배경이미지 파일에 마우스를 놓고
우클릭을 통해서 속성에 들어가줍니다
저는 header_default.jpg가
기존이미지였으므로 들어와봤어요
들어오시면 주소가 보이실거에요
여기서 파일이름 앞 '/' 까지 복사해주세요.
이거 중요하니까
꼭 복사해서 어디다가 붙혀넣기 해놓으세요.
지금까지
파일업로드, 폴더알아내기 까지 해봤습니다
아직 괜찮죠?
이제 배경이미지가 어디 입혀지는지 알아봅시다
CSS탭에 들어가셔서
Ctrl+F 을 눌러서 기존이미지파일명을 검색해봅니다!
저는 header_default니까
header_default를 검색해봤어요
그러면 앞쪽에 .xxx 라고 있으실거에요
저는 .warp_sub네요?
이게 CSS 클래스라는건대
얘를 통해서 배경이미지가 입혀져요
이거를 복사해줍니다!
그러면 지금 폴더, 클래스까지 알아내셨어요
이제 실질적으로 변경하는 로직을
만들어봅시다!
HTML탭으로 가서
</head> 또는 </HEAD>를 검색해주세요
그리고 그 위에
아래의 코드를 집어넣어주세요
<script type="text/javascript">
// 백그라운드 변경하는 로직
function setBackGround(){
// 최대 갯수 설정 -- 변경하세요!
var maxNum = 5;
// 1 ~ 최대갯수까지의 난수 생성
var ranNum = Math.ceil(Math.random()*maxNum);
// 이미지가 있는 폴더 주소 -- 변경하세요!
var imgRootPath = "http://cfs.tistory.com/custom/blog/231/2313485/skin/images/";
// 이미지 파일 이름 -- 변경하세요!
var imgFileName = "header_default"+ranNum+".jpg";
// 이미지 파일 주소
var imgFilePath = imgRootPath+imgFileName;
// 위에 설정한 이미지로 클래스 배경을 변경 -- 변경하세요!!
$('.wrap_sub').css('background-image','url('+imgFilePath+')');
}
</script>
대충 주석은 달아놨는데요
이해하려고 안하셔도 되요, 일단 넣으세요!
여기서 집중하실 부분은
maxNum, imgRootPath, imgFileName 입니다
먼저 maxNum은
몇개를 램덤으로 뿌려줄지 정하는거에요
그리고 imgRootPath는
아까 알아두셨던 폴더주소 있죠?
imgFilePath는 header_default부분을
이미지파일명 중 숫자 앞까지 넣어주세요!
예를들면
저는 header_default3.jpg니까
header_default겟지요?
그리고 뒤에 확장자를 가르키는
.jpg를 이미지파일의 확장자로 변경해줍니다.
위 사진보시면 어떤느낌인지
비교적 쉽게 아실수 있을거에요.
그리고 아까 알아두셨던 클래스 있으시죠?
마지막에 $('클래스명') 을 넣어주시면 되요!
자, 마지막으로 하나만 더 !
<body 를 찾아주세요
그리고 그 뒤에
onload="javascript:setBackGround();"
를 넣어주시면 됩니다!
잘 모르겠다 싶으면 위에 사진
보시고 참고해주세요!
그리고 저장을 눌러주시면?
끝입니다!
따라오느냐 어려우셨죠?
안되시는분들도 분명 있으실텐데요
댓글 남겨주시면 알려드릴께요!
이만,
용테크의 용사장 이였습니다.
'쉐어드필드 > 정보검색해요' 카테고리의 다른 글
- Total
- Today
- Yesterday