思うところあり、テーマをVerbosaから、同じCryout Creationsが作者のAnimaに変更しました。
それに関連して、カスタマイズ等行ったり、思ったことなどありますので、書きます。
広告
はじめに
思うところといっても、結局のところ、「すっきりしたデザインにできるかもしれないと思った」という感じです。
ブログとしてはVerbosaは優秀でしたが、それをカスタマイズしていくにつれ、色々と、主に見易さ的な面で、サイトをもう少しスッキリさせたり、レイアウトをいじったりしてみたくてもそうもできないことから、色々と難点を感じました。独特のレイアウトで、一寸色々と悩んだのもあります。
それで、思い切ってチェンジした次第です。
今までの記事ではVerbosaで、と書いていたのですが、Animaをライブプレビューで弄っていると、色々と分かりやすく、思わず変えてしまいました。
ただ、機能が色々あるぶん、カスタマイズにも時間がかかりましたので、そのあたりについても書きます。
なお、時系列的に順を追うのではないので、もしこのページを見ながらAnimaをカスタムする方がいらっしゃいましたら、その場合は項目ごとにいったりきたりになるかもしれませんので、その点ご了承ください。
Animaの全体的な評価
シンプルで読みやすいレイアウト・カスタマイズしやすいコード
カスタマイズしつつ使ってみると、シンプルで読みやすく、コードがスッキリしている印象を受けました。
とはいえ、私はVerbosaで散々色々カスタマイズした経験がありますので、慣れなのかもしれませんが…。
カスタマイズ項目も豊富
Cryout Creationsさんのテーマはどうやら、基本的にそのようになっているらしいのですが、独自カスタマイザが標準装備してあり、様々な項目を設定することができます。
Animaも勿論そうで、カスタマイズ画面の「AN」とついている項目が独自カスタマイザ部分です。
ランディングページ（トップページ）の基礎部分の調節もここで行えます。
SeriousSliderプラグインも継続使用可能
Verbosaに引き続き、SeriousSliderプラグインも継続使用が可能です。SeriousSliderプラグインはCryout Creationsが制作したもので、Cryout Creationsの最近のテーマで使用可能になっています。ようするにCompatibilityは基本的には気にしなくていいのです。…後述しますが、表示のカスタマイズはちょっとだけ時間がかかりました…。
このプラグインを使ってスライダーを作成していた身としては、とても助かりました。
カスタマイズの感想
独自カスタマイザが便利
相変わらず、独自カスタマイザが便利です。一通りのカスタマイズはここで行うことができます。
日本語で記述するブログサイトであるというこのサイトの性質上、私はWordPressのカスタムCSS機能を使って更なるカスタマイズを行うことにはなりましたが、恐らくEnglishのサイトであればだいたいはここのカスタマイズだけですむのではないかしら。
カスタムCSSについては、Verbosaよりも書き換えが少なく済んでいるような気がする
コードが整理されているからか、私がCryout Creationsのテーマや、カスタムCSSでの書き換えに慣れたからか、カスタムCSSについてはVerbosaを使っていたときよりもコードが少なくすんでいるように思います。
ただ、ちょこちょこタイポグラフィやレスポンシブ関連で抜けているようなきがする箇所があり、そこは自分の知識を回転させてどうにかすることになりました。
function.phpでは削れるようになったコードも
勿論、Code Snippetsで管理しているfunction.phpのコードについても書き換えるべきところは書き換えています。
ただ、例えば最終更新日の表示についてはテーマに元々組み込まれてあってそれをカスタムCSSで表示するようにするだけだったりして、主にコードを削るぐらいになりました。
英語圏であれば十分使えそう
Cryout Creations自体が東ヨーロッパにあるらしく、デザインとしてEnglish（あるいは東ヨーロッパ系の言語を適用できそうな部分）の部分は整っています。というかかなり綺麗です。
東ヨーロッパや英語圏で使うのであれば、また日本でもそこまでフォントにこだわらないのであれば、このサイトぐらいまでカスタマイズする必要はあまりないのかもしれません。
カスタマイズについて、実施したことなど色々
ランディングページはコンテンツがダブる場合もあるので適宜減らす
Animaはトップページをランディングページとしてカスタマイズでき、そのための機能も結構たくさんあります。コーポレートサイトなら機能をフル活用できるのかもしれませんが、ブログを基本としたサイトであるこのサイトにはちょっとコーナーが多すぎたので、表示するものを適宜減らしてカスタマイズしました。
明示的にOFFにする必要があるものもありますが、Animaではわりと空欄にしておけばそれでOFFになる機能も多いように思います。
スライダー・キャプションというのもあったのですが、スライダーの中にキャプションを既に組み込んであったため、OFFにしました。静止画一枚をトップページにしたくなったときなどにまた稼動させようと思います。
Serious Sliderがうまく表示されない(not responsiveな感じになってしまう)のをカスタムCSSで対処
登場して間もないからか、Serious Slider側がまだ開発途上だからなのか、Animaではランディングページにおいて（推奨されているらしい）Serious Sliderプラグインを使っても、ウィンドウの横幅が狭い場合（スマートフォンなど）に、私のその時点の設定ではうまく表示されませんでした。
そもそもスライダーという媒体自体が横幅の狭いスマートフォンなどの媒体に多少適していないといわれればそうなのですが、折角表示しているのでdisplay: noneにするのもアレかなと思い、対処しました。
Verbosaだとあまりそのようなことはなかったように思いますが（その代わりPC版の表示を比率そのまま縮小させたような、結構独特な表示になっていた覚えはあります）、Verbosaのときからシェアボタンをスライダーに組み込むなどの独自のカスタマイズはしていたので、それと相性が良くなかったのかもしれません。
この問題に対処する方法は二通りになるかと思います。
- Serious Sliderプラグインとは別のスライダープラグインを使う
- プラグインはそのままで、設定とカスタムCSSを組み合わせてゴリ押しする
私はプラグインの設定＋カスタムCSSでゴリ押しました。
以下、その中で色々と気付いた点です。
- Serious Sliderプラグインに関して、Cryout Themeを選択するのではなくLightを選択して自分でデザイン決定するほうがやりやすい
- Cryout Themeのほうではカーソルをスライドの上に載せても遷移の矢印が出なかったのが個人的に引っかかっていたんですが、その他含めてLightで概ね満足できました。
- タイトル部分はposition: absoluteで位置調整されているのでそのあたりのコントロールに気を配る
- 今回のカスタマイズではposition: absoluteを使ったテクニックに触れる機会が多く、わりとCSSのテクニックを色々垣間見た気がします。
- CSSのビューポート単位がとても便利
- メディアクエリでの調節も行いましたが、なによりも画面の縦横の解像度に合わせてスライダーの高さを調節できるビューポート単位の便利さがすごかったです。長いほうの辺の45%に高さを抑えるとかできる。すごい。
- レスポンシブ対応をテストするときにVivaldiのサイドバーがとても便利
- 幅を自在に変更して閲覧できる便利さがすごかったです。開発ツールで検証もできるし。なるほどWebとVivaldiは運命なのでは…。
アイキャッチ画像の幅には注意する必要あり
このページ上部のように、Animaではアイキャッチ画像（設定によってはヘッダー画像）上に影を落とし、その上にタイトルを表示しています。
このとき横幅が足りないと、空白部分にその影が表示されます。
つまり、記事タイトル部分がバックの画像からはみ出ます。
後はお察しください…私としてはこだわりどころでして、あまりにも小さな画像だとテーマ側でよきにはからってくれる（ヘッダーメディアを表示してくれる）ようなのですが、とりあえず対処として、
- デフォルトのヘッダー画像として横幅が十分なものを表示できるようにしておく
- 私の場合は「サイト基本情報」→「ヘッダーメディア」から三種類登録しています。
- これから書く記事のアイキャッチ画像は（設定する場合は）十分な横幅のあるようなものにするよう努力する
という2つの方法を実施しています。一応アイキャッチ画像は記事内にも表示しているので、もうヘッダー部分はヘッダーメディアだけ表示されるように設定しようかと考え中。
なお、これ以外の対策として考えられるものは、
- サイトの横幅を縮める
です。
アクセント・カラーを赤系にするとフッター部分が目にきつくなることがある
これは、私が色の組み合わせをうまく決められなかったことも起因します。もうすこし黒バックでも見れる色をメインカラーにするべきでした…。
とりあえず経過として、AnimaのカスタマイザのColorからメイン・アクセントを変更すると、フッターのバックグラウンド色との兼ね合いから結構目にきついことになりました。
Animaのフッターではフッターのバックグラウンドが黒めの色になるようになっています。というか、私は黒と暗めの赤を主軸にしてカラースキームを構築していましたので、そうなりました。
普通のテキストならフッターでは灰色で表示されるのですが、いかんせんこのサイトのフッターはリンクが多く、リンク色を暗めの赤を主軸にしていたため、「黒バックに赤」というえぐい組み合わせになってしまったのです。
対処法は以下のとおり。
- フッターの背景色を変更する
- カスタムCSSで該当箇所の設定を変える
フッターの背景色には特に問題を感じませんでしたので、カスタムCSSでリンク色を調節して事なきを得ました。手法としては、フッターのaタグをCSSセレクタでうまく指定して、色を付け直した感じです。
デザインが確りしているので、デザイン指針が決めやすい
Animaはデザインがわりとはっきりしており、それがカスタムCSSで細かいところを整えるのに役立ちました。
私は、全体的に丸みを帯びた感じでデザインをすることにしています。また基本的に、リンクをホバリングしたときのアニメーションなどは暗い→明るい、もしくは彩がプラスされるようにしたつもり、です。
私はデザイナーではありませんから、アンバランスになったかもしれません。このあたり、本職の方ならもう一寸別のやり方で解決できたかもです…。
たまにレスポンシブ周りが抜けているところがあるので確認は重要
デザインもいいし、レスポンシブにもある程度対応できるようになっているAnimaですが、ポストの題名の文字数が多すぎる場合など、ちょっとした例外時のデザインが所々抜けているので、そのあたりが気になる場合は確認と修正がいるかもしれません。
もしかしたら、日本語と東ヨーロッパ系の言語ではそもそも全角半角的な意味で色々違うので、その影響かもです。
その他コメントなど
製作チーム（会社？）であるCryout Creationsさんが好きな私の欲目かもしれませんが、Animaは無料テーマとしてよくできていると思います。
知名度は低いかもしれませんが、プッシュしたいおすすめのWordPressテーマです。
(2018/06/13追記)なお、現在のサイトのテーマは同じ製作チームのKahunaに変更しております。