【CSS】WordPressに埋め込んだGithub GistのコードのフォントサイズをCSSを使って変える方法

WordPressなどブログに埋め込んだGithubのGistのコードについて、CSSを使ってその文字の大きさ(フォントサイズ)を変更する方法

Githubが展開するサービスの1つにGistというものがります。簡単なコードを簡易的に共有するためのサービスと言えるでしょうが、そのGistはWordPressなどブログに簡単に埋め込むことができます。

ただ埋め込み用のタグを貼り付けただけではちょっと小さすぎると思います。そこで今回は、Gistを埋め込んだ場合に、そのフォントのサイズを大きくする方法を紹介します。(「Customizing embedded Git Gist text size in html file」を参考にしました)

それが次のCSSです。

この表示自体がGistによる埋込ですが、すでにこれはCSSを使ってフォントサイズを16pxに設定しています。

さて上のコードでは、次の2つのコードを掲載しています。

1つ目が、

.gist *{
    font-size:16px !important;
}

2つ目が、

.gist .blob-code-inner{
    font-size:16px !important;
}

「ただフォントサイズを大きくするだけ」という目的ならばどちらでも好きなほうでOKです。CSSに詳しい人には、これら2つの違いは理解されているでしょうが、今回のその目的を達成するためだけならば別にどちらでもかまいません。

Amazon:これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

Amazon:【特典付き】HTML5&CSS3デザイン 現場の新標準ガイド【第2版】 (Compass Booksシリーズ)