Last active
January 20, 2016 23:38
-
-
Save KurohimeAkari/bedc721e015999fc6c1f to your computer and use it in GitHub Desktop.
Shereアイコン作った。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.entry-footer .social-buttons { | |
margin: 10px auto; | |
display: inherit; | |
text-align: center; | |
} | |
span.social-buttons{ | |
display: inline-block; | |
text-align: center; | |
width: 100%; | |
} | |
.social-buttons div.social_b{ | |
display: inline-block; | |
width: 120px; | |
padding: 5px 2px; | |
text-align: center; | |
vertical-align:middle; | |
border:1px solid #666; | |
margin:3px; | |
cursor: pointer; | |
font-size:13px; | |
min-height: 60px; | |
} | |
.social-buttons p{ | |
margin: 0px; | |
margin-top:8px; | |
font-size: 13px !important; | |
} | |
.social-buttons iframe{ | |
display: inline-block; | |
} | |
.social-buttons div:hover{ | |
background: #ddd; | |
} | |
.social-buttons div a { | |
font-size:18px; | |
} | |
i.fa{ | |
margin:3px; | |
} | |
.hatena-star-star-container{ | |
display: inline-block; | |
width: 100%; | |
margin: 5px 0px; | |
text-align: left; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*----------------------------------------------------------- | |
// Ver2.00 2015-11-30 修正 | |
------------------------------------------------------------*/ | |
$(function() { | |
/*----------------------------------------------------------- | |
// ソーシャルアイコン処理 | |
------------------------------------------------------------*/ | |
//mobile | |
var mobile = location.href; | |
var hatena = 'http://b.hatena.ne.jp/entry/' | |
var google = 'https://plus.google.com/share?url=' | |
var twitter = 'https://twitter.com/intent/tweet?text=' | |
var pocket = 'https://getpocket.com/edit?url=' | |
// はてなブックマーク | |
var buttom = $('.social-buttons'); | |
var social = '<div title="上の文字をクリック" class="social_b"><a id="so_hatena" href="hatena + mobile" class="hatena-bookmark-button" data-hatena-bookmark-title="" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><p>はてなブックマーク</p><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>'; | |
social += '<div title="クリックにて共有" class="social_b"><a id="so_google" href="'+ google + mobile +'" target="_blank"><i class="fa fa-google-plus"></i></a><p>Google+</p></div>' | |
social += '<div title="クリックにてツイートする" class="social_b"><a id="so_twitter" href="'+ twitter + mobile +'" target="_blank"><i class="fa fa-twitter"></i></a><p>Twitter</p></div>' | |
social += '<div title="この記事を保存する。" class="social_b"><a id="so_pocket" href="'+ pocket + mobile +'" target="_blank" class="pocket-btn" data-lang="ja"><i class="fa fa-get-pocket"></i></a><p>Pocket</p></div>' | |
buttom.append(social); | |
/*----------------------------------------------------------- | |
// タイトルからブログのURL取得 | |
------------------------------------------------------------*/ | |
$('.entry-title-link').each(function(){ | |
var href = $(this).attr('href'); | |
var title = $(this).text(); | |
var parent = $(this).parents('.entry-inner,.archive-entry'); | |
// はてなブックマーク | |
parent.find('#so_hatena').parent('div').css('color', '#008fde'); | |
parent.find('#so_hatena').attr({ | |
'href': hatena + href, | |
'data-hatena-bookmark-title': title, | |
}); | |
// Google + | |
parent.find('#so_google').parent('div').css('color', '#db4a39'); | |
parent.find('#so_google').children('i').css('color', '#db4a39'); | |
parent.find('#so_google').attr('href', google + href); | |
parent.find('#so_google').parent('div').click(function(){ | |
window.open(google + href, 'Gwindow', 'width=650, height=650, menubar=no, toolbar=no, scrollbars=yes'); | |
return false; | |
}); | |
parent.find('#so_twitter').parent('div').css('color', '#55acee'); | |
parent.find('#so_twitter').children('i').css('color', '#55acee'); | |
parent.find('#so_twitter').attr('href', twitter + title + " " +href + " #はてなブログ"); | |
parent.find('#so_twitter').parent('div').click(function(){ | |
window.open(twitter + title + " " +href, 'TWwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); | |
return false; | |
}); | |
parent.find('#so_pocket').parent('div').css('color', '#d05254'); | |
parent.find('#so_pocket').children('i').css('color', '#d05254'); | |
parent.find('#so_pocket').attr('href', pocket + href); | |
parent.find('#so_pocket').parent('div').click(function(){ | |
window.open(pocket +href , 'POwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); | |
return false; | |
}); | |
}); | |
}); |
.css にて 10行目 width: 100%; を追加
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ver2.0 categoryで色が効かない問題を修正しました。