Today's Commit

このブログでは Hexo の Landscape テーマを使っている。デフォルトのやつだ。

エントリの右下に「共有」リンクがあり、それをクリックすることでソーシャルボタンがポップアップするのだが、なんだか分かり辛いような気がしたので常に表示するように変更した。

今の表示はこんな感じ

ソーシャルボタンの常時表示

まずソーシャルボタンの表示/非表示を切り替えている個所を探す。

ソースを読み進めていくと、themes/landscape/layout/_partial/article.ejsとthemes/landscape/source/js/script.js辺りのようだ。

article.ejs

<footer class="article-footer">
  <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
  <% if (post.comments && config.disqus_shortname){ %>
    <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
  <% } %>
  <%- partial('post/tag') %>
</footer>

script.js

var html = [
  '<div id="' + id + '" class="article-share-box">',
  '<input class="article-share-input" value="' + url + '">',
  '<div class="article-share-links">',
  '<a href="https://twitter.com/intent/tweet?url=' +
    encodedUrl +
    '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' +
    encodedUrl +
    '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="http://pinterest.com/pin/create/button/?url=' +
    encodedUrl +
    '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
  '<a href="https://plus.google.com/share?url=' +
    encodedUrl +
    '" class="article-share-google" target="_blank" title="Google+"></a>',
  '<a href="https://www.linkedin.com/shareArticle?mini=true&url=' +
    encodedUrl +
    '" class="article-share-linkedin" target="_blank" title="LinkedIn"></a>',
  '</div>',
  '</div>',
].join('');

var box = $(html);

$('body').append(box);

雑に説明すると.article-share-linkがクリックされた時、リンクの一覧を組み立てて body に追加している。

ということはここからクリックイベントを抜いてしまえばいい。というわけで以下のコードを同じ場所に追加する。

(function() {
  var $this = $('.article-share-items'),
    url = $this.attr('data-url'),
    encodedUrl = encodeURIComponent(url),
    id = 'article-share-items-' + $this.attr('data-id');

  var html = [
    '<div id="' + id + '" class="article-share-links">',
    '<a href="https://twitter.com/intent/tweet?url=' +
      encodedUrl +
      '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
    '<a href="https://www.facebook.com/sharer.php?u=' +
      encodedUrl +
      '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
    '<a href="http://pinterest.com/pin/create/button/?url=' +
      encodedUrl +
      '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
    '<a href="https://plus.google.com/share?url=' +
      encodedUrl +
      '" class="article-share-google" target="_blank" title="Google+"></a>',
    '</div>',
  ].join('');

  var box = $(html);
  $('footer').append(box);
})();

article.ejs も以下のように変更する。

<footer class="article-footer">
  <div data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-items"></div>
  <!-- <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a> -->
  <% if (post.comments && config.disqus_shortname){ %>
    <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
  <% } %>
  <%- partial('post/tag') %>
</footer>

もともとあった a タグ（共有リンク）をコメントアウトし、その前に同じ属性を持った div タグを追加している。これはdata-urlとdata-idを script.js に引き継ぐためだ。

酷く不格好な形だがしょうがない。僕は jQuery が得意では無いし、あまり時間も掛けたくない。。。！

css も直す

このままだとボタン群が左に寄せられてしまうので、以下のように右寄せにする。

themes/landscape/source/css/_partial/article.styl

.article-share-links
  // clearfix()
  // background: color-background
  float: right
  margin-left: 20px

もう一つ、footer にボタンを表示するようにすると、.article-footerの css の影響を受けてしまい、ボタンを hover してもアイコンの色が変わらない。

その為、以下のように.article-share-linkの color を!importantすることで優先させる。

$article-share-link
  width: 50px
  height: 36px
  display: block
  float: left
  position: relative
  color: #999
  text-shadow: 0 1px #fff
  &:before
    font-size: 20px
    font-family: font-icon
    absolute-center(@font-size)
    text-align: center
  &:hover
    // color: #fff
    color: #fff !important

ここまででボタンが常に表示されるようになった。

はてなブックマークボタンを追加

続いてはてなブックマークボタンを追加してみたい。何故なら僕が他人のブログを見る時、一番よく使うボタンだからだ。

font-awesome にアイコンが無い問題

twitter だとか facebook だとか、これらのアイコンは font-awesome のものを使っている。css(stylus)の指定はこんな感じになっている。

themes\landscape\source\css_partial\article.styl

.article-share-twitter
  @extend $article-share-link
  &:before
    content: "\f099" // <- ココ
  &:hover
    background: color-twitter
    text-shadow: 0 1px darken(color-twitter, 20%)

しかし font-awesome にはてなブックマークのアイコンは無いので、何とかしなければならない…

で、色々探していたら普通のフォントで代用できるんじゃないの？というサイトがあった。これは良さそう！

上記サイトを参考に、以下の定義を追加する。

.article-share-hatebu
  @extend $article-share-link
  &:before
    content: "B!"
    font-family: Verdana
    font-weight: bold
  &:hover
    background: color-hatebu
    text-shadow: 0 1px darken(color-hatebu, 20%)

はてぶカラーも追加

themes\landscape\source\css_variables.styl

// Colors
color-default = #555
color-grey = #999
color-border = #ddd
color-link = #258fb8
color-background = #eee
color-sidebar-text = #777
color-widget-background = #ddd
color-widget-border = #ccc
color-footer-background = #262a30
color-mobile-nav-background = #191919
color-twitter = #00aced
color-facebook = #3b5998
color-pinterest = #cb2027
color-google = #dd4b39
color-hatebu = #00a4de // <- 追加

最後に、script.js にリンクを追加して完了

var html = [
  '<div id="' + id + '" class="article-share-links">',
  '<a href="https://twitter.com/intent/tweet?url=' +
    encodedUrl +
    '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' +
    encodedUrl +
    '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="http://pinterest.com/pin/create/button/?url=' +
    encodedUrl +
    '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
  '<a href="https://plus.google.com/share?url=' +
    encodedUrl +
    '" class="article-share-google" target="_blank" title="Google+"></a>',
  '<a href="http://b.hatena.ne.jp/entry/' +
    encodedUrl +
    '" class="article-share-hatebu" target="_blank" title="Hatena Bookmark"></a>', // <- 追加
  '</div>',
].join('');

はてなブックマークボタンが追加された！

めでたしめでたし

参考

TAGS