lulzneko

ブログで使っている Hexo の SNS 共有リンクのユーザビリティを高める

本ブログで使っている Hexo のデフォルトのテーマ landscape。記事を SNS で共有するボタンが用意されているのですが、そのボタン群のボックスを出してから使う手順になっています。
ボタン群を直接記事の下に配置することで、手順を減らしてユーザビリティを高めます。

前回の記事ブログで使っている Hexo の SNS 共有リンクに「はてなブックマーク」を追加するでは、Hexo に「はてなブックマーク(以降、はてブ)」のブックマークを作るボタンを追加しました。

そのとき気になったのが [共有] ボタンをクリックしてから、SNS 共有ボタン群のボックスを出して使う点です。今回は、この部分を改善してユーザビリティを高めます。

改修ポイントを確認

前回「はてブ」のボタンを追加したのはscript.jsの// Shareブロックでした。
これはarticle-share-linkのクラスが割り当てられた要素、つまり記事下の [共有] をクリックすると SNS シェア用のボックスを表示するスクリプトになります。

今回は、このスクリプトをやめて HTML テンプレートに直接各ボタンを配置するようにします。
修正ターゲットはarticle-share-link(= [共有] がある場所)になるので、これを全文検索して探します。
※ [共有] のラベル共有は i18n 対応で外部化されているので検索対象に適しません

article.ejsの<footer>タグ内にありました。(キャプチャでは 36行目)
ここにscript.jsで作っているボタンを移動してきます。

以下のコードを<footer>タグの下に追加し、article-share-linkの<a>タグを<span>タグに変更します。

<a href="http://b.hatena.ne.jp/entry/<%- post.permalink %>" class="article-share-hatena" target="_blank" title="このエントリーをはてなブックマークに追加"></a>
<a href="https://twitter.com/intent/tweet?url=<%- post.permalink %>" class="article-share-twitter" target="_blank" title="Twitter"></a>
<a href="https://www.facebook.com/sharer.php?u=<%- post.permalink %>" class="article-share-facebook" target="_blank" title="Facebook"></a>
<a href="http://pinterest.com/pin/create/button/?url=<%- post.permalink %>" class="article-share-pinterest" target="_blank" title="Pinterest"></a>
<span data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %>：</span>

基本的にはscript.jsにあった、タグを JavaScrip の書式から HTML の書式に変更して移動してます。
encodedUrlは HTML 内では文字列連結ができないのと、変数がpost.permalinkに変わり、HTML テンプレートとして<%- post.permalink %>を使います。すぐ下の [共有] のリンクで使っているのと同じです。

できあがった HTML テンプレートで表示！
残念ながら左に寄ってしまっています。。。

移動しただけでは残念ながらレイアウトが崩れてしまいました。スタイルを与えて修正します。
(この辺はサイトのデザインとご相談、１つの例として)

まずアイコン共通のスタイルを修正します。$article-share-linkを修正しますが同じ名前で.article-share-linkがあるので注意です。$のほうになります。
主な修正点は以下になります。

アイコンのボックスが大きいのでwidth: 20pxheight: 20pxで小さく
左に集まってしまっていたのをfloat: rightで右に戻す
並びが窮屈なのでmargin: 0 0 0 10pxで間隔を調整

アイコンのフォントが [共有] に対して大きいのでfont-size: 18pxで調整

$article-share-link
  width: 20px
  height: 20px
  display: block
  float: right
  position: relative
  color: #999
  text-shadow: 0 1px #fff
  margin: 0 0 0 10px
  &:before
    font-size: 18px
    font-family: font-icon
    font-weight: normal
    absolute-center(@font-size)
    text-align: center
  &:hover
    color: #fff

続いて各アイコンのスタイルを修正します。
カーソルがのったときに背景色が変わるようになっていますが、新しいレイアウトだとアイコンそのものの色を変えたほうがわかりやすいでしょう。
以下 Twitter を例にしますが、すべてのアイコンの定義で同じように修正します。

backgroundの行をcolor: color-twitter !importantのようにします

背景色の定義を、フォントの色の定義に変更

.article-footer aのcolor定義に負けるので、!importantで優先

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

だいぶ良い感じにアイコンが並びました。
float: rightを使ったのでアイコンが HTML の定義と逆順に並んでいます。今回はこの順番にしますが、並び順をボックスのときと同じようにするには、HTML の<a>タグの順番を逆順にします。

[共有] のラベルからマウスカーソルスタイルとアイコンを外す

SNS 共有のボックスを開くための [共有] ラベルのスタイルを調整します。今度は.article-share-link、.始まりの方になります。
矢印のアイコンをなくした方がすっきりしたので消しましたが、表示したい場合は&:before以降を残します。

cursor: pointerを削除し、マウスでクリックできる感をなくす

&:before以降を削除し、矢印のアイコンを消す

1
2
3

.article-share-link
  float: right
  margin-left: 20px

最後に [共有] ラベルをクリックできないようにします。<a>タグとcursor: pointerのスタイルをなくしているので、一見クリックできない要素に見えますが、クリックすると壊れたボックスが表示されます。
script.jsの// Shareブロックを削除します。　(キャプチャでは 34行目～86行目、表示の都合により一部折りたたみ)

完成！

SNS 共有アイコンをボックス表示から、記事の下に展開済みで表示するようにできました。

ブログメンティふりかえり１週目の後に、メンターのカック@ブロガー / k9u(@kakakakakku)さんとお話していた時に「”はてブ”をつけるときにボタンを使う」のがありました。

私が「はてブ」を使っていなかったので、ブックマークを付ける感覚をとらえられずボタンを設置していなかったのですが、確かにサイトを開いてから URL を入力する手順はしなそうです。

Twitter も共有するときにボタンがあれば押す可能性が高まるものの、自分で URL コピーするときは何か書く時で、そうでないときは流す可能性が高まります。ただ Twitter は開いていることが多いので、コピペする率は高いかもしれません。そういったサイトの特性もあることを学びました。

せっかくボタンを設置しましたし、アカウントも開設したので、たくさんのサイトを「はてブ」していきます。

今回は CSS をいろいろと調整しての修正がありました。
キャプチャや作業紹介がしにくかったので Try & Error の紹介は省略しましたが、CSS を試行錯誤するときは Chrome DevTools で CSS を直接編集するとリアルタイムに画面が変わってわかりやすいので、まずは Chrome DevTools で試してコードに落とすと楽です。

Author:lulzneko

Hexo の SNS 共有リンクの改修

改修ポイントを確認

SNS 共有ボタンを移動

SNS 共有ボタンにスタイルをあてる

[共有] のラベルからマウスカーソルスタイルとアイコンを外す

SNS 共有アイコンのボックスを表示するスクリプトを削除する

完成！