ウェブページ上に「Fork me on GitHub」のようなリンクを設置する、GitHub Ribbons系のツールについてまとめました。
GitHub Ribbons
GitHub自身が提供しているものです。
リボン部分は画像になっているので、後に紹介するCSS製のものを使うことをおすすめします。
See the Pen GitHub Ribbons by Munieru (@munieru_jp) on CodePen.
Fork me on GitHub CSS Ribbon
GitHub RibbonsをCSSで再現したものです。
CSS製なので、色やテキストを柔軟に変更することができます。
See the Pen Fork me on GitHub CSS Ribbon by Munieru (@munieru_jp) on CodePen.
Pure CSS responsive "Fork me on GitHub" ribbon
こちらもCSS製ですが、レスポンシブデザインに対応しています。
画面の横幅が充分ではない場合はインライン表示になるので、コンテンツの上に重なって表示されることを防げます。
See the Pen Pure CSS responsive "Fork me on GitHub" ribbon by Munieru (@munieru_jp) on CodePen.
GitHub Corners
こちらは、「Fork me on GitHub」というテキストのかわりにOctocatアイコンのみになっています。
マウスオーバーすると足が動くのがかわいいですね。
See the Pen Untitled by Munieru (@munieru_jp) on CodePen.
そのままだとリンクの範囲が背景を含む領域になっていますが、CSSに以下のコードを追加することで、リボン部分のみにすることができます。1
.github-corner svg {
clip-path: polygon(0 0, 100% 0, 100% 100%)
}
See the Pen Untitled by Munieru (@munieru_jp) on CodePen.
比較
| 名前 | 描写 | ラベル | リンクの範囲 |
|---|---|---|---|
| GitHub Ribbons | 画像 | テキスト | 背景を含む領域 |
| Fork me on GitHub CSS Ribbon | CSS | テキスト | リボン部分のみ |
| Pure CSS responsive "Fork me on GitHub" ribbon | CSS | テキスト | リボン部分のみ |
| GitHub Corners | CSS | アイコン | 背景を含む領域 |