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

閲覧数: 27(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)タグ, , ,
ElasticPress日本語設定202...

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

今週のトップ10
blank

前回の「閲覧数を記録してみる」で記事の閲覧記録を取ることには成功しましたが、このプラグインでは細かい  続きを読む

テーマ詳細
blank

今回使用したテーマは「oblique」です。日本語では「斜めの、斜め方向の、傾いた」という意味です。  続きを読む

小ネタをこねた
blank

左上のメニューアイコン(三本線w)をクリックすると左側にサイドバーが表示されます。このサイドバーの中  続きを読む

ElasticPress 3.5
blank

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

関連記事の大原則
blank

ググったりしてあるページにたどり着いた閲覧者に対して、それに関連する記事を提示して少しでもサイトの滞  続きを読む

スポンサーリンク

コメントを残す

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