커스텀을 계속하면서 점점 Fastboot 스킨이 전혀 다른 모습으로 변해가고 있습니다 ^^


    다 모아서 한번 Fastboot 뭐하라's Editiion한번 만들어봐야겠네요 ㅋㅋ



    제가 다시 수정하기 전까지 보신 분들은 지금 설명하는 제목스타일을 직접 보실테지만, 언제 수정할 지 모르니 스크린샷부터 남깁니다.


    크롬에서 모습


    모바일에서 모습


    Webkit 기반 이외의 브라우저에서의 모습 (IE, FF 등)


    배경이미지를 글씨에 맞게 자르는 옵션이 현재 Webkit기반 브라우저(크롬 등)에서만 동작하기 때문에, IE나 FF에서는 세번째 그림처럼 나타납니다.


    그럼 간단히 수정방법을 알아봅시다.



    .


    보이는 것과 같이 제목 스타일 변경하기


    1. skin.html에서 다음을 찾아 아래와같이 변경합니다.

    <h3 class="title">

    <i class="fa fa-bars"></i> <a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>


    <h3 class="title"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>


    2.style.css에서 다음을 찾아 아래와 같이 변경합니다.

    h3.title a {

      color: #fff;

    }

    h3.title {

      color: #fff;

      line-height:32px;

      font-size: 20px;

      font-weight: bold;

      border-radius:3px;

      padding-top: 3px;

      padding-bottom: 1.5px;

      padding-left: 10px;

      margin-bottom: 2px;

      margin-top: 5px;

      background: #aab2bd;

    }


    h3.title a {

      -webkit-text-fill-color: rgba(0,0,0,0);

      color: #fff;

      font-family:"맑은 고딕",Arial,"돋움",Dotum,AppleGothic,sans-serif;

    }


    h3.title {

      line-height: 1em;

      font-size: 2em;

      font-weight: 900;

      margin-bottom: 2px;

      margin-top: 5px;

      background: url('./images/polygon-3.jpg');

      text-align: center;

      padding: 1.5em;

      -webkit-background-clip: text;

      background-clip: text;

      text-shadow: rgba(0,0,0,0.5) 2px 2px 2px;

      border-bottom: #888 solid 1px;

    }


    3. 다음 이미지를 업로드합니다.

    '오른쪽 클릭 - 사진 저장' 후에 HTML/CSS편집에서 파일 업로드로 업로드합니다.


    파일이름이 'polygon-3.jpg'인지 확인해주세요.


    ( 이것 말고도, 어두운 계열 이미지는 모두 사용 가능합니다.)




    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon ][
      2014.11.14 21:06 신고

      뭐하라님 방명록에 글 썼던 사람인데요. 포스팅 제목이 작게(11포인트정도)나와서 문의 드렸는데, 이 포스팅을 보고 완전똑같이 해봤는데, 포스팅 제목이 뿌옇게 나오고(흐리게) 글씨는 여전에 11포인트정도로 나옵니다. 웹폰트를 적용하다가 뭘 잘 못 건드린것 같아요.

      웹폰트는 나눔바른고딕을 적용했는데, 문제가되는 포스팅 제목은 나눈바른고딕 폰트가 아닌 그냥 굴림체인걸로 봐서,

      제가 포스팅 전체 글씨 크기를 변경하는 부분을 잘 못건드린 듯합니다... 어디가 문제일지 짐작이 되시는지..ㅠㅠ 여쭙습니다..

      • BlogIcon 뭐하라
        2014.11.14 21:14 신고

        방명록에 답변남겼습니다.
        웹폰트를 적용하다가 그런것이니 웹폰트적용한부분을 삭제하셔야죠~

      • BlogIcon ][
        2014.11.14 21:51 신고

        해결됐습니다. 말슴하신대로 html에 웹폰트에 해당하는 부분을 '통째로 삭제'하니까 되네요. 문제는 제가 이 부분이 웹폰트 삽인인줄 몰랐고,

        원래 스킨에 있던 부분으로 생각하고 계속 수정하니까 해결이 안되는 거였습니다. 정말감사합니다. 늘 올때마다 많이 배우고 갑니다^^

      • BlogIcon 뭐하라
        2014.11.14 21:53 신고

        새로운것 적용하기 전엔 항상 스킨 저장하는 습관을 들여놓으세요 ^^


    • 2018.09.05 23:46

      비밀댓글입니다

      • BlogIcon 뭐하라
        2018.09.06 08:15 신고

         css추가한 부분에서
        -webkit-text-fill-color: rgba(0,0,0,0);
        이거랑 
        -webkit-background-clip: text;
          background-clip: text;
        이 부분 삭제하시면됩니다