Espied カスタム:インタラクションを調整する

前回はフォントをいじってみました。

今回は、実際に子テーマを適用したWEBサイトを使ってみて、気づいたことを反映してより良いものにしていきましょう。

サイドの黒バー、いらないな

Espied の特徴でもあるのだけど、ずっと右側に鎮座する黒いバー
子テーマで追加した「ランディングページ」のデザインでは圧迫感を感じてしまいますね。

ランディングページでのみ、サイドバーを表示しないようにしました。
テンプレートを使用した時はそのファイル名に由来するクラスが BODY に追加されます。そのときに Espied のサイドバーを消したい場合は以下のようなCSSになります。

うーん、ポートフォリオのリストも良くない

Espied のデフォルトのポートフォリオの一覧は、グリッドでアイキャッチ画像を並べてくれて、魅力的です。しかしやっぱり Espied は「フォトグラファー向け」のテーマですね。これは「写真」などには良く作用します。

でも、画像にマウスオーバーしないとテキストが現れないのは「写真以外の実績・作品」にはナカナカ辛いものがあります。僕の実績や成果にはカッコいい魅力的なビジュアルがあるものばかりではありません。

マウスオーバーのインタラクションは要注意

そして(写真作品なら問題ないのですが)スマートフォンには「マウスオーバー」に対してのインタラクションが効かないのです。マウスオーバーしないと作品のタイトルが表示されないわけですから、スマートフォンでは「それをクリックすると何が表示されるか」判断できません。

僕のポートフォリオはビジュアル作品ばかりではありませんから、タイルはマウスオーバーしなくても見えているように変えました。

ポートフォリオをリストするループ部分をカスタマイズしました。CSSのみでエフェクトしているので不要な Javascript は 「wp_deregister_script」で削除しました。

ハンバーガーメニューについて

ハンバーガーメニュー」は最近よく使われる三本バーアイコンの折り畳みメニューですね。
スマフォやタブレットなど、画面に表示できる情報量に制限があるデバイスのための、ひとつの解決策。

さて、この「ハンバーガーメニュー」については色々な議論があります。それを操作しないと表示されないメニューというのは、直観的にソレが何を提供してくれる UI なのか分からないからです。

そのシステムが「道具」である場合は「ハンバーガーメニュー」は効率よく機能します。日常的に利用するシステムならば、ハンバーガーメニューに何が隠されているかを学習して利用する機会があるからです。

そのシステムが日常的に利用するシステムではないとき、例えばボクのポートフォリオサイトやブログなどは「道具」ではなく「チラシ」あるいは「読み物」であって、ユーザーに学習を求めるものではありません。こういう利用シーンでは「ハンバーガーメニュー」はあまり望ましくないでしょう。