【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 ナポリタン寿司