カテゴリーイメージ画像を中央に寄せる

カテゴリートップページと投稿ページにカテゴリーごとのイメージ画像を表示するようにしましたが、横幅が小さめの画像の場合、特にPC表示の際に左寄せで表示されてました。これを中央寄せにしたい。

前回の記事はこちら

カテゴリートップページにカテゴリーイメージの絵を出したい 〜実施編STEP1・2〜

カテゴリートップページと1つ1つの投稿記事の一番上にカテゴリーのイメージ画像を表示したい。こうすることで、例えば見ている人の印象に残るのと、全く違うカテゴリーの…

ロードスターでも釣りがしたい!

現状のhtml

<div style="position: relative; display:inline-block;">
  <img src="https://static.the-world-star.com/wp-content/uploads/2022/07/20173139/20220720_172737.jpg" />
  <div style="position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; color:white;transform:translate(-50%,-50%)">
     <p><h1 class="page-header-title">サーバー</h1></p>
  </div>
</div>

文字「サーバー」は画像の中央にしている。画像自体の位置は1つ目のdivに対してやるのか？画像自体のタグ<imgにやるのか？

下記のようにwordpressのブロックのショートコードに貼り付けて実験して確認していってみる。

上記は初期段階、画像が左寄せになっている。

変更後のhtml

<div style="text-align: center;">
   <div style="position: relative; display:inline-block;">
      <img "="" src="https://static.the-world-star.com/wp-content/uploads/2022/07/31115522/server_eyecatch.jpg">
      <div style="position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; color:white;transform:translate(-50%,-50%)">
           <p></p><h1 class="page-header-title">サーバー</h1><p></p>
      </div>
   </div>
</div>

もう1つ<div></div>のブロックを追加してそれを中央寄せ=style="text-align: center;"を指定する。

元のブロックの<div>や画像の<imgに中央指定してもダメでした。よくわかってないのですが、文字を画像の中央に寄せるための設定とケンカします。<div>でひとまとまりの位置やらを指定できるみたいなので、もう1つ外に<div>のブロックを作ってやればいいやんというひらめでうまく行きました。

phpの変更

/opt/bitnami/wordpress/wp-content/themes/lightning/_g3/template-parts/page-header.php

の一番下、前回いじったところからの差分をピンク字で表示する

<!-- //カテゴリー独立プロジェクトのための修正、プラグインのCategory Imagesを利用している
<!-- //categoryだったらの条件はz_taxonomy_image()に入っていたのでそこもいじる -->
<?php
if (function_exists('z_taxonomy_image')){
  echo '<div style="text-align: center;">';
  echo '<div style="position: relative; display:inline-block;">';
  $taximage = z_taxonomy_image(); //これで画像表示のecho、成功時にもhtmlコードを返すようにした
  if(!empty($taximage)){           //画像があったらカテゴリー名を表示
    echo '<div style="position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; color:white;transform:translate(-50%,-50%)">';
    echo '<p>';
    echo wp_kses( apply_filters( 'lightning_page_header_title_html', $page_header_title_html ), $allowed_html ); //カテゴリー名
    echo '</p>';
    echo '</div>';
  }
  echo '</div>';
  echo '</div>';
 }
?>

前回の記事

カテゴリートップページにカテゴリーイメージの絵を出したい 〜実施編STEP1・2〜

カテゴリートップページと1つ1つの投稿記事の一番上にカテゴリーのイメージ画像を表示したい。こうすることで、例えば見ている人の印象に残るのと、全く違うカテゴリーの…

ロードスターでも釣りがしたい!