一回折れた人

日々の出来事をつらつらと

Xeory Extensionテーマのカスタマイズの影響

テンプレートをカスタムしているとこうなる事は分かっていたのですが、 弊害が出てきました。(対したことじゃないですが)

ブログ記事のアイキャッチ画像に枠をつけたり記事ページの上の部分と幅を開けたりと、 キャッキャしながらやっていたのですが、肝心のブログ記事部分はおおよそ思い通りの表示になりました。

f:id:hpptms:20170921222514p:plain

画像の背景が白い場合でも枠をつけてあげると境目が分かりやすくて個人的には好きです。 枠の背景などはCSSを編集してつけてあげます。

/*ブログアイキャッチ画像の調整*/
/*記事部分アイキャッチ画像の記事と画像の幅調整*/
.post-thumbnail-custom{
  padding-top: 10px;
}

.post-thumbnail img {
  display: block;
  margin: 0 auto;
  padding: 4px;
  background: #fff;
  width: auto;
  border: 1px #bfbfbf solid;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}

ブログの記事の方はいいのですが、元々あるCSSの名前を使用して上書きしていたので、 トップページにも影響が。

f:id:hpptms:20170921222553p:plain

「NewRelic」の画像部分と「No2」の画像部分が若干ズレています。 すぐ直せるかと思ったのですが、記事の画像を引っ張ってくる部分にクラス名などを付与する方法がまだ調べられていません。 もしかするとWordPress本体側のファイルを修正しないとダメかも?

<?php if( get_the_post_thumbnail() ) : ?>
      <div class="post-thumbnail post-thumbnail-custom">
          <?php the_post_thumbnail(array(1200, 630, true)); ?>//ここで画像を引っ張ってきています。
      </div>
<?php endif; ?>

クラス名が付与出来ればすぐ解決出来そうですが、疲れたのでまた今度。