반응형

블로그 스킨 배경화면을 계절마다 바꾸잔 생각을 하고 있습니다. 일부러 투명 스킨이 아닌 스킨으로 쓰고 있는 것도 그래서입니다. 흰 바탕의 스킨이 의외로 투명 스킨인 경우가 있습니다. 현재 제 블로그 스킨도 원래는 투명 스킨이어서 바탕화면을 깔면 텍스트 영역의 글을 읽기 힘든 구조였습니다. 나름(?) 손봐서 불투명 스킨으로 개조하여 쓰고 있습니다. 

블로그 스킨을 여름 스킨으로 바꿔 봤습니다. 좀 늦었죠. 7월 초에 바꿨음 좋았을 건데 그러지 못했습니다. 8월 하순 접어들면서 바꾸었으니 대략 9월 말 정도까지만 걸고, 그 후엔 스킨을 바꾸는 게 계절에 맞을 것 같습니다. 바다 풍경이 딱히 계절을 타는 건 아니지만요. ^^

언젠가 블로그 지인에게 '공개하겠다'고 했던 블로그 스킨 배경화면 쉽게 바꾸는 방법입니다. 잊고 지낸 건 아닌데 시간이 많이 흘러 버렸군요. (아. 사용 환경에 따라 html/css 가 조금 다른 양상을 보일 수 있긴 하겠습니다만 대동소이할 거라 봅니다.)



 블로그 스킨 배경화면 이미지 쉽게 바꾸는 방법. 전혀 번거롭지 않은! ^^ 

이번에 바꾸어 본 블로그 스킨 배경화면. 여기에 적은 방법으로 바꿨습니다.
지금까지는 상하좌우 구분이 안 되는 이미지로 했는데,
이번에는 변화를 줘봤습니다. ^^ 
 
 
먼저,

관리자 페이지 > 메뉴 > 스킨 > HTML/CSS 편집 > 파일 업로드

로 들어가서 배경화면으로 올리고자 하는 파일을 업로드 합니다.
파일명을 잘 기억해 둡니다. (예컨대, IMG_0001.jgp 라고 합시다.)



다음,

관리자 페이지 > 메뉴 > 스킨 > HTML/CSS 편집 > HTML/CSS 편집

으로 가서, 하단의 style.css 란을 살펴 봅니다. (앞부분에 있음.)

/*@background-image=background-image:*/background-image: url("images/○○○")/*@*/;

열을 찾습니다. ○○○란에 아까 업로드한 파일명을 적습니다. (예컨대, 앞서 올린 파일의 이름 IMG_0001.jpg 를 적는 겁니다. 파일명을 복사해 오면 편하겠죠.) 그 외의 것은 건드리지 않습니다. ○○○ 자리에 이미 입력되어 있는 파일명을 지우고 입력하면 됩니다. 

그리고 나서, 화면 하단의 [저장] 버튼을 클릭합니다. 이제 블로그 스킨 배경화면이 바뀐 것을 확인할 수 있을 겁니다.



그 다음으로, 

1) 가능하다면 이미지 파일을 리사이즈하여 파일 크기를 줄이는 것이 좋겠죠. 방문자 중에는 블로그 바탕화면 로딩에 버거워할 분도 계시니까요. 저는 대략 100kb 내외로 리사이징 하고 있습니다.

2) 또한 이제 안 쓰는 배경화면 이미지 파일은 삭제해 주는 게 좋겠죠.
관리자 페이지 > 메뉴 > 스킨 > HTML/CSS 편집 > 파일 업로드
에서 이미지를 선택하고 미리보기로 확인한 후 [삭제] 버튼을 클릭하면 됩니다. 
 


블로그 스킨 변경을 하는 게 무려 엄두씩이나 필요한 일이었습니다. 스킨위저드를 통해서 바꾸었더랬는데, 그렇게 바꾸는 경우 기존에 스킨 html/css 상에 몇 가지 손본 게 초기화 되는 현상이 벌어지더군요. 제 경우 포스트 텍스트 영역과 답글 입력창 크기가 초기값으로 되돌아갔습니다. 스킨위저드 돌릴 때마다, 돌린 후에 반드시 skin.html과 style.css로 들어가서 초기화 된 부분을 다시 만져줘야 했습니다. 그러다가, 귀찮아 하다가, 어쩌다가, ... (^^) 편하게 블로그 스킨을 바꾸는 방법을 알게 되었습니다. 스킨 위저드 통하는 방법보다는 이 방법이 훨씬 편합니다. html/css 초기화 되는 일도 없고 손봐 주는 수고도 필요 없습니다. 보통, 발견은 우연이란 이름으로 오는 거 같습니다.
 
 
 



글의 내용이 유익하셨다면 추천버튼을 쿡! ^^


2011 0820 토 22:20 ... 11:10  비프리박

 
 
반응형



댓글을 달아 주세요

악성답글/배설형답글/욕설답글은 삭제됩니다.
답글은 인격의 거울입니다.




  1. 2011.08.21 02:05 | Address | Modify/Delete | Reply

    비밀댓글입니다

    • BlogIcon 비프리박 2011.08.21 08:53 신고 | Address | Modify/Delete

      블로그 느낌이 초큼 새로운가요? 그렇다면 다행. ^^
      ㅇㄹㅋ님도 블로그 스킨을 손 보셨군요? 마음이 통한?
      흠흠. 뭘 빼고 뭘 비우셨을까. 궁금.

  2. BlogIcon DAOL 2011.08.21 08:51 신고 | Address | Modify/Delete | Reply

    오우^^ 쉬운데욤..ㅎ
    툴바를 설치할 때에 이미지를 파일 업로드 시키고
    style.css에서 파일명을 입력했거든욤..
    이미 알고 있었던 것인데 응용을 못한 거로군욤..ㅋ

    • BlogIcon 비프리박 2011.08.21 08:55 신고 | Address | Modify/Delete

      스킨위자드로 파일을 업로드했다면 css에 파일명이 들어가 있을 거 같았어요.
      찾아봤더니 짜잔하고 나타나더라구요. 그다음은 파일 업로드 + css 수정.
      이게 훨씬 편하더구만요. 그 외의 이미지 파일 수정도 이런 방식으로 하고 있어요. 그 다음부터는요.

      흠흠. 다올님도 이미 알고 계셨군요? 응용이 안 되었을 뿐.

  3. BlogIcon 럭키도스 2011.08.21 18:58 신고 | Address | Modify/Delete | Reply

    html 잘 모르는 분들에게 유용하나 정보네요.~
    저도 처음에 html 대학에서 배울때 애매한 경우가 많아서 잘 못했지요.
    지금도 그렇게 잘하는건 아니지만..간단히 스킨 수정은 가능한 정도입니다.
    최근에 html, css, 등 웹쪽으로 공부중인데..웹도 양이 꾀 많네요.~

    • BlogIcon 비프리박 2011.08.21 22:43 신고 | Address | Modify/Delete

      html 잘 몰라도(저처럼^^) 얼마든지 쉽게 바꿀 수 있는 팁이죠.
      게다가 변경 후에 뭔가 초기화되는 부작용(?)도 없고요.
      흠흠. html을 무려 대학에서 배우셨군요. 깊이가 저랑은 다르신. ^^
      블로그 html이랑 css만 제 맘대로 마구 다룰 수 있음 좋겠습니다. 흐윽.

  4. BlogIcon 해우기 2011.08.22 13:20 신고 | Address | Modify/Delete | Reply

    몇번을 바꾸었다가 다시 원상태로 돌아가고 합니다..ㅎㅎ

    시원해서 좋네요.....이 배경화면은...

    컴을 잘 다루지 못해서...그냥 쓰는것도 있고 사진크기때문에 예전 그대로를 고집하는 경우도 있고...

    다음에는 좀 바꿔보고 싶은데...ㅎㅎ

    • BlogIcon 비프리박 2011.08.24 21:01 신고 | Address | Modify/Delete

      블로그 바탕화면이 참 정하기가 쉽지 않지요.
      고민에 고민을 거듭하다가 어느날 딱 느낌이 오는 녀석으로 정하게 됩니다.
      계절 따라 바꾼다고 해놓고 잘 지키지 못하는 이유도 그래서라는. ^^;

      이 바다 바탕화면은 바다가 바깥에 왔으면 하는 아쉬움이 있습니다.
      본문과 사이드바에 가리고 나면 바다가 조금 밖에 안 보여서 말이죠. ^^

  5. BlogIcon 보기다 2011.08.22 16:39 신고 | Address | Modify/Delete | Reply

    전 만지며 사는게 html, css(이걸로 밥벌이 합니다ㅋ) 인지라,
    블로그 스킨 수정하자 하자 하면서도 2년째 그대로 사용중이라죠ㅠ.ㅠ
    귀차니즘은 어디로 사라지지 않는가 봅니다.^^;

    • BlogIcon 비프리박 2011.08.24 21:09 신고 | Address | Modify/Delete

      오오. 전혀 짐작도 못했습니다. 그 쪽 일을 하시는군요?
      그렇다면 뭐 자작 스킨 html/css도 뚝딱 만드실 듯.
      저는 그렇게 좀 해보고 싶은데 공부를 해야 가능하다보니. (라는 핑계만. ㅜ.ㅜ)

      블로그 스킨이라는 게 어차피 글을 담는 그릇에 불과하다보니(^^)
      적당히 귀차니즘을 핑계로 버텨도 갠츈하지 말입니다.

  6. BlogIcon 머니모아 2011.08.22 18:18 신고 | Address | Modify/Delete | Reply

    바다 사진이 시원한게 넘 좋네요..
    즐거운 시간 되세요^^

  7. BlogIcon 그냥+ 2011.08.26 12:05 신고 | Address | Modify/Delete | Reply

    안녕하세요 비프리박님^^
    /*@background-image=background-image:*/background-image: url("images/○○○")/*@*/;
    --> 끝에 fixed; 설정을 넣어주면 배경화면이 고정되어 눈이 더 편해질 것 같습니다.^^

    • BlogIcon 비프리박 2011.08.26 18:15 신고 | Address | Modify/Delete

      예전에 시도하려고 했던 배경화면 고정인데요.
      그렇게 넣으려면 앞서 다른 걸 좀 건드려 줘야 하더라구요.
      귀차니즘에^^; 걍 쓰고 있습니다.
      그래도 알려주셔서 감사합니다.

  8. BlogIcon 정보헌터 2013.03.02 00:06 신고 | Address | Modify/Delete | Reply

    소중한 정보 감사합니다.
    확장자를 안바꾸고 그냥 색만 변경해서 하니 적용이
    안되서 헤멨는데 덕분에 해결했어요^^: