Loading…

記事内にプロモーションが含まれています。

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

CSS圧縮後(minify)にCSS整形方法カスタマイズの為

所要時間目安:2

This session is using  IPv4  is established in

この記事は2023年4月26日のものです。現在は状況が異なる可能性がありますのでご注意ください。

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

目次に行く・戻る

メルカリ招待コード:

サイト運営しているうちにCSSがものすごい大きくなってしまうことがありますよね。昔使用していたCSSがそのままだったり、もしくはコメントアウトしたものが残っていたりなどです。そういった不要なCSSをサイト表示速度改善のためにCSS圧縮をすることがあります。

すると、だいたい1行にまとめられて結構な縮小になります。

この記事を読む方へのオススメ

その後、サイト運営を続けているうちにCSSが同じようなことになりつつあることがあります。

しかし、以前のCSSをCSSminifyなどにて1行に圧縮してしまった為に古いCSSのどこのどの部分がどこに該当するのかわかりにくくなってしまいます。

以下のようになってしまいます。

なので、CSSの圧縮は有名ですが逆の圧縮を元に戻すCSS整形をすることにより見やすくなります。

CSS整形が可能なサイト一覧は以下になります。

Messy stylesheets can be impossible to edit. Use DirtyMarkup's free online tool to tidy up your CSS code. Beautify even the ugliest / unformatted CSS.
Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。
このサイトでは簡単に使える便利なウェブツールを公開しています。うまく使うことでWeb開発や日々の作業を効率化することができます。
インデント・改行を調節し、ソースコードを整形します。
整形前のテキスト欄に入力されたコードが、自動的に改行やインデントを付加した見やすい状態にして表示します。

上記の中でも一番おすすめなサイトは一番はじめに紹介したDirtyMarkup Formatter - CSS Beautifier for Stylesheetsサイトですかね。

CSS整形後は以下のように人の目で見てわかるように修正・整形・直してくれます。

それぞれのCSSが見やすくなります。

その他のCSS整形サイトもみんな綺麗に整形してくれます。それぞれのサイトで整形後の容量が少しだけ異なりますが長過ぎる(多すぎる・大き過ぎる)CSSだとわかりにくいです。

CSS整形後の容量が一番少ないツールサイトをご利用されるか、CSS整形後の容量が一番多いツールサイトをご利用されるかなど、

CSSの整形後の容量で、どのサイトが一番自分の使用しているCSS合っているのかの判断材料にしても良いのかもしれません。

あなたにおすすめな関連記事

GoogleFont

Stinger6 WordPress

webフォントの使い方GoogleFontは遅い所か早い

  ブログやホームページを運営していくにあたり時折他のPCで自分のブログやホームページを表示した所、 自分のPCでの文字表示(フォント)が異なってしまいデザイン自体が崩れたりしました。 しか…

もっと読む

インフィード広告アドセンス

抗がん剤オプジーボとは小林麻央さん

伝えたいこと 備忘録 時事ネタ 治療

がん免疫治療薬オプジーボについて、小林麻央さんは使ってみたのかなぁ。厚生労働省は16日50%の緊急値下げを提案し了承

昨今話題のがん治療薬の化学療法である抗がん剤でオプジーボ(商品名です:一般名はニボルマブ)ですが、 あまりにも高額だということで厚生労働省が異例に半額:50%値下げに承認を出しました。これまでは100…

もっと読む

インフィード広告アドセンス

ニュースとは何か

伝えたいこと 備忘録

ニュースとは。NEWSとは?どういう意味なのか考察…。

ニュース…単語のみの意味を考察すると…。 ニュースとは→新しい情報・事柄(etc)などタチ(達)の総称。 であろうと考えています。

インフィード広告アドセンス

Googleで働きたい7才少女への返信レター

伝えたいこと 備忘録 時事ネタ

Googleで働きたい!と手紙を書いたら、Googleのボスから返事がきた!

なんとも愛らしいというのでしょうか、子供の夢や思いまでをも大切にする素晴らしい社風とでもいうのでしょうか・・・・・。 7才の少女が、「Googleで働きたい!」とGoogleのボスである社長(CEO)…

もっと読む

インフィード広告アドセンス

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

RSSにアイキャッチ画像を出力する方法Stinger6、Stinger7、StingerPLUS+版

以前、RSSにアイキャッチ画像を出力する方法という記事を書きました。     普通の?RSSフィードに(PINGOOなど)にはアイキャッチがちゃんと表示されていました。 ですが、B…

もっと読む

インフィード広告アドセンス

AMP画像

SNS WordPress インターネット カスタマイズ 伝えたいこと 備忘録

AMP化する方法プラグインなしで対応してみる

今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。 その後もHTTPS everywhere(SSL化)などもありますが…。 は…

もっと読む

WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Total267


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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