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

閲覧数: 19(0)

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

痒い所に手が届くような改修を繰り返してきた今回のテーマですが、一つだけどうしても気になっていた部分があって、テーマ名が「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は複数設定の対応が必要ですが、基本的な考え方は同じです。タイトル画像はレンガ積みのように交互に表示する、と言うことでローマ時代の遺構にあったレンガの写真です。

カテゴリーIT閑話, 公開タグ, , ,
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください