react-share風はてなブックマークボタンをCSSだけでゴリ押し実装する

January 20, 2019

目次

目的

react-shareのボタン一覧 react-shareは、円形のキュートなシェアボタンを提供する、React コンポーネント群ライブラリである。

しかし、残念ながらはてなブックマークボタンが提供されていない。 また、このライブラリのリポジトリの更新状況も芳しく無く、プルリクエストを送っても反映される見込みは薄いと感じる。

今回は、ゴリ押しで react-share 風のはてなブックマークボタンコンポーネントを作っていく。

要件定義

はてなブックマークボタンは、以下のように呼び出したい。 props で URL とタイトルを渡すだけで、よしなにやってほしい。

import React from 'react'
import HatenaShareButton from '../components/HatenaShareButton'

const AboutPage = () => (
  <div>
    <h1>こんにちは</h1>
    <HatenaShareButton
      url="https://www.uniuniunicode.com"
      title="エビエビエビデンスのホームページ"
    />
  </div>
)

export default AboutPage

実装

#1 JSX

基本となる HatenaShareButton.jsx の実装は、以下の通り。 これをベースにして、 HatenaShareButton.css でいい感じに拡張してどうにかする。

import React from 'react'
import './HatenaShareButton.css'

const HatenaShareButton = ({ url, title }) => (
  <a
    className="HatenaShareButton"
    href={`http://b.hatena.ne.jp/add?mode=confirm&url=${url}&title=${title}`}
    target="_blank"
    rel="nofollow"
  >
    B!
  </a>
)

export default HatenaShareButton

#1 CSS

SVG で真面目にはてなブックマークのロゴを書くのはだるいので、この記事を参考に、CSS に色々足していくことで無理矢理実現させる。

まずは、普通に 32px × 32px で「B!」を表示する。 注意すべきは、line-height もきちんと 32px に揃える点。 また、text-decoration も必ず none にする。

次に、あのロゴの青と水色のツートーンの背景を再現する。 ツートーンの背景は、linear-gradient を使えば表現できる。

これで完成だ。 font-family に Verdana を指定すると更にあのロゴに近づくが、Android では Roboto で表示されてしまうのが個人的に気になっている。

おわりに

最後に、実際に React コンポーネントとして動作しているものを示して終わりとする。

私について

岩佐 幸翠
2019年4月に株式会社ディー・エヌ・エーへ新卒として入社し、GoとVue.jsを書いています。もっと詳しく

よかったらこの記事をシェアしてください:
B!