子テーマの完成度を高める

前回の「テーマ変更」から早一年、その間あれやこれやと手を入れることを繰り返し、今では最初の面影は無いに等しい？初めてのワードプレスから比べれば格段に改修技術は向上しているので親テーマ本体に手を入れることは全くありません。全て「子テーマ」で実現しているので時々親テーマがアップデートされても影響はゼロです。もっとも親テーマの新機能がスポイルされる可能性はゼロではありませんが(笑) 無料のまま有料オプション並みの機能を子テーマで実現する、というのが大原則です。

痒い所に手が届くような改修を繰り返してきた今回のテーマですが、一つだけどうしても気になっていた部分があって、テーマ名が「Fotografie」と言うぐらいだから写真を重視しているのはわかるのだけど、そのサムネイル画像がトップページで左側に縦に並んでしまうのはどうもバランスが悪いと思っていた。。。凡人の発想なのだとは思うけど(笑)

縦にズラッと並ぶより交互に並んだ方がバランス良く見えるのでは無いかと思い修正にチャレンジしてみました。結果はトップページでご覧の通りです。キャッシュに残っていると古いスタイルで表示されるかもしれません。ちなみにスマホでは何も変わりません。パソコンかタブレットの横画面でご覧下さい。

「nth-child」擬似クラスでは、親要素から見て「何番目の子要素」か分かるようになっています。今回は奇数だったら画像を左寄せ、偶数だったら画像を右寄せにする設定としてみました。抜粋やメタデータはそれぞれ画像の反対側に横並びで表示されるようにしています。パッと見で画像の横に抜粋があるのか、下に抜粋があるのかわからないため「アクセシビリティ」の観点からはあまり推奨出来ないレイアウトだと思います。親テーマがこのレイアウトを採用していないのもその点がクリア出来ないからだと思います。このサイトではそこまで「アクセシビリティ」にシビアでは無いのでやってみましょう。

  .post-archive .post-thumbnail {
    display: table-cell;
    vertical-align: middle;
    bottom: 0;
    left: 0;
    padding-bottom: 0;
    position: absolute;
    top: 0;
    width: 45%;
  }

上のオリジナルスタイルに、下のような「要素が偶数」だった時のスタイルを追加します。

  .post-archive .hentry:nth-child(even) .post-thumbnail {
    display: table-cell;
    vertical-align: middle;
    bottom: 0;
    left: 55%;
    padding-bottom: 0;
    position: absolute;
    top: 0;
    width: 45%;
  }

実際には画面の幅が何種類かあるので、leftとwidthは複数設定の対応が必要ですが、基本的な考え方は同じです。タイトル画像はレンガ積みのように交互に表示する、と言うことでローマ時代の遺構にあったレンガの写真です。