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