【Stylebot】Twitterのフォントを変更するCSS
![Stylebotのアイコン](https://www.naporitansushi.com/wp-content/uploads/2021/11/promotion-hide_01.jpg)
この記事では、Twitterのフォントを変更するCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
![Twitterのフォントを変更してみた画像](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_06.jpg)
Twitterのフォントを変更するCSSです。
デフォルトのTwitter フォントは、Segoe UIとMeiryoになっています。そちらを自分のパソコンにインストールされている好きなフォントに変更できます。
例えば、HGS創英角ポップ体、教科書体、UD デジタル教科書体、游ゴシック等にできます。
ウェブ上で公開されているフォントをインストールすることで、元々インストールされていないフォントも適用できます。ふい字、Noto Sans JP等です。
個性的なフォントにもサクっと変更できるので、ぜひ自分だけの見やすいフォントにしてみてください。
前提
この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。
まだインストールしていない方は、以下の記事を参考にしてみてください。
CSS
書き込むコードは以下になっています。
/*フォント変更*/
.r-1tl8opc {
font-family: "〇〇〇"; /*フォントを指定する*/
}
「〇〇〇」の部分に、使いたいフォント名を指定します。正確に入力しないと、反映されないので頑張ってみましょう。
例えば、「UD デジタル 教科書体 N-B」にする場合は、以下のCSSになります。
/*フォント変更*/
.r-1tl8opc {
font-family: "UD デジタル 教科書体 N-B";
}
フォントが変更されます。
![UD デジタル 教科書体 N-Bを適用](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_06.jpg)
ライトテーマでも同様に使えます。
![ライトテーマでも使える](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_07.png)
フォントの指定方法
自分のパソコンにインストールされているフォントを確認します。
僕は、Windows11を使っているので、Windowsでの確認方法を書きます。
Windows+Rを押して、ファイル名を指定して実行ウィンドウを表示します。
「control」と入力してOKをクリックします。
![ファイル名を指定して実行](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_02.png)
コントロールパネルが表示されます。
![Windows11 コントロールパネル](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_03-1024x671.png)
右上の検索窓に「フォント」と入力して、出てきたフォントフォルダーをクリックします。
![フォント検索](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_04-1024x427.png)
フォントが一覧表示されます。
![インストールされているフォント一覧](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_05-1024x671.png)
こちらに書かれているフォント名をそのまま入力しましょう。半角空白等も消さずにそのまま書きます。コピペはできません。
![フォント名を正確に入力する](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_13.png)
いくつか例と実際に適用してみた画像を貼っておきます。
BIZ UD明朝
/*フォント変更*/
.r-1tl8opc {
font-family: "BIZ UD明朝";
}
![BIZ UD明朝](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_08-1024x500.png)
HGP教科書体
/*フォント変更*/
.r-1tl8opc {
font-family: "HGP教科書体";
}
![HGP教科書体](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_09.png)
HGP創英角ポップ体
/*フォント変更*/
.r-1tl8opc {
font-family: "HGP創英角ポップ体";
}
「HGP創英角ポップ体」などの場合、カタカナを半角で入力しないと反映されません。「ポップ」だとダメです。
![HGP創英角ポップ体](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_14.png)
半角カタカナに変換したい場合は、以下のサイトが役立ちます。
参考:全角カタカナ(片仮名)→半角カタカナ(片仮名) | 文字変換サイト(無料)
Ink free
/*フォント変更*/
.r-1tl8opc {
font-family: "Ink free";
}
![Ink free](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_10.png)
Jokerman
/*フォント変更*/
.r-1tl8opc {
font-family: "Jokerman";
}
![Jokerman](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_11.png)
Ink freeや、Jokermanといった英語しか用意されていない場合は、英語のみ変更されます。日本語はそのままです。
複数フォントの組み合わせ
英語と日本語で使い分けたい場合は、以下のようにします。
/*フォント変更*/
.r-1tl8opc {
font-family: "Bradley Hand ITC","Noto Sans JP";
}
「"〇〇","〇〇"」のように、カンマ記号で区切ります。優先順位は左からなので、先に英語のみフォントを指定してやるとうまくいきます。
![Bradley Hand ITCとNoto Sans JPの組み合わせ](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_29.png)
ウェブ上のフォントをインストールする
標準でインストールされているフォントだと満足できない場合は、ウェブ上で公開されているフォントをインストールしてみましょう。
CSSだと、インストールしなくても適用できるんですが、僕みたいな初心者ペーペーは素直にOSにインストールしたほうが楽かなと思います。
フォントによってダウンロード方法は異なりますが、基本的には一緒です。本記事では、ふい字、Googleが公開しているNoto Sans JPの2つのダウンロード方法を書きます。
Noto Sans JP
以下のサイトからダウンロードできます。
参考:Noto Sans Japanese Google Fonts
右上の「Download Family」をクリックします。
![Noto Sans JPのダウンロード](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_15.png)
圧縮ファイルがダウンロードされるので、右クリック→開くで解凍します。
![圧縮フォルダーの解凍](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_16.png)
出てきたフォルダー内にあるファイル(フォント)全てを選択して、右クリック→インストールをクリックします。
![Noto Sans JPの右クリック インストール](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_17.png)
インストールが開始されるので、少し待ちます。完了したら、コントロールパネルのフォント一覧を見てみます。インストールした「Noto Sans JP」が追加されています。
![フォント一覧 Noto Sans JP](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_18.png)
あとは、こちらをCSSで指定します。
/*フォント変更*/
.r-1tl8opc {
font-family: "Noto Sans JP";
font-weight: 600;
}
変更されます。「font-weight: 600;」で太字にしていますが、不要な場合は、削除してください。
![Noto Sans JP(bold)](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_19.png)
ふい字
手書き風の代表的なフォントです。可愛い系が好きな方におすすめです。
以下のサイトからダウンロードできます。
参考:ふい字置き場
「ふい字 v2.9」の右にある「ダウンロードはこちら」をクリックします。
![ふい字フォントのダウンロード](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_21.png)
「ダウンロードページへ」からダウンロードします。
![「ダウンロードページへ」をクリック](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_20.png)
ダウンロードできたら、あとの作業は一緒です。圧縮フォルダになっているので解凍します。
![ふい字ファイルの解凍](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_22.png)
中にあるフォントファイルを右クリック→インストールをクリックします。
![HuiFont29のインストール](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_23.png)
CSSで適用します。
/*フォント変更*/
.r-1tl8opc {
font-family: "ふい字";
}
ふい字になります。
![ふい字](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_24.png)
ブラウザ全体のフォントが変わっちゃった場合
フォントをOSにインストールしたことで、ブラウザの全体フォントが変更される可能性があります。
ブラウザの設定から、元のフォントに戻してあげましょう。
Vivaldiだと、設定→ウェブページ→フォントから変更できます。
![ウェブページ 既定のフォント](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_27.png)
感想
以上、Twitterのフォントを変更するCSSについてでした。
今回の方法を使えば、当サイトのフォントもカスタマイズできます。
/*フォント変更*/
body {/*もしbodyで変更されなかったら、pにする*/
font-family: "ふい字";
}
ふい字にすると一気に可愛げが増しますね。
![当サイトをふい字にしてみたスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2022/01/twitter-font_26.png)
注意点ですが、Twitterの場合セレクタ(専門用語)は、「r-1tl8opc」になりますが、他のサイトでは「body」か「p」になります。多分、この2つさえ覚えておけば、どのサイトでも変更できるかなと思います。