관리 메뉴
모바일 관리 메뉴

내다보는 (창)

º○3차 스킨수정작업 _ sns _포스팅 설정 본문

창작 & 일상/일상사

º○3차 스킨수정작업 _ sns _포스팅 설정

내다보는 창 2016. 10. 30. 13:48
반응형


SNS 포스팅 부분에 카카오스토리로 변경수정


상단 좌측의 버턴 이름을 "SNS 포스팅" 으로 변경후 열리는 창의 구글,트윗,페이스북, 둥등의 공유 사용하지 않는 "linkedin" 버턴을 주로 사용하는" Kakao story"버턴으로 변경을 했다..



이미지 1)


 이미지2)


새창으로 열리는 sns 포스팅.. 좌측 4번쩨의 아이콘과 링크를 카카오 스토리로 변경했다


올려놓은 이미지 1)과 같이 "포스팅 SNS" 로 직관적인 표시로 변경후 이미지 2) 와같이 중간 부분의 "in" 케릭을 스킨폴더내"./ image " 폴더의 social-sprite.png 파일의 이미지를 카카오 케릭으로 변경 ( 이미지 케릭들은 좌표값으로 불러져 표시되게  하나의 png 파일에 모두 올라 있다...) 그리고 구글 크롬의 검사 기능으로 아래의 코드들을 변경 했다..


임시로 크롬창에서 테스트 중임


위와같이 크롬에서 검사후 크롬에서 임시 테스트를 해본후 수정할 부분을 선택( socialShare.min.js 파일과 arthref.min.css 파일)의 문서내용중" .a linkedin " 부분의 class 선택자를 kakao로 변경후 위에 링크 부분을 카카오 스토리의 접근 링크로 변경했다.(이 부분에 대한 수정은 skin.html안에 있는 것이 아니라  socialShare.min.js 자바스크립 파일을 열어서  검색한 부분의 선택자와 링크를 변경후 arthref.min.css 부분의 클라스 선택자명을 동일하게 변경해 줘야한다.)


변경후 브라우져의 케쉬파일 제거 동작해보니 잘돌아간다..

아래 이미지처럼 모바일 에서도 잘돌아간다.



이전 작업으로는 방명록 작업과 함께 skin.html 문서에 직접 코딩했던 몇몇 태그들을 css문서내로 옮기는 수정작업을 마친후에 

사이드바에  방명록 치환 작업후 css 스타일 시트를 guast.css 로 분리해서 스타일작업을 할까하다가 그냥 기존에 있던 "tiriumContent.css" 문서내에 guast항복으로 주석처리후 치환했던 문서의 몇몇부분에 스타일 작업을 마쳤다..


이미지를 몇장 기록으로 올린다.

방명록 부분은 임시로 만들어 놓은 태그들을 html 문서에서 css 스타일 문서로 정리를 했다.

이미지화 해논 버턴들이 택스트 데이터위로 올라가는 버그가 있다.


택스트 버튼을 아래 이미지 버턴으로 변경



*방명록에 보시다시피 본문과 같이 버턴들에 스타일을 주어서 통일감을 주었 습니다.

그리고 내용들이 좌우로 퍼지는걸 막기위해 패딩값을 레이어를 만들어 감싸주었 습니;다.


css 문서안에 스타일 태그들을 정리했다


위) 패딩값 적용전 

아래) div 레이어로 감싼후 패딩값 적용후


div) 감싼후 padding : 값을 주어 내용을 정리 했다...




작업후 링크를 불러오지 못하는 기이한 현상이 있어서 다시 수정했습니다

수정한 문서들은 ( arthref.min.css, main.min.js, socialProfiles.min.js, socialShare.min.js )의 문서들에 속성자와 class 를 "linkedin" =  " kaakostory "로 변경하고 해당 ur을 ( kakaostory:{text:"Kakao_Story",className:"akakaostory",url:"https://story.kakao.com/s/share?url={u}&title={t}"} )로 변경 했습니다.

이제는 오류 없이 링크가 잘열리는군요... ur 을 넣을때 제가 티스토리의 글을 포스팅 하는 부분을 빼먹었 었네요;;;;

그리고 해당 스크립트 파일중에 속성자들을 모두 kakao로 바뀌니 오류가 없이 포스트 링크 전달이 잘됩니다..

여기까지 스킨수정 4차 작업 일지 입니다.....

편의상 음습체로 작성 됬습니다...


수정 중인 외부 sns 공유 버턴은 카카오톡 을 스트립트 로 불러오지 못하는 문제가 있다.

아래 이미지를 보면 (1) 번과 카카오 톡의 (3) 제이쿼리 파일명이 "jquery.min.js" 동일 하기에 스크립트 파일의 구문끼리충돌 하는것이 짐작중이다.

아무튼 카카오톡의 이미지 버턴에 링크된 javascript 의 센드링크(:sendLink) 를 전혀 호출하지 못하고 있다.

그런데 티텍토리가 다른 (카카오톡의 jquery.min.js 의 경우는 외부호출 링크) 두파일이 동일한 파일명으로 충돌할수도 있는것일까?

이파일을 외부링크로 스크립트 파일로 저장후 (2) 번 파일명" jquery.min2.js" 로 이름 변경후 내부( "images " ) 폴더에 저장후 내부링크로 불러와도 실행이 안된다..(이건 당연한건지도 모르지;;;;;;)


아래 이미지 기록 참조 


1) jquery.min.js   원본폴더내 파일)

2)jquery.min.2js  이름 변경 폴더내 파일)

3) jquery.min.js   외부링크 카카오톡 관련 파일  파일)


아무튼 시간을 두고 이문제를 Google 서치를 해봐야겠다....

*이부분도 해결이 됫고 해결된 내용은 댓글안에 있습니다.

나중에 공유버턴 이미지 들의  hover 스타일에 이미지 롤오버 스타일을 적용해서 마우스 오버시 이미지에 변화를 줄계흭이다.


이미지 효과에 "hue-rotate" 필터를 주었다.

*스킨 배포버전의 이미지는 원래는 불러(흐림)효과가 있었었는데 이필터가 어지럼증을 유발하여 

 원래 주인장 님의 흔들리는 효과로 변경 했었다.. 그런데 ix(익스플로러)부라우져 에서 이태그들이 비표준 인지라 순간 사라지는 버그가 있기에 이미지 효과를 "hue-rotate" 필터를 주었다.

마우스를 롤업 했을때 이미지의 칼러에 변화를 주는 필터이다 tiriumContent.css 파일의 

.imageblock>span>img:hover{

-webkit-filter: hue-rotate(70deg);

-webkit-filter: hue-rotate(300deg);

}

부분이다 .

물론 이필터 또한 비표준의 온상인 익스플로러 에선 효과가 없다.

태그 입력 효과 부라우져

크롬 , 파이어폭스 .사파리 ,둥둥...

아참 윈도우 10의 기본 부라우져인 엣지(edge) 에서도 필터가 적용된다.

언제나 익스에서 표준 HTML이 적용될지 아마 엣지 부라우져를 마소에서 내논걸 보면 추후 익스플로러는 점차 사라지는 레거시 유믈이 되지 않을까 유추 해본다..

test imge 


필터가 적용된 이미지


이 스킨의 가장 큰 문제가 모바일 스마트폰 에서의 사이드바 오픈시 페이지를 스크롤 할경우 사이드바가 닫히는 문제가 있다. 이문제를 해결 하려면 화면 터치시 자동으로 닫히는 이벤트를  java script 에서 찼아서 nev 버턴을 클릭 시에만 닫히고 열리도록 바꾼후 좌측 상단의 open nav 버턴을 스크롤시 우측하단의 Top 버튼처럼 우측 상단에서 나타나게 만들고 거기에 이벤트 를 주어야 할듯한데... 

이 모바일 부라우져 버그부분이 사실 가장큰 고민이고 어려운 부분이다

그나마 다행인점은  현재는 카카오톡 이나 스토리에 많은 연동을 하고있고 다행한것이 많은 연동을 하는 카카오 스토리의  모바일 부라우져 에서는 버그가  일어나지 않으니 그나마 위안이 된다.,

하지만 이스킨을 계속 사용하려면 이부분의 해결이 가장큰 관점이다

*이전수정목록 

2016/10/19 - 오랜만에 사용중인 블로그 스킨을 손좀 봤다.

2016/08/10 - *사용중인 Tirium(티리움) 스킨을 부분 편집했다

반응형

포스팅 공유

  • 네이버
  • 카스토리
  • 페이스북
  • 트위터
  • 밴드
  • 카카오톡
  • PIN
글의 댓글