【SVG・PNG・ai】X、InstagramなどSNSなど公式ロゴデータまとめ

個人的な覚書をかねて、SNSなど公式ロゴデータまとめておきます。

【SVG・png・ai】X、InstagramなどSNSなど公式ロゴデータまとめ

Xのロゴダウンロード先

TwitterからXになり、Xはダウンロード先が変わったようです。

あわせて読みたい

Xについて | Xロゴ、ブランドガイドライン、ポストツール Xロゴ、素材、Xブランドガイドラインをダウンロードして、ウェブサイトにポストを埋め込む方法をご覧ください。

PNGの黒と白、SVGだけというシンプルな構成です。

利用規約はずっと書かれていないようですが、みなさんここからダウンロードしているようです。

Twitterのロゴダウンロード先

Twitterのロゴはすでにダウンロードできなくなっています。

https://about.twitter.com/ja/company/brand-resources.html

eps, png, psd, svgがあります。形はサークル、角丸、四角です。

改変は不可です。

問題点は並べると統一感がないこと。同じ角丸でも角丸ぐあいが違うのです。
この角丸ぐあいが決められないのがちょっといやですね。
公式のロゴを利用する方法もありますが、FontAwesomeを利用しました。

Twitter、インスタ、Youtube、lineはFontAwesomeがあります。
lineがあるのはちょっと意外ですかね。世界に通じるのでしょうか。

slackもあります。

instagramのロゴダウンロード先

https://saruwakakun.com/html-css/reference/instagram

結局、インスタグラムはFontAwesomeを利用しました。

nuxt.jsのロゴダウンロード先

https://nuxtjs.org/design/

PNGは少し小さめでした。

vueののロゴダウンロード先

https://github.com/vuejs/art

少しわかりにくい場所にありました。

firebaseのロゴダウンロード先

https://firebase.google.com/brand-guidelines?hl=ja

SNSのシェアをHtmlやJavaScriptで実装する

X(Twitter)のシェア

TwitterからXになった関係もあり、転送がかけられているようです。どれでも大丈夫ですが、将来的なことを考えると１番下がおすすめです。

<a href="https://twitter.com/intent/tweet?text=Check+this+out!">
ツイート
</a>

<a href="https://x.com/intent/tweet?text=Check+this+out!">
ツイート
</a>

<a href="https://x.com/intent/post?text=Check+this+out!">
ポスト
</a>

textの内容はつぶやきたい内容にします。

<a href="https://x.com/intent/post?text=WordPressのプラグイン「Feature%20Image%20Pen」%0D%0A%0D%0A「Feature%20Image%20Pen」は、テキストと背景画像からアイキャッチ画像を自動で生成するプラグインです。%0D%0A%0D%0A応援ポストありがとうございます。%0D%0A%0D%0Ahttps://booth.pm/ja"
              target="_blank">

• URLエンコーディング: スペースは + ではなく %20 を使用するのが一般的です。
• 改行: %0A の代わりに %0D%0A を使用すると、より多くのプラットフォームで適切に表示されます。

Htmlは1行で書く必要があります。1行でかかないと、インデントなどが悪さをして空行ができてしまいます。

ただ、VsCodeの1行が長くなりすぎます。1行にしないためにJavaScriptを導入する手もありますが、単純さを優先させるのならHtmlで完結した方がよさそうです。VsCode上で長くなるのは許容するしかありません。

youtubeのurl正規表現

^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be)).*$

通常: https://www.youtube.com
モバイル: https://m.youtube.com
短縮url: https://youtu.be/