webツール・アプリ

ブログに貼りつけたソース埋め込みの高さを調整する方法!簡単オススメ!

長いソースコードを貼り付けた時の高さ調整方法

追記(2017年10月)

環境によってはコードが全く見られないようです。

また「スマホからは見られないがパソコンからは問題なく見える場合」と、「スマホからもパソコンからも見られない場合」があるようです。

完全に見られるようになったらその旨を追記いたしますが、それまでは当記事の方法でコードを埋め込むことはおすすめいたしません。

追記終わり

 

【プラグイン不要】WordPressブログにソースコードを貼り付ける方法!」でソースコードを貼り付けた際、デフォルトのままでは長いコードはそのまま長〜く表示されてしまい、スクロールが大変ですよね(>_<)

 

こちらの記事では、長いソースコードでも一定の高さで表示させる方法を紹介します。

1度調整しておけば、ブログ内の全てのソースコードに適用されるので本当に楽です!

ブログに貼りつけたソース埋め込みの高さを簡単に調整する方法を画像で解説!

ブログに貼りつけたソース埋め込みの高さを調整する際には、こちらのコード↓をコピーしてください。

***環境によってコードが見えないこともあるようなので、ベタ打ちでもコードを載せます***

/* —————————————————-

ソースコードの高さ調整

—————————————————–*/

.gist-data { max-height: 200px;

}

こちらのコード↑をコピーしてください。

上記コードの200という値は、行の高さを示す数値です。
好みに応じて変えることができます。

 

賢威のCSSカスタマイズのやり方

「外観」→「カスタマイズ」をクリック

 

賢威のCSSカスタマイズのやり方

「追加CSS」をクリック

 

賢威のCSSカスタマイズのやり方

枠内にコードをペースト

これまでにこのプラグインを使ったことがある場合は、枠の中に何かコードが入っていると思いますが、こんな感じで↓1番上にでも貼り付ければOKです。

赤枠:今回追加したコード、青枠:元々入っていたコード

長いソースコードを貼り付けた時の高さ調整方法

 

 

賢威のCSSカスタマイズのやり方

「公開」をクリック

 

これで、長いコードを貼り付けても一定の高さを保って表示させることができるようになりました!

さいごに

長いソースコードを貼り付けた場合でも、一定の高さで表示されていればたくさんスクロールしなくて済むので、ブログ訪問者にとって親切なブログになります。

 

  • コードをコピー
  • 「外観」→「カスタマイズ」→「追加CSS」の枠内にペースト

 

という簡単な手順でできるので、ぜひ導入してみてくださいね!