サイト掲載用ALISロゴ(svg/html形式)の公開について

挨拶

---

ALISハッカー部に所属しているブルーモアイと申します。

私的利用で制作したsvgとhtml形式のALISロゴを公開します。これらを用いれば、あなたのサイトに高品質のロゴが掲載できるはずです。

2018年9月現在、ALIS公式は数種類の形式でALISロゴを公開しています。

しかし、それらの形式はpngやjpgといったビットマップデータがメインであり、ブラウザで直接使えるベクターデータは公開されていません(たぶん)。

ベクターデータはジャギーが発生しないうえ、表示速度でも優位になることがあります。さらに、html形式でも記録できるため、画像のアップロードすら必要としない優秀な形式です。場合にもよりますが、Webサイトには望ましい形式となっております。

そこで、ALIS公式が公開しているeps形式のファイルから、svg形式のファイルを作成しました。また、これらのhtml形式も付せて公開します。ブログやホームページに貼り付けるリンクアイコンなど、多くの利用方法があると思います。どうぞご活用ください。

目次
　ロゴカタログ
　諸注意
　使用方法
　おわりに

ロゴカタログ

---

公開するロゴは以下の18種類です。

左から「原本」「単色(ALISブランドカラー #858dda)」「単色(グレー #444444)」になります。「原本」がそもそも単色である場合には、「単色」2種類のみの公開になります。

また、後述する方法を用いれば、色を変えることも可能です。

A

CircleA

ALiS

A&ALiS

CircleA&ALiS

A&ALiS(vertical)

CircleA&ALiS(vertical)

諸注意

---

これらのデータはALISハッカー部GitHub上の「alis-logo」に保存されています。ご利用の際はそちらからご覧ください。

ALISロゴは禁止行為をしない限り、公式の許諾無しで使用することができます。詳しくは以下をご覧ください。

https://github.com/AlisProject/branding/blob/master/license.pdf

禁止行為をした場合、ALIS公式から使用停止などの措置が下る恐れがあります。ご注意ください。

また、ALIS公式がロゴの無断使用を許可している目的は、コミュニティの活性化とALISの紹介にあります。よって、本データ群もそれに倣い、すべてのファイルを二次配布・改変可能とします。どうぞご自由にお使いください。

使用方法

---

ALISハッカー部GitHub内の「alis-logo」で公開しています。

各フォルダは前述のロゴカタログと連動しているので、カタログを参考に目的のファイルを探してください。svgファイルとhtmlファイルは、同一フォルダ内に保存されています。目的のファイルを開き、ダウンロード、コピー等を行ってください。

また、「IcoMoon」というサイトでsvgファイルの色の変更や、htmlとcssファイルへの出力が可能です(動作未検証)。こちらも付せてご利用ください。

詳しいsvg/htmlファイルの導入方法は、各使用環境によって著しく変化します。すべてに対応できませんので、最もオーソドックスなhtml/css形式のみ例を挙げます。

ヘッダー内の赤枠にCircleAのロゴを入れようと思います。

ALISハッカー部GitHub「alis-logo」からCircleAのhtmlをコピーします。

サイトhtml内の目的の位置に貼り付けます。

現在サイトはこの状態です。ロゴが非常に大きく表示されてますが、ジャギーは発生していません。

色を変えるために、貼り付けたhtmlコードの「.st...」行末にある「#......」の数字を変更します。（他ファイルでも行数に違いはあれど、基本的に文は共通です。行末「#......」の変更で同じように色を変えられます）

まだら模様にするために、半数を「#57C4B9」に変更しました。

色が変更されているのが確認できます。

最後にcssでsvgタグの大きさを指定します。

ヘッダー内にロゴが収まりました。以上で完成です。

おわりに

---

不具合・要望があれば、以下のTwitterアカウントまでご連絡ください。