2013년 7월 3일 수요일

구글 블로그(blogger) 헤더 이미지 중앙, 또는 우측으로 정렬시키기

블로그 헤더 이미지를 중앙, 또는 우측으로 정렬시켜주는 코드들입니다.
코드 적용 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.


헤더를 어떻게 설정하느냐에 따라서 적용해야될 코드들이 다릅니다.


1. 헤더 이미지 설정이 '제목 및 설명 뒤'인 경우

1.1. 이미지를 중앙으로 정렬시키려면, 아래의 코드를 적용합니다.

#header-inner {background-position: center !important; width: 100% !important;}


1.2. 만약, 이미지를 우측으로 정렬시키고 싶다면, 다음의 코드를 적용합니다.

#header-inner {background-position: right !important; width: 100% !important;}



2. 이미지를 '제목과 설명 대신' 사용하는 경우

2.1. 이미지를 중앙으로 정렬시키려면, 아래의 코드를 적용합니다.

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}



2.2. 이미지를 우측으로 정렬시키려면, 아래의 코드를 적용합니다.

#header-inner img {margin: 0 auto 0 300px;}

여기서 숫자 300은 이미지 위치의 좌우 위치를 설정하기 위해서 높게, 또는 낮게 조절할 수 있습니다.



3. 그리고 아래의 코드들은 '블로그 제목'과 '블로그 설명' 텍스트의 위치를 정렬시켜주는 코드들입니다. 이 코드들은 이미지 없이 텍스트로만 이루어진 헤더의 경우, 또는 '이미지 다음에 설명 표시'로 설정한 경우에 해당합니다.

3.1. 이미지가 없는 경우, 또는 '이미지 다음에 설명 표시'의 경우 헤더 중앙 정렬 코드는

#header-inner {text-align: center ;}



3.2. 우측 정렬 코드는

#header-inner {text-align: right ;}


입니다.



댓글 5개:

  1. 많이 배웠습니다~ 계속 포스팅 해주세요 ㅎㅎㅎ
    +1 추천에 피드까지 구독 완료 ㅎㅎ

    답글삭제
  2. 작성자가 댓글을 삭제했습니다.

    답글삭제
  3. 헤더의 텍스트를 오른쪽 하단에 위치하도록 하고 오른쪽에서 3칸 정도 벌려두려고 하면 어떻게 해야 하나요?

    답글삭제
    답글
    1. 안녕하세요. 댓글 남겨주셔서 감사합니다.

      저라면, 일단 text-align 으로 오른쪽 정렬을 시킨 후
      margin-top 과 margin-right 으로 상단에서부터의 간격과 오른쪽 가장자리의 간격을 조절하겠습니다.

      예 :

      #header-inner {
      text-align:right;
      margin-top:100px;
      margin-right:100px;
      }

      삭제
  4. 작성자가 댓글을 삭제했습니다.

    답글삭제