GithubのコードをWordpress等のブログに掲載する時、そのまま貼り付けるだけだとコードで画面いっぱいになってしますので、スクロール機能を使って表示できるようにしました。
その方法を書いていきたいと思います。
やり方はかんたんです。
以前の表示はこんな感じでかなり縦長になっていますよね。画面いっぱいコードで埋まってしまっています。スマホだと尚更見づらいですよね。
これを縦のサイズを好きに変えていきたいと思います。
変更したらこんな感じになります。
これでコードもスッキリしてかなりブログ自体が見やすくなりますよね。
かんたんに変更できます。
以下のコードをcssにコピペするだけです。max-hightを自分の好きな値に変えれば、高さを自由に変更できます。
スクロールと言ったら、overflowとか使うのかなと思ったんですが、githubに関してはmax-hightを指定さえすれば勝手にスクロールバーが現れてスクロールできるようになります。
ご自由にコピペして使ってください!
Next Post
【必見】スマホアプリのみでATMから出金する方法
時代が変わり、今ではアプリでATMからお金をあろすことがで...
Prev. Post
おすすめのASP もしもアフィリエイト
今回は「もしもアフィリエイト」が使っていてとても便利でした...
コメント
名前 *
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
WPの投稿にコードを記述②
ワードプレスの投稿にコードを記述する方法を以前記載しましたが、環境のせいか、プラグインが干渉して...
ワードプレスの投稿にコードを記述...
2020年11月19日
WordPressバックアップの方法
Wordpressでブログを運営している人はバックアップを必ず取るべきですよね。 せっかく書...
Wordpressでブログを運営し...
2020年11月30日
初心者向けWPおすすめ書籍
今回はワードプレスを勉強しようと思っている方におすすめの書籍を紹介します。 私はワードプレス...
今回はワードプレスを勉強しようと思...
2020年12月7日
[Cocoon]WordPressに無料テーマをインストールする方法
私はこのブログは自分でテーマを作成していますが、今回新たに無料テーマを使ってワードプレスでサイトを...
私はこのブログは自分でテーマを作成...
2021年1月10日