【Stylebot】Twitterのフォントを変更するCSS

Stylebot&Stylus

Stylebot のアイコン

この記事では、Twitter のフォントを変更するCSS について書きます。

ウェブサイトに自分で作成したCSS を適用できるChrome拡張機能「Stylebot」を使います。

Twitterのフォントを変更してみた画像

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 を適用

ライトテーマでも同様に使えます。

ライトテーマでも使える

フォントの指定方法

自分のパソコンにインストールされているフォントを確認します。

僕は、Windows11 を使っているので、Windows での確認方法を書きます。

WindowsRを押して、ファイル名を指定して実行ウィンドウを表示します。

「control」と入力してOKをクリックします。

ファイル名を指定して実行

コントロールパネルが表示されます。

Windows11 - コントロールパネル

右上の検索窓に「フォント」と入力して、出てきたフォントフォルダーをクリックします。

フォント検索

フォントが一覧表示されます。

インストールされているフォント一覧

こちらに書かれているフォント名をそのまま入力しましょう。半角空白等も消さずにそのまま書きます。コピペはできません。

フォント名を正確に入力する

いくつか例と実際に適用してみた画像を貼っておきます。

BIZ UD明朝

/*フォント変更*/
.r-1tl8opc {
   font-family: "BIZ UD明朝";
}
BIZ UD明朝

HGP教科書体

/*フォント変更*/
.r-1tl8opc {
   font-family: "HGP教科書体";
}
HGP教科書体

HGP創英角ポップ体

/*フォント変更*/
.r-1tl8opc {
   font-family: "HGP創英角ポップ体";
}

「HGP創英角ポップ体」などの場合、カタカナを半角で入力しないと反映されません。「ポップ」だとダメです。

HGP創英角ポップ体

半角カタカナに変換したい場合は、以下のサイトが役立ちます。

参考:全角カタカナ(片仮名)→半角カタカナ(片仮名) | 文字変換サイト(無料)

Ink free

/*フォント変更*/
.r-1tl8opc {
   font-family: "Ink free";
}
Ink free

Jokerman

/*フォント変更*/
.r-1tl8opc {
   font-family: "Jokerman";
}
Jokerman

Ink free や、Jokerman といった英語しか用意されていない場合は、英語のみ変更されます。日本語はそのままです。

複数フォントの組み合わせ

英語と日本語で使い分けたい場合は、以下のようにします。

/*フォント変更*/
.r-1tl8opc {
   font-family: "Bradley Hand ITC","Noto Sans JP";
}

「"〇〇","〇〇"」のように、カンマ記号で区切ります。優先順位は左からなので、先に英語のみフォントを指定してやるとうまくいきます。

Bradley Hand ITCとNoto Sans JPの組み合わせ

ウェブ上のフォントをインストールする

標準でインストールされているフォントだと満足できない場合は、ウェブ上で公開されているフォントをインストールしてみましょう。

CSS だと、インストールしなくても適用できるんですが、僕みたいな初心者ペーペーは素直にOS にインストールしたほうが楽かなと思います。

フォントによってダウンロード方法は異なりますが、基本的には一緒です。本記事では、ふい字、Google が公開しているNoto Sans JP の2つのダウンロード方法を書きます。

Noto Sans JP

以下のサイトからダウンロードできます。

参考:Noto Sans Japanese – Google Fonts

右上の「Download Family」をクリックします。

Noto Sans JP のダウンロード

圧縮ファイルがダウンロードされるので、右クリック → 開く で解凍します。

圧縮フォルダの解凍

出てきたフォルダー内にあるファイル(フォント)全てを選択して、右クリック → インストール をクリックします。

Noto Sans JP の右クリック - インストール

インストールが開始されるので、少し待ちます。完了したら、コントロールパネルのフォント一覧を見てみます。インストールした「Noto Sans JP」が追加されています。

フォント一覧 - Noto Sans JP

あとは、こちらをCSS で指定します。

/*フォント変更*/
.r-1tl8opc {
   font-family: "Noto Sans JP";
   font-weight: 600;
}

変更されます。「font-weight: 600;」で太字にしていますが、不要な場合は、削除してください。

Noto Sans JP(bold)

ふい字

手書き風の代表的なフォントです。可愛い系が好きな方におすすめです。

以下のサイトからダウンロードできます。

参考:ふい字置き場

「ふい字 v2.9」の右にある「ダウンロードはこちら」をクリックします。

ふい字フォントのダウンロード

「ダウンロードページへ」からダウンロードします。

「ダウンロードページへ」をクリック

ダウンロードできたら、あとの作業は一緒です。圧縮フォルダになっているので解凍します。

ふい字ファイルの解凍

中にあるフォントファイルを右クリック → インストール をクリックします。

HuiFont29 のインストール

CSS で適用します。

/*フォント変更*/
.r-1tl8opc {
   font-family: "ふい字";
}

ふい字になります。

ふい字

ブラウザ全体のフォントが変わっちゃった場合

フォントをOSにインストールしたことで、ブラウザの全体フォントが変更される可能性があります。

ブラウザの設定から、元のフォントに戻してあげましょう。

Vivaldi だと、設定 → ウェブページ → フォント から変更できます。

ウェブページ - 既定のフォント

まとめ

以上、Twitter のフォントを変更するCSS についてでした。

今回の方法を使えば、当サイトのフォントもカスタマイズできます。

/*フォント変更*/
body {/*もしbodyで変更されなかったら、pにする*/
   font-family: "ふい字";
}

ふい字にすると一気に可愛げが増しますね。

当サイトをふい字にしてみたスクリーンショット
参考:【大掃除】DAIV製PCの掃除方法。CPUクーラー、グリスを綺麗にしてみよう! | ナポリタン寿司のPC日記

注意点ですが、Twitter の場合セレクタ(専門用語)は、「r-1tl8opc」になりますが、他のサイトでは「body」か「p」になります。多分、この2つさえ覚えておけば、どのサイトでも変更できるかなと思います。

Posted by ナポリタン寿司