ブログに貼りつけたGitHub/Gistのソース埋め込みの高さ設定が簡単だった

前回のブログで書いた通り、このブログ上でソースコードを埋め込むのを、今まで自作アプリを用いていましたが、GitHub/Gistを使うことにしました。

GitHub/Gistを使ってブログにソースコードを貼り付けると超便利だった

そこにも書きましたが、唯一の欠点が埋め込みボックスの高さがソースコードの行数に応じて決まるってことでした。行数の多いコードを埋め込むとボックスが非常に長くなってしまうんです。そこで、これを400pxくらいの高さに固定できないかなーと思って、teratail上で質問してみました。

 

そしたらその日のうちに回答をいただけました。teratailって結構使えますね。

Gistの埋め込みタグをいじるのではなく、ブログ側のCSSを設定すればいいみたいです。WordPressでの設定方法を紹介します。基本的にブログサービスにはCSSを設定できるようになっていると思うので流用できると思いますよ。

[ad#top-1]

 

まず、WordPressのダッシュボートで、メニューの「外観」ー「CSS編集」をクリックします。

 

そうすると、「CSSスタイルエディター」が現れるので、赤い四角で囲ったところを追記します。以下参照。

 

「スタイルシートを保存」ボタンを押せばOKです。

以下の通り、長いソースコードも縦400pxで抑えられるようになりました。ばっちりです。

 

[ad#ad-1]

 - GitHub, WordPress