本格的にブログ運用をしていこう、と有料のWordPressテーマ導入を決めてから半月。いろいろと調べた結果「DIVER」というテーマに行き着きました。「AFFINGER5」や「JIN」も検討したのですが、結論、どのテーマもそこまで大きな違いは無さそうだったので、であれば、と自分の直感に従い、さらにはセールをやっていたからという安易な2つの理由で「DIVER」に決定。
導入してみて一番感じたのは、使いやすさや機能が無料テーマの比ではない、という点です。無料テーマであっても、おそらく数々のプラグインを駆使すれば、同じレベルのやりたいことが実現できるとは思うのですが、ひとつひとつ探したり設定する手間であったり、なおかつそれが微妙に自分の欲しいものと違っていたり、さらにはプラグインは入れれば入れるほど重くなったり、などなどいろいろな面でハードルが多いと思います。
有料テーマの場合、プラグイン自体も同じ人が作っているので、そのテーマと親和性が高いのと、何より探さなくても欲しい機能がある、というのは圧倒的にラクで、それだけでもお金を払う価値があるのかな、と個人的には思っています。それと、カスタマイズ性がめちゃめちゃ高いので、とにかく自分好みのデザインにしたい人には最適だと思います。
というわけで、DIVERをいろいろと自分好みにカスタマイズしたのですが、公式サイトにも情報がなく、ググってもどうしても見つからず、自己解決したカスタマイズの小ネタを、いつか誰かの役に立てばいいかな、くらいの感覚で、いくつか残しておこうと思います。
目次
記事一覧がマウスオーバーした時にアニメーションさせたくない
DIVERの特徴のひとつとして、トップページの記事一覧にマウスを乗っけるとアニメーションする、というものがあります。そのカラム全体がアクションするもので、自分が今なにを選ぼうとしているのかが分かる、という割とよく見かける機能です。
ただDIVERの場合、このアニメーションが微妙にガタつく感じがしてちょっと不格好なのと、なんかいろんな箇所が動くので、個人的には少し動きすぎな印象がありました。
動きとしては
- マウスオーバーしているカラム全体がちょっと上に動く
- カラムにちょっと影がつく
- 画像をマウスオーバーしていると画像も動く（透過、ズーム、ぼかしなど選べる）
- 記事タイトルにマウスオーバーしていると文字色が変わる
となります。
この1の動きの時に、上だけではなく、ほんのちょっとだけ右や左にずれるんですよね。これが気持ち悪かった。なので、この「ちょっと動く」ところだけをなくす方法を記載します。
なお、今回紹介する小ネタは、テーマエディターでDIVERのCSSに直接手を加えるもののため、動作の不具合などを起こす可能性があります。必ずバックアップをとった上で、すべて自己責任の範囲でお願いします。
テーマエディターでCSSを修正する
結論から言うと、カラムを動かしているCSSをコメントアウトすることで、そのアニメーションをなくすことができます。
手順1.テーマエディタでdiver（親）のCSSを開く
外観→テーマエディターを開きます。開いた時点では、diver_childのスタイルシートが表示されていると思いますが、右の「編集するテーマを選択」から、diver_childではなく「diver」を選択します。
手順2.該当の行をコメントアウトする
表示されたソースの9720行目に移動します。ソースの最下部なので、一番下までスクロールすればすぐに見つけられます。
9720行目から9728行目がマウスオーバーした際のアニメーションを制御している箇所なのですが、これの9725行目～9727行目を/* */でコメントアウトしちゃいます。これだけでOK。
ちなみに、サイドバーなどで右に動くアニメーションをやめたい場合は、その上の9721行目～9723行目をコメントアウトします。
もとに戻したい場合はこのコメントアウトを外せばOKです。
追加CSSでなんとか処理できないか、いろいろ試してみたのですが、このコメントアウトでしか実現できなかったので今のところはこれで対応していますが、今後追加CSSでのやり方を見つけたら追記したいと思います。
