워드 프레스 이미지를 서로 옆에 표시하는 방법

페이스 북 0 윗 0 링크 된 0 핀 3 총 3

워드 프레스 이미지를 나란히 표시 하시겠습니까? 때때로 당신은 당신의 웹 사이트에 행에 사진을 정렬 할 수 있습니다. 이 글에서,우리는 어떻게 서로 옆에 워드 프레스 이미지를 표시하는 방법을 보여줍니다.

서로 옆에 워드프레스 이미지 표시

워드프레스 이미지 표시에는 여러 가지 방법이 있습니다. 세 가지 간단한 방법을 살펴 보겠습니다…

방법 1: 왼쪽 정렬

먼저 워드 프레스 게시물 또는 페이지에 사진을 추가하십시오. 그냥 삽입 할 이미지를 선택하는 편집기의 왼쪽 상단 모서리에서 추가 미디어 버튼을 클릭합니다.

이미지 추가

이미지 추가

이미지를 선택한 후 게시물에 삽입 버튼을 클릭합니다.

이제 각 이미지를 클릭하고 왼쪽 정렬을 선택하여 이미지를 서로 옆에 맞 춥니 다(이 작업을 수행하려면 시각적 탭에 있어야합니다).

왼쪽 정렬

왼쪽 정렬

또는 미디어 삽입 화면 내부의 정렬 옵션(“첨부 디스플레이 설정”아래)에서”왼쪽”을 선택하여 포스트에 삽입 버튼을 클릭할 수 있습니다.

이제 이미지가 자동으로 나란히 표시됩니다. 결과는 다음과 같습니다:

서로 방법 하나 옆에 워드 프레스 이미지

워드 프레스 이미지가 서로 옆에 방법 하나

이 방법에 하나의 단점이있다. 이미지와 같은 페이지에 텍스트가 있으면 이미지 오른쪽의 빈 영역이 채워집니다:

오른쪽 텍스트

이미지에 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정 사용자 지정

먼저 페이지 또는 게시물을 텍스트 모드(시각적 모드가 아님)로 편집했는지 확인하십시오.

<이미지>태그에 다음 코드를 추가합니다:

style= "float: left; margin-right: 15px;"

이렇게 하면 이미지가 각 이미지의 오른쪽에 15 픽셀의 공백으로 서로 옆에 정렬됩니다. 아래 그림과 같이 서로 옆에 표시할 모든 이미지에 이 코드를 추가해야 합니다:

이미지 코드

이미지 코드

:

서로 방법 두 옆에 워드 프레스 이미지

서로 옆에 워드 프레스 이미지 방법 두

당신은 이미지의 오른쪽에 표시되는 텍스트를 방지하려면,대신이 코드를 사용:

style= "display: inline-block; margin-right: 15px;"

이제 텍스트가 이미지를 감싸지 않습니다. 대신 다음과 같이 표시됩니다:

인라인 블록 방법

인라인 블록 방법

이 방법의 유일한 단점은 코드를 수동으로 추가해야한다는 것인데,이는 약간 혼란스럽고 시간이 많이 걸릴 수 있습니다.

방법 3:엔비라 갤러리 사용

엔비라 갤러리는 워드 프레스에서 이미지를 나란히 표시하는 가장 쉬운 방법입니다. 서로 옆에 표시 할 때 모든 이미지가 완벽하게 볼 수 있도록 심지어 자동으로 작은 축소판으로 큰 사진을 만든다.

시작하려면 엔비라 갤러리 플러그인을 설치하고 활성화해야 합니다.

그런 다음,단순히 엔비라 갤러리로 이동”워드 프레스에 새 이미지 갤러리를 추가하는 새로운 추가.

단순히 이미지 갤러리의 이름을 추가하고,엔비라 갤러리 설정에서 이미지 섹션에 원하는 사진을 추가 할 수 있습니다.

게시 버튼을 눌러 변경 사항을 저장하십시오.

이미지 갤러리 추가

이미지 갤러리 추가

이제 단축 코드 및 기타 정보가 포함 된 대화 상자가 표시됩니다. 그냥 복사하고 옆에 이미지 측면을 표시 할 페이지 또는 게시물에 이러한 단축 코드 중 하나를 붙여 넣습니다.

단축 코드 정보

단축 코드 정보

(자세한 튜토리얼을 보려면,워드 프레스에서 썸네일과 이미지 갤러리를 만드는 방법을 확인하십시오.)

그게 다야! 다음은 웹 사이트에 이미지가 어떻게 표시되는지 보여주는 예입니다:

서로 옆에 워드 프레스 이미지를 표시하는 방법

워드 프레스 이미지를 서로 옆에 표시하는 방법

엔비라를 사용하여 서로 옆에 다양한 높이의 이미지를 표시 할 수도 있습니다. 그에 대한 우리의 튜토리얼을 들어,워드 프레스에서 벽돌 이미지 갤러리를 만드는 방법을 확인하십시오.

우리는이 문서가 서로 옆에 워드 프레스 이미지를 표시하는 방법을 배울 도움이되기를 바랍니다. 당신은 또한 당신의 워드 프레스 갤러리에 대한 이미지 슬라이더를 만드는 방법에 대한 우리의 가이드를 확인 할 수 있습니다.

이 문서를 좋아하는 경우에,더 많은 무료 워드 프레스 자습서에 대한 페이스 북과 트위터에 우리를 따르십시오..워드프레스를 사용하시면서 무료 갤러리 서비스를 받으시고 싶으신가요?

엔비라 갤러리는 사진가들이 단 몇 번의 클릭만으로 아름다운 사진 및 비디오 갤러리를 만들어 작품을 전시하고 판매 할 수 있도록 도와줍니다.

답글 남기기

이메일 주소는 공개되지 않습니다.