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

追記(2017年10月)

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

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

追記終わり

 

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

 

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

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

 

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

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

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

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

ソースコードの高さ調整

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

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

}

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

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

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

Simple Custom CSSプラグインをインストールしていない方はプラグインをインストールして有効化してください☆

 

もしインストールしてあれば、このように

ソーシャルボタンを賢威7で設置する方法

「外観」に「カスタムCSS」というメニューが表示されています。

 

有効化までを画像で解説したページはこちら→WordPressにプラグインをインストールし有効化する方法

 

ちなみに、検索をかけると似た名前のプラグインがこちら↓よりも上位に上がってきますが、間違えずにこのプラグインをインストールしてくださいね^^

ソーシャルボタンを賢威7で設置する方法

 

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

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

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

ソースコードの高さ調整

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

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

}

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

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

 

ソーシャルボタンを賢威7で設置する方法

「外観」→「カスタムCSS」をクリック

 

ソーシャルボタンを賢威7で設置する方法

枠内に、コードをペースト

 

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

 

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

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

 

「カスタムCSSの更新」をクリック

 

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

さいごに

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

  • プラグイン「Simple Custom CSS」をインストールしていない方はインストール
  • Simple Custom CSSの枠内にコードをコピー

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