一回折れた人

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

Xeory Extensionのトップページを改造　マウスオーバーで画像を丸くする

IT WordPress Xeory_Extension

改造しているトップページですが、ランディングページとも呼ぶようです。

ランディングページについて少し調べてみると、個人のブログには必要なさそうな感じがプンプンしていますが、 せっかくあるのだから引き続き改造していきます。

ちなみにランディングページは企業の製品などの情報を1ページに詰め込んで、売上に繋げるために用いるようです。 そのランディングページの最近の主流が縦長で、 最初に表示される画面にインパクトのあるコンテンツを表示するみたいです。

ランディングページの日本と海外の構成の違いは、 日本の場合は縦に長く情報が多い、海外のページは１画面に収まるほどシンプルで画像などを用いて製品のイメージを伝えることが多いようです。 この辺りの違いはその国の人の性格が出てそうですね、調べてみるとおもしろいかも。

さてさて前置きが長くなりましたが、今日もトップページを改造していきます。

今日は、トップページにある記事へのリンク画像にマウスをあてると、画像が変化するようにします。 方法は色々ありますが、今回は、CSSの指定のみです。

まず、変化させる要素にIDなりクラス名なりをつけて特定の要素のみ変化する様に設定します。 今回の場合だとランディングページのブログ記事の画像のみなので、下記の様にして他に影響が出ないようにします。

  <article id="post-<?php echo the_ID(); ?>" <?php post_class($rank_class); ?>>
    <a href="<?php the_permalink(); ?>" class="wrap-a">

      <?php if( get_the_post_thumbnail() ) { ?>
      <div class="post-thumbnail post-thumbnail-r-custom">※デフォのクラス名の後にカスタムのクラス名を追加
        <?php the_post_thumbnail('small_thumbnail'); ?>
      </div>
      <?php } else{ ?>
        <img src="<?php echo get_template_directory_uri(); ?>/lib/images/noimage.jpg" alt="noimage" width="300" height="158" />
      <?php } // get_the_post_thumbnail ?>
    <p class="p_category"><?php $cat = get_the_category(); $cat = $cat[0]; {
        echo $cat->cat_name;
      } ?></p>
    <h3><?php the_title(); ?></h3>
    <p class="p_rank">NO.<span><?php echo $i; ?></span></p>
    
    </a>
  </article>

ランディングページを再読み込みして、ソースを確認してみると、

f:id:hpptms:20170921224318p:plain

設定したクラス名がくっついていますね、後はCSSです。

要素を変化させる為に利用出来そうなプロパティに「transform 」があります。 使った事がないプロパティですが、このサイトとこのサイト説明で何となくは分かりました。

色々とアニメーションを試しましたが、画像の角を少しまるくするだけに落ち着きました。 あんまりゴテゴテアクションをつけても楽しいのは最初だけなので。

角を丸くするCSSは以下になります。

/*ランディングページの記事の画像をマウスオーバーで角をまるくする*/
.post-thumbnail-r-custom {
    overflow:visible;
}

.post-thumbnail-r-custom img{
    transition: border-radius 0.3s linear;
}

.post-thumbnail-r-custom img:hover{
    border-radius:30%;
}

合っているか不安ですが少し解説すると、 今回は「img」をマウスオーバーで変化させるので、imgとimg:hoverというセレクタを作ります。 imgにはマウスオーバーさせた時の変化させるまでの時間などを書いておきます。 img:hoverはマウスが当たった時なので、ここで変化率(画像を30%丸く)を指定します。

これだけでトップ画像にマウスを乗せると画像が丸くなるアニメーションになります。 枠を光らせたりしてもいいかもしれないですね。