まだ眠たい猫
Pocket

WordPressのテーマを_s(アンダースコアーズ)で作りました。
ついでに公式ディレクトリ入りを目指して申請中です。

今見ているこのサイトがそのテーマです。
テーマ名は「Modernize」

以前、子テーマを作りましたが、オリジナルのデザインでテーマが欲しいと思ったためです。
オリジナルとはいえ一から作る技術がないので、_sを使いました。

最初はCOMPONENTSという_sに+αの機能がついたようなテンプレートでやろうと思いましたが、いまいち特徴が分からず、スタンダードなもので作りました。

盛り込みたい機能と結果

最近Mediumというブログツール流行ってますよね。
デザインやUIがかっこいいので真似したいと思いました。

1.ヘッダー・フッターをスクロールによって出し入れ

Mediumは下にスクロールしているとき、メニューなどは非表示ですが、上にスクロールすると表示されます。
このUIはすごく好きで、すでにブログに取り入れていたので問題なく追加できました。

jQueryプラグインの「Headroom.js」というものを使っています。

上下の動きを感知する記述は簡単なんですが、iOSやAndroidなど端末ごとに綺麗に動かそうとするとかなり大変…。
このプラグインはそのあたりもやってくれています。

下にスクロールしているときはコンテンツを読んでいると判断し何も表示しない、上にスクロールしたときは何かを探していると判断し表示する、という理にかなった動きかなと思っています。

2.横スクロールメニュー

Mideumのトップページのメニューはスマホサイズでは横スクロールします。
このメニューは最近よく見ます。Yahooなんかでも使われています。

横スクロールメニューだとメニューが表示されているし、そこまで領域をとらないし、けっこういいんじゃないかなと思ってます。

実装はCSSでoverflow-xを指定するだけです。

慣性スクロールにしたいなら、iOSでは-webkit-overflow-scrollingを指定したり、AndroidではiScrollとか使わないとダメかもですが、わりと簡単にできます。
が、結果断念しました。

単純な1階層メニューならいいんですが、WordPress公式ディレクトリ入りを目指すなら、2階層/3階層目の子メニューのことも考えないとダメみたいです…。
じゃあ、そのときどんな見せ方するんだと考えましたが、ややこしくて断念しました。

普通のドロワーにしてます。

3.zoom.js

相性悪いのか、動きが悪いので削除しました。

Mediumの特徴でもある、画像をクリックすると画像が拡大、スクロールすると閉じるという非常に気持ち良い動きです。
これを簡単にやってくれるのが「zoom.js」というプラグイン。

実際簡単に入れられたんですが、なぜか動きがもっさい。。ローカルとか他のサイトでは綺麗に動くんですが。
以下の画像クリックしたらどうですか??

まだ眠たい猫

クリックしてしばらく待たないとだめですよね。
2回目以降はスムーズなんですが、なんだこれ。

このあたりの挙動がわからないので、zoom.jsは様子見。改善できなかったら外そうと思います。

さいごに

結果、やりたいこと3つのうち1つしかちゃんとできていない状況です。。
ただ、まだ申請したばかり。レビュワーがつくのもかなり先だと思うので、ぼちぼち修正していきます。

どうせ待つから、CSSやデザインなども最低限やって申請したので、修正したいところ盛りだくさん…!

Pocket