非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

      2016/08/31

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

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

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

4

 

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

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

広告

 

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

1

 

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

2

 

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

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

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - GitHub, WordPress