shields.ioで技術系のアイコンをたくさん作ってみる

2019-07-08
%E5%B0%8F%E3%83%8D%E3%82%BF%E9%9B%91%E8%AB%87shields.io
    

目次

概要

shields.ioを用いてテック系アイコンを量産しました。 とりあえず完成したのがこちらです。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ skills.png これでスキルマップを作ってみたらいい感じになりました。

アイコンジェネレータも作りました。

shields.ioについて

https://shields.io/ GitHubのREADMEでよく見かけるアレです。 shields.ioはSVG形式のバッジサービスです。

カスタムバッジを作る

特徴的な機能の1つとして URLのパターンでカスタムバッジを作ることができます。

https://img.shields.io/badge/${subject}-${status}-${color}.svg

subject : バッジの左側に入る文言 status : バッジの右側に入る文言 color : 色

Color

以下のようなものが用意されています。 color.png

16進数形式で指定することも可能です。

カスタムスタイル

いくつかのスタイルが用意されています。 ?style=plastic&logo=appveyor ?style=flat&logo=appveyor ?style=flat-square&logo=appveyor ?style=for-the-badge&logo=appveyor ?style=popout&logo=appveyor ?style=popout-square&logo=appveyor ?style=social&logo=appveyor

simpleicons

バッジではいくつかのアイコンが使えます。 これについてはsimpleiconsを参考になります。 https://simpleicons.org/ そして一例がこれです。  2019-07-08 1.41.11.png

全部で数えたら648ありました。

おすすめアイコンを作った

おすすめしたいアイコンを作りました。

言語系

ライブラリ・フレームワーク

OS

ミドルウェア

エディタ・IDE

クラウド・他

アイコンジェネレータを作った。

アイコンジェネレータを作りました。 ロゴ名の設定などで一部自分で調整が必要なものがあります。

Edit Icon generator -  shields io

参考

https://tech-blog.s-yoshiki.com/2019/07/1406/

https://qiita.com/s-yoshiki/items/436bbe1f7160b610b05c

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

ハイフンとかマイナスとかダッシュとか

少なくとも、これら説明できない奴、エンジニアとして、マジでやばいので自覚した方がいいぞ。について
元ネタ(?) 派生 最後に Twitterでネタ(?)になっていたのでメモ。 元ネタ(?) https://twitter.com/t0riumi/status/1225422385093865472 派生 https://twitter.com/eg19/status…

Qiitaでバズるとこうなる。アクセスの分析や原因考察をする
投稿した記事 アクセス分析 Qiitaでバズった原因の考察 終わりに Qiitaに数年前から投稿していますが、延3日間で「1000 いいね」をもらいました。今までの最大いいねが20…

ソースコードレビューのポイントをまとめる
ソースコードレビュー時のポイントを各所のブログから集めてまとめました。以下 https://gist.github.com/s-yoshiki/9e446d69cf388703a4711f7e69cba173

AWSソリューションアーキテクト参考資料集
ブラックベルト サービス別資料 AWS Well-Architected フレームワーク 特に目を通すべき資料の一覧です。 ブラックベルト https://aws.amazon.com/jp/aws-jp-introduction/ サービス別資料 https://aws…

AWS ソリューションアーキテクト不合格体験記を集める
AWSソリューションアーキテクトアソシエイトに1回落ちたけど勉強し直して合格した話 AWS認定ソリューションアーキテクトアソシエイト(SAA)不合格体験記 非エンジニアがAWSソリューションアーキテクトに合格するまで AWSソリューションアーキテクト認定に落ちた話 AWS…

shields.io用アイコンジェネレータを作ってみた
デモ 情報 参考 ソース shields.io用アイコンジェネレータを作ってみました。 デモ 情報 Vue + codesandboxで作ってみました。 詳しい作り方はここを参考にしてください。 参考 https://tech-blog.s-yoshiki…

google.52ecy.topとかいうサイトからアクセスがあった
はじめに nmapしてみた whoisしてみた DNSを調べてみる はじめに このブログのアクセスログのリファラに google.52ecy.top というものがあった。 https://google.52ecy.top/ とりあえず、アクセスしてみるとgoogleのtop…

ブラウザ上でWindowsXPが動く??
紹介 エミュレータでもVMでもなく Reactによって作られたものだそうです。 完成度高ぃ demohttps://t.co/mjBg4pkgNa pic.twitter.com/s0bkHFyKHO — s-yoshiki…

カスみたいな技術ブログが1日100PVを超えてしまいました。
現時点でのブログのステータス 最近の1日あたりのアクセス数の推移 記事数は78 月間アクセス数は約1500 ブログのポリシー 些細なことを書き続ける ニッチなネタを書く 開設からここまで 思いつきで始めたようなカスみたいな技術ブログが1日100PV…

最新の投稿

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

CentOS6(Docker)でyum update できなくなった
エラー内容 対応 CentOS6.10 で yum update しようとしたところエラーが出てアップデートできなかったので対応した時の記録 エラー内容 以下のようなエラーが出ました。 対応 を以下のように変更したところ解決しました。

PostfixでメールリレーしてMailHogで受信する開発用Dockerコンテナの構築
環境 Dockerイメージ作成 コンテナの起動 telnetで送信テスト phpで送信テスト Postfixのリレーを介して送信されたメールをMailHog(開発用SMTPサーバ)でキャッチするDocker開発環境を構築した際のメモです。 環境 Docker…

GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする
手順 GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする方法についてのメモです。 手順 まず、gitlab.comにて適当なリポジトリを…

Python poetryでパッケージ開発 PyPIで公開 Pytestでテスト CIをGitHub Actionsで回す
Poetry でパッケージ開発 pytest でユニットテストを実施しカバレッジを算出する パッケージをビルドし PyPI で公開する 検証環境にデプロイする 本番環境にデプロイする GitHub Actions で CI を回す codecovの設定 GitHub…

Perlでconstant(定数)をhashのキーに使う
ハマった事象 解決方法 1 括弧をつける 2 & をつける 参考にしたサイト Perlでconstant(定数)をhash…

php-fpmのステータスページを表示 Apache & htaccess
試した環境 php-fpm の pm.status_path について php-fpmのconfの設定 .htaccess の設定 アクセスしてみる 参考にしたサイト Apache環境で php-fpm のステータスページを htaccess…

Tags

Dates

© 2021   404 motivation not found