Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Webサイト 固定幅の解除

More than 1 year has passed since last update.

はじめに

最近ではフルHDやそれ以上の解像度のディスプレイが当たり前のようになってきましたが、ネットのサイトでは意外とそれを活用できていないと思ったことはありませんか?
と言っても、何のことか分からない方は、以下のImpressのPC Watchの例をご覧下さい。
左右に大きな余白があるのが分かると思います。
pcwatch_before.png
(https://pc.watch.impress.co.jp/)
これは、記事の表示幅を必要以上にせまくしているからなのです。
そこで、ちょっとだけ設定を変えてあげることで、余白のところもキチンと活用できるようにする方法をご紹介します。

Stylusのインストール

ブラウザがChromeやFirefoxであれば、Stylusをインストールするのが簡単です。
https://addons.mozilla.org/ja/firefox/addon/styl-us/ (Firefox)
https://chrome.google.com/webstore/detail/stylus-beta/apmmpaebfobifelkijhaljbmpcgbjbdo/ (Chrome用ベータ版)
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/ (Chrome用安定版:なぜかリンク切れ)

スタイルのインストール

アドオンをインストールしたら、スタイルをダウンロードします。
ここでいうスタイルとはCSSを変更するものになっています。
様々なスタイルがダウンロードできるのが[userstyles.org]です。
ここで、Impressのサイトの余白を活用できるようにCSSを改変する[拙作のスタイル]をご紹介します。
https://userstyles.org/styles/134703/impress-co-jp-article-width-adjuster
サイトを開いたら"Install style"でスタイルをインストールします。
あとは、アドオンの設定画面からスタイルを有効(スタイル名の前のチェックボックスをチェック)すれば準備OKです。

スタイル適用後のサイト

さっそく適用後のサイトを見てみましょう。トップページではあまり御利益もありませんが(笑)
pcwatch_after.png
(https://pc.watch.impress.co.jp/)
記事のページでは効果が大きく見えてきます。余白がなくなって、記事がウィンドウ一杯に広がって見えるのが分かりますでしょうか。大きなディスプレイで画面一杯に広がりすぎる場合は、ウィンドウを小さくすれば、それに合わせて記事も調整されます。
pcwatch_after2.png
(https://pc.watch.impress.co.jp/docs/news/1236827.html)

最後に

同じようなスタイルをいくつかアップしておりますので、よろしければ使ってみて下さい。(ソースがかなり汚いですが、そこはご容赦を)
https://userstyles.org/users/369218

例としてPC Watchを挙げておりますが、毎日のように拝見しておりますので関係者の方々どうかご容赦下さい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away