thumbnail、imageの処理

ここの体裁を整える時に、ああしたいなーとかこうしたいなーって
イメージがぼんやりあります。

おおもとはテンプレートがたくさんあるHP集の中の一つ。とかですが。

今回、体裁をカスタム投稿タイプ使ったりしていじっているので、
せっかくだから真似したいなっていうのを組み合わせたらどうだろう？
と思い、やってみました。

メインのすべての最新投稿にはカテゴリとか全部合わせて、
投稿日が新しい順に記事本文はさわりだけ、サムネイルとタイトルを表示。
て設定しました。

サイドバーには各固定ページごとの投稿が表示される。
ページごとに表示される場所を変えて、3つくらい記事が新しい順に表示される。
サムネイルと日付とタイトル。というように。

こんな感じにしてみました

.aside_posts li {
  list-style : none ;
  margin : 1vw 0 3vw 0 ;
}

.wp-post-image {
  max-width : 100% ;
  max-height : 300px ;
}

.wp-post-image img {
  width : 100% ;
  height : 100% ;
  object-fit : cover ;
}

miki

おおっ！いい感じ♪

メイン部分はこれでいいんですけど、右側のサイドバーの部分。
ここのサムネイルを幅いっぱいじゃなくて、
サイドバー左側に小さめに表示して、サムネイルの右側に日付とタイトルを表示。
という風にやりたいな。と思いまして、

①サイドバーのサムネイル読み込みのコードをclassで括って
②縦横を100pxくらいにして
③日付とタイトルをサムネイルの右側に表示するようにする

という手順で大丈夫だろう。とやってみました。

.aside_posts li {
  list-style : none ;
  margin : 1vw 0 3vw 0 ;
  display : flex ;
}

.wp-post-image {
  max-width : 100px ;
  max-height : 100px ;
}

.wp-post-image img {
  width : 100% ;
  height : 100% ;
  object-fit : cover ;
}

miki

メイン部分の画像も小さくなってしまってるー(´;ω;｀)

というわけで、まだまだ修正は続く。。。