コスメ水槽waterTank

30代・乾燥肌の管理人の年齢肌対策。スキンケアコスメの紹介と、時々メイク。綺麗なおばさん目指します。

[Stinger5]記事一覧のサムネイル(アイキャッチ)に影を付けて重なってる風にするよ

 

目標

これが




こうなる

「影を付ける」「傾ける」というのをスタイルシートで実現します。

修正するソースファイル

ここで使用しているStinger5はver20150505です。

  • itiran.php
  • style.css

一覧画面のHTMLを修正 - itiran.php

修正前

      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>

修正後

      <div class="itiran-frame">
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150', array('class' => 'itiran-thumbnail') ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" class="itiran-thumbnail" />
      <?php endif; ?>
      </div>

サムネイルあり/なしのif-elseブロックの外側に<div>タグを置きます。class は itiran-frame とします。

サムネイルがある場合、the_post_thumbnail()関数がサムネイルの<img>タグを生成しています。サムネイルの<img>タグにもclassを指定したいため、the_post_thumbnail()の第2引数に array('class' => 'itiran-thumbnail') を追加します。

サムネイルがない場合に「NO IMAGE」の画像を表示する<img>タグにも itiran-thumbnail という class を指定します。

※ソースの1行が長いので、横にスクロールして見て下さい。

サムネイル用のスタイルシートを追加 - style.css

style.css に以下の記述を追加します。

.itiran-frame {
	display: inline-block;
	position: relative;
	z-index: auto;
}
.itiran-frame:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
	background: #fff;
	z-index: 1;
}
.itiran-thumbnail {
	position: relative;
	transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	z-index: 2;
}

.itiran-frame の after擬似要素が影となってサムネイル画像の後ろに重なっています。
.itiran-thumbnail に transform を使うことで回転(傾け)させています。この例では「-3」を指定して、反時計回りに回転させていますが、 「3」を指定すれば時計回り方向になります。

また、.itiran-frame:after に transform を使えば、影の方を回転させることもできます。

なお、transformにはベンダープレフィックス(接頭辞)を付けています。
デスクトップ版(Windows7)のIE11、Chrome、Firefox ではベンダープレフィックスなしでも回転したのですが、iOS版(iOS8.3、iOS6.1.3)のSafari、Chromeではベンダープレフィックスなしでは回転しませんでした。
Andoroid端末持ってないので、モバイルのMozilla系の確認はできてません……。

2015年中にはiOS版のFireFox出るかもしれないみたいですね。そうしたらまた更新します。

参考にしたサイト

ありがとうございました!

 - ブログひっこし ,