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

閲覧数: 23(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閑話, 公開タグ, , ,
ページナビのテキスト
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閃きは大事だw
blank
2021年3月23日

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

スポンサーリンク

コメントを残す

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