글에 이미지(사진) 싣기

FC2ID 블로그에 등록하기
12 /21 2009

블로그 글의 문장내에 사진을 올리는 순서를 설명하겠습니다. 이미지는 하나의 글에 몇개이라도 실을 수 있습니다.

17_add_picture1.png
이렇게 글 안에 화상 이미지를 넣을 수 있습니다.

수정 화면에서 이미지를 올리는 절차

 

글을 쓰면서 문장안에 사진(화상 이미지)를 배치하는 절차입니다.
화상 이미지는 하나의 글에 몇장이라도 게재 가능하며 추기에도 마찬가지로 화상 이미지를 넣을 수 있습니다.

화상 이미지는 이미 업로드된 것으로 설명합니다. 파일의 업로드에 관해서는 다른 항목의 해설을 참조하세요.
[참조]파일 업로드하기

【1】

17_add_picture2.png

새글 쓰기(글 수정)화면에서 글 텍스트 입력란에 이미지를 삽입합니다. 화상 이미지도 본문과 같은 곳에 써 넣습니다.

【2】

17_add_picture3.png

삽입 위치에 커서를 올려 두고, 도구 메뉴 파일 업로드 도구 열기 를 클릭합니다.

【3】

17_add_picture4.png
▲다른 창이 팝업으로 뜹니다.

17_add_picture5.png

팝업으로 뜬 다른 창에 이미 업로드된 이미지 목록이 표기됩니다.
거기에서 글 안에 넣고 싶은 화상 이미지를 선택하여 [이 이미지로 글쓰기]버튼을 클릭합니다.

섬네일(작은 사이즈의 이미지)이 생성된 경우에는 [섬네일로 글쓰기]버튼을 클릭하여 삽입할 수 있습니다.

【4】

17_add_picture6.png

커서 위치에 화상 이미지 HTML코드가 삽입됩니다.
2개 이후의 이미지도 같은 요령으로 추가해 갈 수 있습니다.

삽입한 이미지를 지우려면 추가된 HTML 코드 부분을 삭제하면 됩니다.

▲맨위로

파일 관리 페이지에서 이미지를 선택하여 글 열기

파일 관리 페이지(사이드 메뉴의「파일 업로드」)에서 화상 이미지를 선택하여 직접 글 안에 이미지 태그를 넣을 수 있습니다.

17_add_picture7.png
「파일 업로드」화면에서 [이 이미지로 글쓰기]버튼을 클릭하여,

이미지 목록에서 글 안에 넣고 싶은 화상 이미지를 선택하여 [이 이미지로 글쓰기] 버튼을 클릭합니다.

17_add_picture8.png

본문 입력란에 이미지 HTML태그가 이미 들어 있는 상태에서 「새글 쓰기」화면이 열립니다.

▲맨위로

이미지 HTML 태그에 관하여

초기 설정에서 삽입되어 있는 이미지 HTML 태그는 아래와 같은 형식입니다.

 <a href="http://파일 어드레스" target="_blank">
 <img src="http://파일 어드레스" alt="타이틀" border="0" />
 </a>

a href=...
화상 이미지를 클릭한 때에 화상 이미지만을 다른 화면에서 열리게 링크되어 있습니다.
글 안의 화상 이미지를 섬네일로 하여 클릭하면 확대 표시하게 할 수 있습니다.
불필요한 경우는  에서 까지의 부분을 삭제하면 됩니다.
target="_blank"
「_blank」를 지정해두면 다른 화면에서 화상 이미지가 열립니다.
img ...
화상 이미지를 표시하게 하는 HTML 태그입니다. 이 부분만 있으면 이미지는 표시됩니다.
alt=...
파일 관리(업로드)화면에서 「타이틀」로 설정한 텍스트가 들어갑니다.
화상 이미지가 표시되지 않을 때나 읽어들이는 중에는 이 텍스트가 표시됩니다.

「img...」이외의 태그가 없어도 화상 이미지는 표시됩니다. 필요없는 경우에는 「환경설정 변경」에서 삽입되는 태그의 설정을 바꿀 수도 있습니다.

(참조 「등록 설정」)

▲맨위로

이미지를 가로로 나열 표시하기

img 는 온라인 요소이므로 전후에 오는 문자 요소가 돕니다. 이미지 코드(img 요소)를 연속해서 기술하면 자연스럽게 이미지를 병렬시킬 수 있습니다.

블로그 글 작성 화면의 실시간 미리보기를 예로 들어 화상 이미지를 가로로 나열시키는 방법을 해설하겠습니다.

17_add_picture10.png

만약 「자동 줄바꾸기」가 ON 상태일 때에는 줄바꿈 위치에
이 보완되어 강제 줄바꾸기되므로、줄바꾸기나 빈 행은 넣지 않고 나열하고 싶은 이미지 코드는 사이를 띄우지 않고 붙여써주세요.

가로로 나열한 이미지의 마지막에는 강제 줄바꾸기(br)가 없으면 그 뒤에 오는 문자 등도 계속 돕니다. 돌지 않게 하고 싶은 곳에는 강제 줄바꿈(br)을 넣어주세요.

17_add_picture11.png

이같이 여러개의 화상 이미지가 가로로 나열 표시되었습니다.
★사용중인 템플릿의 스타일 시트에 따라서는 그 스타일 지정이 우선되어 화상 이미지가 가로로 나열되지 않을 수도 있습니다.
또 템플릿의 크기에 따라서는 레이아웃이 일그러지는 원인이 되는 경우가 있으니 주의바랍니다.

▲맨위로

blogmanualko

Welcome to FC2