Simplicity用 skin作成中

現在、simplicity用のskinを作ってたりしています。まだPC画面あたりを色々と触っている所で、完成まではしばらくかかりそうですが、鋭意作成中です。

    特徴

  • IEは徹底的に無視してます(笑)
    • ただ、scssで自動的に-ms-のプレフィックスが入っているみたいなので、新しいIEならいけるかと。
  • skinなので基本cssを触ってますが、どうやってもムリな構造の部分はjQueryを使用します。
  • サムネイルで表示する部分は、基本16:9で表示させようとしています
    • トップのリスト部は16:9ではないです
    • mix-blend-modeと言うcssのプロパティを利用しているので一部のブラウザでは正しい表示ができません。それっぽくはなる
  • 動かせる所は動きを出せるようにしています。
  • グローバルメニューはサイドパネルに収納
  • ユーティリティcssをいくつか設けて、より便利にと考えてます
    • テーブルの左右寄せ、センタリングなどは、tdに.centerや.rightをつけるだけみたいな感じで
  • オリジナルの不要なcssを上書きキャンセルしているので、やや見にくい感じのソースになってますが、例えば.entry h2 aなどにサイズや色の指定をしなくても、.entry h2に指定すればその中のaにも反映されるように改造しています。
  • その他諸々。仕様が判明次第追記していきます。

2015/9/29までに追加した内容

  • トップリストアイテムのカテゴリ表示部が3つ以上になった場合、ドロップダウンリストで表示(レスポンシブ対応)
  • h2部にサブタイトルをsmallタグにて挿入できるように。あわせて、h2のみreverseモード追加
  • markタグにて、文章中の必要な箇所にハイライトを入れられるように
  • kbdタグにて、キーボードのショートカットを表示できるように(表示のみ)
  • リストアイテム(ul)にunstyleを追加。トップレベルのアイテムにはリストタイプが表示されない
  • dlにhorizontalを追加
  • 各部位flex化
  • レイアウト完全レスポンシブ対応
    • これにより、一部カスタマイザーの設定が無視されます
    • モバイル時のメニューを開くボタン(左側黒丸)を上部から下部に変更
      • モバイル用の調整は現在手付かず
  • 現在sns部をflex化に着手中

これらを踏まえて、サンプル的には以下のような感じになります(※ あくまでサンプルです。このままか更に手が加わるかは不明です)

See the Pen ZbOGyP by Hidekichi (@Hidekichi) on CodePen.

これまで公式のフォーラムを見ていて…

フォーラムはある意味アイデアの宝庫です。僕が普段利用している中では思いもつかない事をサラリと質問してしまう人もチラホラといたりして、なるほどと思ったりもするのですが、その中でもよく目にしていたのが上の箇条書きでもあげましたが、.entry h2 aのスタイルです。

見出しを装飾したいと思ったら、そりゃ誰でもh2などのヘッダタグを見ます。文字のサイズを変えたいとか、色々手を加えてみたいと思うのもわかります。

Simplicityは比較的aタグに何かしらスタイルがされていることが多く、h2にいくらスタイルをしてもカスタマイズできないと思われた人もいるでしょう。
現在、作成中のskinでは、PHPが書き出すいわゆるhtmlの構造をできるだけそのままにして作成しています。そうすると、やはり.entry h2 aの様な箇所も、カスタマイズするにあたってaタグにしなくてはイケナイと思われるかも知れませんが、実はこれ回避することができます。

と、言ってもskinのcssは子テーマstyle.cssより後で読み込まれるので意味のない話ですが、skinフォルダの中にはやはりstyle.cssがあるので、もしskinを適用してそのスタイルを変更したいと考えれば、子テーマskinフォルダの中のstyle.cssをいじればよい話になります。

さて、その方法ですが、

と仮にあったとしましょう。これのh2に対してスタイルをしたいのであれば、

このようにすればよいわけです。inheritは継承という意味です。つまり、親になる要素のスタイルを継承すると言うことになります。

本来aタグにはスタイルは必要はありません。アンカーと言うのは、場所を指定したり、あるいはどこかのアドレスに移動する時に利用するものなので、スタイルをする必要が本来はないのです。しかし、リンクになっていた場合、そのリンクの色やアンダーラインが自動でつくので何とかしたいと思うことはあります。
ここから、アンダーラインだけ消しておいて、色やらフォントサイズなどはその親から継承するということで、aタグ自体にスタイルを施さなくても勝手にそうなるわけです。

ただ、元々aタグにスタイルがされていない場合は、何も書いてなくても基本継承します。リンクの色などは、個別に設定するよりも全体的に指定することが多いので、あくまでもフォントカラーぐらいの話なんですが、このようにして見出しならhタグにスタイルをすることができるようになるわけです。

Simplicityだけではなくだいたいの子テーマを持っているテーマでは、まず子テーマの先頭で親テーマのcssを@importにより読み込み、その下に子テーマのスタイルを書いていくことになります。

cssは後から読み込む方が優先されるので同じセレクタの場合は、子テーマで書かれている方が優先されるわけです。skinのcssはそれよりも後で読み込まれるので子テーマよりも優先されますが、skinのstyle.cssで記載のないプロパティはもちろん上書きされません。ということは、何も書いていないskinをデフォルトで作っておき、そこにスタイルを加えることで、子テーマのstyle.cssよりも優先されるcssを作れることを覚えておいて損はないと思います。

cssは既に設定されてあるプロパティを打ち消すためのプロパティもあります。例えば初期化したいのであれば、line-height: initial;などとすることでブラウザのデフォルトになります。
border: 1px solid transparent;とすることで色情報のない1px分の幅を持ったボーダーを書くこともできます。これらを駆使して、親テーマなどに書かれているプロパティを打ち消しながらスタイルしていくのでskin作りは簡単ではありませんし、時間はかかります。

cssだけではできないこともあるので、現在作っているskinはjQueryも必要になります。これは子テーマjavascript.jsにそのまま入れるだけで動作するように考えています。
これらから、親テーマの仕様が変更されない限り、子テーマですべてまかなえるのでアップデートの対策もできるという寸法です。

ひとまずは、色々なモードでのテストもしないとアレなので、すぐにリリースできるわけではないんですけれども、だいたいの要素がカスタマイズできたら、モバイルにも対応させて、人柱バージョンを公開したいと思います。
好ご期待!!

スポンサーリンク

シェアする

フォローする