Simplicity2のcssをチェックするべくフォーラムの内容を絶賛適用中

2017/04/27 2:00 追記
いつからかわかりませんが、モバイル表示でうまく表示できなかったようだったので、完全親テーマのみを一時停止して子テーマでレイアウトをいじっています。ついでなので1200pxまでのメディアクエリを付けました。
ベースのバージョンが2.1.6のため、そのせいもあるかもしれません。ただし、レスポンシブに関係するスタイルは親テーマstyle.cssには無いと思うので、responsive.css、narrow.css等の問題があるかも知れません。

フォーラムの該当記事へのリンク
該当レスへのリンク

2016/06/27 22:27 親テーマstyle.cssを圧縮することでどれだけ表示が速くなるかを体験してもらうために圧縮してます。プラグインでのキャッシュは未使用。Xdomainのデフォルト設定です。
2016/05/30 23:51 最新のparts.cssはこちらからダウンロードできるようにしました。表示された画面のparts.cssを右クリックで保存、名前は何でも良いですが一応parts.cssとして保存して下さい。

さて、何をしてますかと言いますと、Simplicityのcssはこれまでのものを修正しながら、新しい機能の場合は追記されたり削除されたりとしてきました。

サックリと見て修正できればよいのですが、プロパティが増え、同じような機能が増えたり、あるいは削除し忘れたりそういったことが起こりがちです。特に行数が増えれば増えるだけそういったことは起こる確率が高くなります。

例えばcssのはじめの方と終わりの方に、同じセレクタで別の内容が書いてあるとした時。このような場合は、cssですから後の方が有効になります。それはつまり、

仮にこういうことが書いてあった場合、最後に書かれているfont-size: 12px;とcolor: #333;は同じセレクタの同じプロパティがありますから上書き(オーバーライド)されます。しかし問題は最初のセレクタの持っているwidthです。これは継承されるんです。ですから、最終的なcssは、

こういうことになります。最初の.testで書かれていたものはおそらく最初にデザインされたもので(そういうことにしておく)、その時は200pxで問題なかったでしょうから、後の方で色を変えたとしても特に気にする所ではありません。しかし、こういった類(最初のスタイル)の不要なプロパティ(重複)というのは本来不必要です。いくらテキストといえど、それが積もり積もればなんちゃらというように、ファイルサイズのムダにもなりますし、またどうしてそれが書いてあるのだろうと考えてしまう部分でもあります。

そういったムダを無くすのと、より楽に書けるように、また間違いをなるべく無くすようにフォーラムにて「cssで管理しているものをscssにしてはどうか」と言う提案をしてみたわけです。

cssをscssに手動で書き換えるのはとても大変です。がそれらはツールを使ってゴニョゴニョすればサックリscssにはできます。後はそれをどのように管理するかの問題となります。

そこで、それらを全部を作者のわいひらさんに丸投げすると、それはまぁ面倒なことですから、予めscssのひな形みたいなものを作って、それに手を加えていく方向でどうだろう?と言う事に話は進みました。

ただ、いきなり親テーマのstyle.cssを全部書き換えてしまうと問題があった時に、子テーマで何かしら手を入れている人や、何かしら親テーマ自体をカスタマイズされている人にとっては大変なことになりますから、まずはパーツスキンで提供して、不具合があるかどうかを色んな人に試してもらい、それらフィードバックを受けながら修正していって問題がない所まで達した時に親テーマに適用したらどうだろうか?と言う感じになりました。

パーツスキンでひとまず試せるので適用自体はカスタマイザーで選択するだけです。問題があればチェックを外せば元の親テーマstyle.cssになります。
お手軽に試せるので、是非色んな人に試していただきたいと思う次第です。

で、どういった表示になるかわからないと思うので、まずは当サイトで適用してみました。
ウチのサイトは親テーマstyle.cssを直接書き換えています。

パーツスキンの適用方法

まず、該当レスへのリンク ←こちらの2016/05/17付のパーツスキンを試してみて下さい。Googleドライブのリンクになっていて、普通にそのままダウンロードしてもらえると思います。

ダウンロードができたら、それ(parts.css)をftpなどで、子テーマ等のパーツスキンフォルダにそのまま放り込みます。その後、カスタマイザーでスキンの項目から、ftpでアップロードしたテーマ(親・子いずれかのパーツスキンフォルダ)を選択します。子テーマパーツスキンフォルダに入れたら、カスタマイザーでは「子テーマパーツスキン」を有効にするだけです。

    手順箇条書き

  1. parts.cssをダウンロード
  2. ftp等でテーマのパーツスキンフォルダへそのまま投入
  3. カスタマイザーで投入したテーマ(親・子いずれか)のパーツスキンを有効にする

parts.cssを適用するとどうなるか

Screenshot_from_2016-05-30 12_56_24パーツスキンは、ひとつのcssにまとめられて、_merged.cssと言う名称で読み込まれます。元々の親テーマのstyle.cssはそのままstyle.cssで読み込まれ、パーツスキンのほうが親テーマのcssより後から読み込まれるという点から、このサムネイルの画像のような順番で読み込まれます(後から読み込まれるものが優先されます)。

これはデベロッパーツールの画面ですが、上に書いてあるものほど優先度が高く(後で読み込まれているか、!important付きかタグにインラインで書かれているのが優先されます)、上書きされているプロパティは取り消し線で表示されます。

画像で言うと、親テーマstyle.cssの.entry h2 aは元々のaタグの設定を継承して表示され、_merged.cssでまた上書きされているような感じになっています。しかし、元々のaに設定されているプロパティのword-wrap: break-word;はそのまま継承されているというのがわかってもらえると思います。

パーツスキンに入れたparts.cssは元々親テーマとして機能するものです。が、パーツスキン用に修正しています(中身ではなく、パーツスキンとしての形式にしてあるということです)ので、元々の親テーマの不要部分であったりを打ち消すためのスタイルが完全には入れていません。
そのため、デベロッパーツールで該当部分のstyle.cssのチェックを全部外した時が僕が作成したスタイルの中身と言えます。

ただし、ほとんどの部分は上書きされているはずですが、一部残っているプロパティがあった場合は、不必要なプロパティか、何かしら削除してしまうと問題があるようなものと考えて下さい。ほぼ不要なものが残っているかと思います。

この場合の不要なものとは、例えば.entry h2 aのように、h2にスタイルすれば解決できる部分をaタグに親テーマでスタイルされている場合などです。.entry h2はparts.cssで修正されて、parts.cssではaタグは逆に親テーマにあったプロパティを無くしているため、親テーマstyle.cssのプロパティが継承されてしまうということです。

これまで、親テーマstyle.cssでは、aのリンクでそのアンダーラインが不必要な場合は、そのセレクタにてtext-decoration: none;と入れることでアンダーラインを非表示にしていました。僕が見るに、表示している所のほうが圧倒的に少なかったため、

と予め元々のaタグに入れて非表示にしてしまい、必要な所で、

とすることで表示するようにしました。また、フォーラムで度々出てくる、「見出しのスタイルが変更できない」に対応するべく、例えば、

としたりして、aタグでスタイルさせないようにしています。上記の場合は、色情報のみ継承としています。

この理由としては、h2 aにフォントサイズを入れなくても、h2にフォントサイズを入れておけば通常は継承されますが、色情報はaタグが元々持っていてそれを継承してしまうので任意の色にしたい場合は上書きする必要があるからです。
つまり、parts.cssを適用すると、h2タグ、あるいは他の見出しレベルのタグに直接スタイルすればその子要素であるaにも継承されるべき所は勝手に継承されると言う具合にしました。

このような変更がいくつかあって、親テーマのh2 aに書かれている内容はそのままparts.cssでも継承してしまう場合があります。
※ 変更点としては、こちらのGitHubのWikiを参照して下さい。

パーツスキンを適用しておかしな所を見つけたら

さて、ではおかしな部分を見つけたと言う場合にどのような確認が必要かを書いておきます。

おそらくparts.cssを適用すると、タイトル下のSNSのコメントのアイコンがギューンと右上に移動しているかと思います。これは、parts.cssでは修正されているわけですが、親テーマのstyle.cssでの設定が残っている良い例です。

まず、該当部分を右クリックしてFirefoxなら「要素を検証」、Chromeなら「検証」を選択してデベロッパーツールを表示します。
選択しているタグが

であるのを確認して、パネル右側のプロパティを見ます。

そうすると、style.cssに、

このようになっている箇所を確認してもらえると思います。このチェックを外した時にアイコンが他のものと同じ表示になっていれば、ひとまずは修正されていると言うことになります。ただし、まだ完全に全部が縦センターに揃っていないかも知れません。それらは、完全に縦センターに揃えることは可能ですが、ひとまずhtmlやその他諸々の理由があって、現状そのような状態になっています。

このような感じで、その問題点がstyle.cssにあるのか、parts.cssにあるのかを調べてもらって、報告してもらえると修正することができます。
ただし、対象が親テーマのstyle.cssであるということを忘れないで下さい。スマホの時や、タブレットの場合はもしかすると他のcssが親テーマのstyle.css等を上書きしている可能性があります。

もし何かしらを発見した場合は、しばらく当サイトのcssはこのままにしておきますので、ご自身のサイトと当サイトのスタイルを見比べてみて下さい。先にも書きましたが、当サイトの親テーマstyle.cssはparts.cssの中身をそのまま適用していますので、本来のstyle.cssの影響を受けていません。よって、カスタマイザーでの設定により表示が異なっているのかの確認をしますのでお気軽にコメント頂ければと思います。

報告の際は、どの部分のどこというような(できればセレクタでの指定もしてもらえるとありがたいです)感じで、何がどうなっていると言う報告を頂けると助かります。

もし何かしらを修正した場合は、その内容と新しいparts.cssをどこかにアップロードするので、それを順次適用していって下さい。

スポンサーリンク

シェアする

フォローする

コメント

  1. hidekichi より:

    最新コメントウィジェットの表示を少し調整しました。
    これは実際に本テーマに適用されるかはわかりませんが、見た目に揃ってたほうが良いのかなぁと言う事で、試しに。

  2. hidekichi より:

    グローバルナビの部分で、サブメニューがオープンしない問題を修正しました。
    最新のparts.cssは記事内最上部からダウンロードできるようにしました。