GithubのコードをWordpress等のブログに掲載する時、そのまま貼り付けるだけだとコードで画面いっぱいになってしますので、スクロール機能を使って表示できるようにしました。
その方法を書いていきたいと思います。
やり方はかんたんです。
以前の表示はこんな感じでかなり縦長になっていますよね。画面いっぱいコードで埋まってしまっています。スマホだと尚更見づらいですよね。
これを縦のサイズを好きに変えていきたいと思います。
変更したらこんな感じになります。
これでコードもスッキリしてかなりブログ自体が見やすくなりますよね。
かんたんに変更できます。
以下のコードをcssにコピペするだけです。max-hightを自分の好きな値に変えれば、高さを自由に変更できます。
スクロールと言ったら、overflowとか使うのかなと思ったんですが、githubに関してはmax-hightを指定さえすれば勝手にスクロールバーが現れてスクロールできるようになります。
ご自由にコピペして使ってください!
Next Post
【必見】スマホアプリのみでATMから出金する方法
時代が変わり、今ではアプリでATMからお金をあろすことがで...
Prev. Post
おすすめのASP もしもアフィリエイト
今回は「もしもアフィリエイト」が使っていてとても便利でした...
コメント
名前 *
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
wordpressの記事リンク編集方法
wordpressで記事を書いているとき、自身の他の記事を紹介することありますよね。そんなときWo...
wordpressで記事を書いてい...
2020年12月15日
WordPressに動画を埋め込む方法
以前の記事で参考用に動画を貼り付けました。 その動画の貼り付け方、また合わせてスクリーンムー...
以前の記事で参考用に動画を貼り付け...
2020年12月27日
もしもアフィリエイト CSSカスタマイズの方法
この記事はもしもアフィリエイトに登録していて、「Amazon」「楽天」「ヤフーショッピング」との連...
この記事はもしもアフィリエイトに登...
2020年12月18日
[Cocoon]WordPressに無料テーマをインストールする方法
私はこのブログは自分でテーマを作成していますが、今回新たに無料テーマを使ってワードプレスでサイトを...
私はこのブログは自分でテーマを作成...
2021年1月10日