Fork me on GitHub リボンをつける

ページの右上とかに表示する「Fork me on GitHub」と書かれたリボンは GitHub で用意してくれています。

With the rollout of GitHub Pages, why not show the world that you collaborate on GitHub? I’ve prepared these ribbons that you can overlay on your site by copying and pasting the appropriate snippet into your site’s HTML. Make sure to change the URL in the link to contain your username instead of “you”.

GitHub Ribbons

赤・緑・黒・黄・灰・白が用意されていて、他の色にしたい場合は media/ribbons at master · github/media から PSD ファイルをダウンロードすることができます。

CSS3 で Fork me!

画像じゃなくて CSS3 でほにゃららしたいなーと思ったら、既にありました。An imageless and responsive "Fork me on GitHub" ribbon

作者さんのアイコンとサイトがまたかっちょいい!ぐいーんって。

リボンの色と文字色、それぞれ hover 時の設定ができる他に、リボン上下の罫線の色、リボンの影の設定、レスポンシブの分岐点が設定できます。レスポンシブについては、ブラウザの横幅が設定された分岐点よりも小さくなった場合、リボンのコード挿入位置に横長のボタンが表示されるようになります。

Ohotech 北見周遊マップ にリボンつけましたので、お気軽に Fork me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です