URL: https://umsisi.github.io/

|| はじめに

イラストレーターの umsisi/うむしし と申します。
Github PagesでLink in Bio的な役割を兼ねたPORTFOLIOページを作ってみたので備忘録を兼ねたREADMEをこちらに記しておきたいと思います。

各SNSからここへ飛んでもらって興味を持ってもらえたら良いなと思っております。

|| 謝辞

HTML作成にあたりCSSフレームワークとして Bootstrap を
BootstrapのTemplateとして startbootstrap-freelancer を
画像のポップアップ拡大表示には baguetteBox.js を
上部のバッジ作成には Shields.io を
それぞれ使用させていただきました。大変ありがとうございます。

このPORTFOLIOの作成顛末などはそのうちブログかQiitaにまとめたいです。

|| Shields.ioバッジ

README.mdの上の方にも並べてある Shields.io のバッジですが、
(文系脳にとっては)どこを見ても記述の仕方が最高に説明不足なので軽く書いておきます。

<img src="https://img.shields.io/badge/baguettebox-js-yellow?logo=javascript" />
このページに貼ってある baguettebox.js のバッジの書式が上のようになってます。

baguettebox-js-yellow
の部分が
バッジ左側の文字-右側の文字-右側の背景色
になります。じゃあ左側の背景色は？というとその後ろに
?labelColor=white
というふうに書くと反映されます。最後の
?logo=javascript
の部分は先頭のロゴマークで Simple Icons slugs にアイコン名の一覧があるので調べます。

ちなみにlabelColorとlogoを両方使いたい場合は
?labelColor=white&logo=javascript
という具合に「&」で繋いでいきます。
書き方がわかると楽しくなってきました。バッジだらけにしましょう！

|| さいごに

自他ともに認める理系音痴の文系イラスト系人間でもGithubでコミットしてリモートリポジトリにプッシュできる時代が来たことにむせび泣いております。世の「死ぬまでに一度は理系になりたかった人生だった系文系人間」の皆様にも是非Github PagesでPORTFOLIOとかを作ってほしいなと思う次第です。

|| おまけに

Visual studio codeでのREADME.md編集には Markdown Preview Enhanced プラグインが最高にクールです。これさえあればMarkdownなにするものぞです。作者様に100万の感謝を。

|| 有用すぎるリンク集

• GitHub Pages のドキュメント
• Shields.io を使ってバッジを表示する
• Shields.io | Simple Icons slugs
• おしゃれなREADME.mdを作って「このプロダクト凄そう..!(?)」と勘違いさせたいあなたへ
• Markdown記法 チートシート
• 誰にとってもわかりやすいGitのコミットメッセージを考える
• Jekyllの使い方 GitHub Pagesを使ってブログサイトを公開する方法

2024/11/30 umsisi