설치형 블로그 티스토리의 메인 이미지 바꾸기 첫번째입니다.

티스토리 블로그 스킨의 종류에서 1단형, 2단형, 3단형, 기타등으로 구부되어지지만 메인 이미지는 모두  topbg형으로 이루어져 있습니다. 기본적으로 제공하는 스킨의 이미지를 사용하여도 무방하지만 좀 더 내블로그를 다른 사람들에게 예쁘게 보여주기 위해서는 중,고급자처럼 소스 변경보다는 우선 간단한 이미지 변경이 처음에는 쉬울 듯 합니다.

티스토리에서 제공하는 1단, 2단, 3단형의 모양과 블로그의 메인 이미지가 어느 부분인지 빨간 박스로 표시해보았습니다. 우선 메인 이미지를 만들기 위해서는 포토샾등의 프로그램을 활용하지 못하더라도 기본적으로 이미지 편집 프로그램을 사용할 줄 아셔야 합니다. 전문가 프로그램인 포토샾도 기초적인 편집 정도는 쉽게 배울수 있지만 전혀 다루어본 적이 없으신 분은 다루기가 처음부터 쉽지는 않고 책이나 동영상 강좌 또는 포토샾 등을 설명해 줄 수 있는 주변분들의 도움을 받으셔야 합니다.

메인 이미지를 바꾸는 방법을 설명하기전에 저의 스킨의 종류는 위의 이미지에서 좌측 첫번째 티스토리 기본 스킨 2단형입니다. 메인에 사용할 이미지 사이즈는 H 150px(픽셀) x W 1006px(픽셀)입니다. (후에 설명하겠지만 이미지 편집등 픽셀 사이즈(수치)는 상당히 중요합니다.)

스킨 마다 기본적으로 설정된 topbg(상단배경) 크기가 같거나 다르기도 합니다. 만약 기본적으로 설정된 상단 배경보다 작을 경우 바둑판 형식으로 반복해서 적용되고 클 경우는 편집한 이미지가 잘려져 보이게 됩니다.

(이미지 편집법까지 설명하자니 말이 길어 질 듯 해서 상단배경 교체법만 알려드리겠습니다.)

제가 새로이 스킨을 적용하고 상단배경(topbg)이 기본적으로 제공되었던 이미지입니다.

티스토리 애드센스라는 블로그 네임과 (약간의 무늬가 있는)파란 배경의 이미지였습니다.

제가 미리 만들어 놓은 블로그 topbg 이미지를 어떻게 바꾸는지 설명하겠습니다.

먼저 admin(관리자)로 들어가서 상단 메뉴바에서 스킨에 마우스를 갖다대고 HTML/CSS 편집을 클릭합니다.

HTML/CSS 편집 오른편에 파일업로드를 클릭합니다. 티스트로 블로그에서 기본적으로 생성되어 있는 이미지 폴더로 이동된 것입니다. 이곳에 보면 빨간 원으로 표시된 부분에 images/topbg_img.gif이라고 적혀있습니다. "images" 뜻은 제 블로그 7istory의 이미지 폴더라는 말이고 "/"는 좌측이 상위, 우측이 하위라는 의미입니다.

(간단하게 다시 말하면 우리가 흔히 사용하는 컴퓨터의 경로를 문자 및 수식어로 표현한 것입니다.)

tistory라는 하드에 7istory폴더가 있고 7istory안에 image라는 폴더가 있으며 그안에 topbg_img.gif라는 이미지 파일이 있다는 뜻입니다. topbg_img.gif는 위(두 번째 참고이미지)에서 처음 스킨을 적용하여 기본적으로 제공된 파란색의 상단배경의 파일명입니다.

(왼쪽 작은 상자는 미리 보기창입니다. 파일을 하나씩 클릭할때마다 어떤 이미지인지 쉽게 알 수 있습니다.)

스킨의 HTML/CSS편집으로 들어가서 파일 업로드를 클릭하고 topbg_img.gif라는 상단배경 파일을 확인하였고 다음으로 내가 직접 이미지를 만든 파일을 파일 업로드를 (우측 상단) 클릭하여 업로드를 시킵니다.

파일이 업로드되면 파일이 이름 순서대로 자동 정렬이 되기 때문에 숫자, 영문의 알파벳 순서로 찾으시면 됩니다.

제가 직접 이미지 수정하여 파일을 업로드 한 파일명이 main_top_img_02입니다. 좌측 작은 상자는 미리보기가 활성화 되어있습니다. 파일이 업로드 되었는지 확인하였으면 파일 업로드 좌측의 HTML/CSS 편집을 클릭합니다.

HTML/CSS 편집에서 위쪽은 HTML 소스 코드를 수정할 수 있는 창이고 아래 쪽은 CSS 소스 코드를 수정할 수 있는 소스 코드 창입니다.

간단하게 HTML과 CSS에 대해 설명을 첨부하겠습니다. (위키백과 참조)

HTML은 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용 과 그 외 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는데 사용 될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러 싸인 "태그"로 되어있는 HTML 엘리멘트 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의 하는 CSS 같은 스크립트를 포함하거나 불러 올 수 있다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.

CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며,XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

간단하게 설명하면 HTML은 진열장이고 CSS는 진열장에 진열되어 있는 것들이라고 생각하시면 됩니다.

아무튼 바로 위 이미지에서 style.css 소스 코드 창에서 중간쯤 스크롤 해서 내리면 Header 부분에서 앞에 말한 상단배경이 폴더 (images) 안에 있는 파일(topbg_img.gif) 있다는 imges/ topbg_img . gif 소스가 보일 것이입니다. 기존 상단배경 파일명을 파일 업로드한 교체할 파일명으로 바꾸면 되는 것입니다.

제가 직접 이미지 편집한 파일인 main_top_img_02.jpg로 파일명을 바꾸었습니다. 그리고 업로드한 파일이나 소스코드 수정에 문제가 없는지 미리보기 해보고 저장을 누르시면 상단 블로그 메인 배경이 정상적으로 바뀐 것을 알 수 있을 것입니다.