【WordPress】Googleしごと検索（Google for Jobs）に求人を掲載するpart7【仕事一覧ページのデザインを調整する】

WordPress(ワードプレス)

2022.03.03

「Googleしごと検索（Google for Jobs）に求人を掲載する」というこのシリーズもかなり長くなってきてしまいましたが、前回は仕事一覧ページの表示をさせる部分まで出来ましたので、続きを作っていきます。

仕事一覧ページのデザインを調整する
カスタムフィールドの画像を表示させる
divタグ＋フレックスボックスで調整する
classを準備する
まとめ

仕事一覧ページのデザインを調整する

このままだと、縦に一覧表示されているだけになってしまいますので、仕事一覧ページのレイアウトとデザインを調整してみます。

下記のような感じで作りましたので、こちらで作ったclassを使っていきます。

<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
    <div class="ListContainer">
     <div class="ListTitle">
      <a href="<?php the_permalink(); ?>"><?php the_field('jobTitle'); ?></a>
     </div>
     <div>
       <div><?php the_field('companyName'); ?></div>
       <div><?php the_field('siteUrl'); ?></div>
       <div><?php the_field('postalCode'); ?></div>
       <div><?php the_field('addressRegion'); ?></div>
       <div><?php the_field('addressLocality'); ?></div>
       <div><?php the_field('streetAddress'); ?></div>
       <div><?php the_field('setValue'); ?></div>
       <div><?php the_field('basicValue'); ?></div>
       <div><?php the_field('minValue'); ?></div>
       <div><?php the_field('maxValue'); ?></div>
       <div><?php the_field('unitText'); ?></div>
       <div><?php the_field('employmentType'); ?></div>
       <div><?php the_field('description'); ?></div>
       <div><?php the_field('validThrough'); ?></div>
     </div>
    </div>
<?php endwhile; ?>

ひとまずこのような感じで、枠線を作ってみます。

.ListContainer{
border:1px solid black;
padding:20px;
margin:20px;
}

枠線が表示されました！

カスタムフィールドの画像を表示させる

カスタムフィールドで作成したmainImage画像を表示させます。the_fieldで出力させたメディアのURLを使ってimgタグで画像を表示させます。

<div class="ListImage">
  <img src="<?php the_field('mainImage'); ?>" width="150" />
</div>

表示されました！

divタグ＋フレックスボックスで調整する

あとは、divタグとフレックスボックスで位置関係を調整していきます。ざっくりと、このようなイメージで作成してみます。

こんな感じで分けて、上部だけspace-betweenで左右の端に寄せる感じで…？いけるか分かりませんが、とりあえず試してみます。

もしくは、position:absoluteあたりで調整してみます。

classを準備する

class名が無いので、それぞれの場所に準備します。大まかな土台は、このような感じで。

  <div class="ListContainer"> 
     <div class="ListLeft">
     </div>
     <div class="ListRight">
     </div>
  </div>

ListContainerをdisplay:flexして左右に並べます。

.ListContainer{
border:1px solid black;
padding:20px;
margin:20px;
display:flex;
}

あとは、CSSで調整していきます。

.ListContainer{
border:1px solid black;
padding:20px;
margin:20px;
display:flex;
}
.ListLeft img{
width:300px;
}
.ListRight{
margin:0 0px 0px 20px;
width: 100%;
}
.ListTitle{
position:relative;
}
.detailButton{
background:#2B88D5;
color:#fff;
text-decoration:none;
padding:6px 20px;
position:absolute;
right:0px;
top:0px;
}
.detailButton:hover{
color:#fff;
opacity:0.5;
}

出来ました…！space-betweenだと位置がずれてしまうので、今回はposition:absoluteで調整してみました。