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

閲覧数: 25(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閑話, 公開タグ, , ,
緊急事態宣言で外出自粛になり...

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

ページナビのテキスト
blank

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

閲覧数まとめ
blank

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

タイトルを抜粋する
blank

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

ElasticPress 3.5.6
blank

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

閃きは大事だw
blank

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

スポンサーリンク

コメントを残す

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