dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

サイトの右上にGitHubへのラベルを表示する方法 - "Fork me on GitHub" Ribbon

たまにサイト見てると、右上に "Fork me on GitHub" って書かれたラベルがついていて
クリックすると GitHub のレポジトリに飛んでソースコードが確認できるものがある。

f:id:dackdive:20150405001637p:plain

(キャプチャは自分の Polymer チュートリアルアプリに設置したもの。
コードは https://github.com/zaki-yama/gae-polymer から見られます)

これやってみたいなと思って調べてみた。
Fork me on GitHub Ribbon とか単に GitHub Ribbon とか呼ぶらしい。

せっかくなので Polymer のカスタムエレメントとして作ってみた。

GitHub Ribbon を設置する方法いくつか

今回主に参考にした記事はこちら。

p15.jp

画像で

こちは公式の記事。

気に入った色のコードを自分のサイトに貼付けることで、
画像として左上または右上にリボンを設置できる。

CSS

http://codepo8.github.io/css-fork-on-github-ribbon/

このサイトで生成したコードを貼付ければ設置できる。

画像と比べていいところは

  • マウスオーバー時に色を変更することができる
  • クリック領域が純粋にリボン上だけ
    • 画像だと、リボンを囲む矩形領域がクリック可能になるので
      他の要素と重ねたりするとかえって邪魔になる

また、ここに載ってるやつだと下にも置けるっぽい。

http://simonwhitaker.github.io/github-fork-ribbon-css/

(応用)Polymer で

せっかく Polymer を勉強してるので Custom Element として作ってみようかと思ったら
既にいくつかあるっぽい。

せっかくなので自分でもやってみた。

とりあえず GitHub のユーザー名とレポジトリ名しか渡せないけど、
もうちょっとがんばると色・サイズ・位置とかも attributes として指定できそう。