日本初のプロンプト売買サイトプロンプトバンク
プロンプトバンクは日本初の良質な「プロンプト」を売買するための市場です

Stable Diffusion、ChatGPT などのとっておきのプロンプトをお持ちの方、ぜひプロンプトバンクに登録をお願い致します

※日本国内で決済機能が実装されたプロンプトの売買を専門としたサービスとして

旧Twitterのアイコンから新Xのアイコンに変更する方法

ツイッターのアイコンが小鳥のマークからXマークに変更されました、それに伴い自分で管理しているサイトのツイッターマークの変更が必要となる人が多くなると思いますので手軽に変える方法をお教えします。

■1.忙しい人向けに結論から

以下をコピペすることで新しいXのマークを出すことが可能です。

黒いXマーク

<svg viewBox="0 0 24 24" width="24" height="24">
  <g>
    <path d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0" />
  </g>
</svg>

白いXマーク

<svg viewBox="0 0 24 24" width="24" height="24">
  <g>
    <path d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0" fill="#FFF" />
  </g>
</svg>

恐らく後ほどX社(旧ツイッター)からアイコンの使用ガイドラインが出てくると思いますのでそのガイドラインに従いましょう。

印刷物で使いたい方はこちら

[イラレファイル]
https://14.gigafile.nu/1101-ba4915a6858d2e536d8442202be4a7c46
[SVGファイル]
https://14.gigafile.nu/1101-cc1a0f82fbb3de998982436b7893bf226
[SVGビューワ]
https://www.svgviewer.dev/s/kt6mcav0

■2.fontawasomeからの置き換え

恐らくTwitterの青い鳥さんのマークはfontawasome等のwebフォントで出してるサイトがほとんどかなと思います。その場合、旧twitterのマークは以下のような形で書かれているのではないでしょうか

<i class="fab fa-twitter"></i>
<i class="fa fa-twitter"></i>

このタグと1番でお教えしたSVGタグを置き換えることで新「X」のマークに入れ替えが可能です。

■3.みんなが使いそうなところの説明

大きさを変えたい

「svgタグ」内の「width」「height」属性で調整してください、属性に書くのが気持ちが悪い人はCSSでも出来るので適宜調整してください。

色を変えたい

「pathタグ」内の「fill」属性で調整してください、「#FFF」でWEBの人だったら分かると思いますが、分からない人はgoogleで「カラー選択ツール」と検索するとカラーピッカーが出てくるのでそこのHEXの値を「fill」属性に入れることで期待する色に変更することが出来ます。

■4.SVGタグが何なのか詳しく知りたい人への説明

SVG(Scalable Vector Graphics)は、ウェブ上でベクターグラフィックスを表示するためのXMLベースのマークアップ言語です。SVGタグは、線、形状、色、テキスト、イメージ、その他の視覚的要素を制御し、それらを組み合わせて複雑なグラフィックやアニメーションを作成するために使用されます。

ベクターグラフィックスの何が良いのかというと、めっちゃ拡大しても劣化しないのでいろんな画面の大きさがあるこんな世の中にはとても適しているデータなのです。

以下に、各タグの役割を詳しく説明します

タグ説明
svgSVGイメージのルート要素です。このタグ内部には、画像の全体的な形状や特性を定義します。属性にはviewBox(表示領域の座標系を定義)、width(画像の幅)、height(画像の高さ)が指定されています。
gグループ要素で、SVGシェイプをグループ化するために使われます。タグ内のすべての要素は一つのグループとして扱われ、一緒に変換(移動、回転、拡大縮小など)することが可能です。
pathパス要素は、点、線、曲線を組み合わせて複雑な形状を作成するための要素です。d属性はパスを形成するコマンドとそのパラメータを含んでいます。ここで、Mは移動、Lは直線、Hは水平線、Vは垂直線、Cはキュービック曲線、Sはスムーズキュービック曲線、Qはクォドラティック曲線、Tはスムーズクォドラティック曲線、Aは弧、Zは閉じたパスを示します。この場合、特定のパスを定義しています。fill属性は、形状の内部を塗りつぶす色を定義します。例えば、値として”#FFF”が指定されている場合は白色を示します。

■5.おまけ

Unicode Characterの(U+1D54F)が新Xのロゴにそっくりなため、SVGはなんか長いし、より気軽にXのロゴを使いたい場合は以下の文字列をHTMLに書き込むことでX社っぽい文字を出すことも可能です

𝕏
&#x1D54F;

Unicode Characterの(U+1D54F)
https://www.compart.com/en/unicode/U+1D54F

しかし注意点として、これは文字エンティティリファレンスを使用することで、”U+1D54F” のUnicode文字を表示していますが、HTML文書の文字コードがUnicode(一般的にはUTF-8)に設定されている必要があり、またすべてのブラウザやシステムフォントがこの特定のUnicode文字(またはUnicodeの全範囲)を表示できるわけではないため、期待した通りに表示されないことがあります。
(例)Windows10だと髭付き文字になってしまっている


以上、役に立ったよ という方は以下のツイートをいいね&リツイートしてくれたら飛んで喜びます

日本初のプロンプト売買サイトプロンプトバンク
プロンプトバンクは日本初の良質な「プロンプト」を売買するための市場です

Stable Diffusion、ChatGPT などのとっておきのプロンプトをお持ちの方、ぜひプロンプトバンクに登録をお願い致します

※日本国内で決済機能が実装されたプロンプトの売買を専門としたサービスとして