【ChatGPT】余白が邪魔なので消す方法

ChatGPTにソースコードの生成をお願いしたところ、横に長いソースが生成され、横スクロールバーを移動させないと見えないことがある。

ということで左右の余白を消して、横長に表示できるようにしていく。

ちなみにこの方法をChatGPT4oに聞いたが、正しい回答は得られなかったので、ソースコードの解析を行った結果である。

1. 開発ツールを開く

「F12」で開くことができる。
最近はChroniumがベースのブラウザ(Google Chrome、Edge、Braveなど)が多いので、同様の手順でできると思うが表示されない場合は各々調べてくれ。

(通常であれば「Ctrl+Shift+I」でも開くが、ChatGPTの画面では、ChatGPTをカスタマイズする画面が表示されてしまう。)

2. 設定箇所を特定する

開発ツールにあるこのマーク
「Select an element in the page to inspect it.」
ページ内の要素を選択して、どこのコードか特定するツールで以下の画像の部分をクリックする。

ChatGPTのマークと回答の間にカーソルを持っていくと、画像のようなオレンジと水色、紫色の表示になる。この状態でクリックして下さい。

3. CSSを解除する

横幅を指定しているCSS(Cascading Style Sheets)の設定を消します。

フィルターで「max-width」を検索して、チェック外すことで

4. 開発ツールを閉じる

もう一度「F12」を押すことで閉じることができます。

留意点

これは一時的なものなので、ページを更新したりブラウザを閉じると設定が戻ってしまいます。
その場合は今回の手順でもう一度設定して下さい。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください