【GitHub:Gist】ブログに表示させるサイズを調整する方法

Gistとは

GistはGitHubのサービスの一つで、これを利用するとソースコード1ファイル単位(複数もOK)でGit管理し、公開することができます。

https://qiita.com/hkusu/items/18cbe582abb9d3172019

ソースコードをブログに貼り付けたりする場面でも活躍しますが、サイズは固定されています。デフォルトでは表示枠が小さいため、拡大したいと思います。

サイズの調整方法

CSSで以下のように入力することで調整できます。

/*gist表示サイズ変更*/
.gist iframe.render-viewer {
	height: 700px !important;
	width: 1000px !important;
}

縦長に調整しました。

難点はブログ中のすべてのGistに適応されてしまうため、コードが少ししかない場合は余白が余ってしまうことです。その場合は、大・中・小などの追加CSSクラスを設定することで解決しても良いかもしれません。