カテゴリー
ブログ運営 プログラミング

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

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

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クラスを設定することで解決しても良いかもしれません。

作成者: echomis

化学メーカーに勤務する薬学院卒研究員。興味のある科学技術(化学、生物、機械学習)についての勉強メモや役立つ情報などをブログにしていこうと思います。

アーカイブを表示

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です