サムネイル サイズ変更とマウスオーバー拡大 Simplicityトップページ

カスタマイズ

トップページのカスタマイズ備忘録です。当サイトはWordPressテーマ「Simplicity」を使用しています。

Simplicityのトップページは記事一覧になっていて、エントリーカードの設定にしています。デフォルトでは正方形のサムネイル画像が表示されます。

Simplicityに限らず、いろいろなブログを見ていると、こういう見た目のトップページが多く、ちょっと変えてみたいなという思いがでてきたのです。

今回は、サムネイルのサイズ変更と、マウスオーバーで拡大させるようにカスタマイズしてみました。

変更したいサムネイルサイズを追加登録

Simplicityには初期設定で3種類のサムネイルサイズが設定されています。

functions.php」の中に、以下の記述があって、サムネイルの画像サイズを指定しています。

  1. add-image-size(‘thumb 100′, 100, 100, true); → 100×100
  2. add-image-size(‘thumb 150’, 150, 150, true); → 150×150
  3. add-image-size(‘thumb 320’, 320, 180, true); → 320×180

ここに、新たにサムネイルのサイズを指定して追加登録します。

子テーマの「functions.php」に以下をコピペします。

add-image-size('thumb250',259,160,true);

サムネイル画像のサイズは以下のサイトを参考にして決めました。

http://voidism.net/metallicratio/

黄金比や白銀比、4:316:9といった画像サイズpxが確認できます。お好みのサイズを指定してください。

追加したサイズのサムネイルを表示させる

次に、追加で登録したサムネイルサイズが表示されるように設定を変更します。これは「entry-card.php」を編集することになります。

entry-card-php」は親テーマにしか存在していません。そこで、親テーマの「entry-card.php」を子テーマヘコピペします。

FTPソフトでサーバーへ接続し、「wp-content/themes/simplicity/」のフォルダから、「wp-content/themes/simplicity-child」のフォルダへコピペします。FTP ソフトの使い方はこちらを参考にどうぞ。

参考

FileZilla Macへのインストールと設定方法 初心者でもできる

entry-card.php」を子テーマへコピペするとWordPressのカスタマイズ画面で子テーマsimplicity-childから「entry-card.php」を編集できます。

「entry-card.php」の中にある、thumb150」を「thumb250」に変更します。

<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb250', array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>

スタイルシート「style.css」で調整 サムネイル再生成

スタイルシートCSSstyle.css」に以下を記述して見た目を調整します。

/* サムネイルサイズ指定 */
.entry-thumb img {
    width: 259px; !important;
    height: 160px; !important;
    margin-bottom: 40px;
}
/* 記事タイトルなどの位置 */
.entry-card-content {
    margin-left: 270px; !important;
}

あとは、サムネイル画像を再生成するプラグイン「Regenerate Thumbnails」を実行します。インストールしていない人はインストールしましょう。

モバイルはデフォルト(正方形)で表示したい

上記手順でPC表示はうまくいきました。スマホでの表示はデフォルトの正方形100×100pxで表示したく、mobile.cssをいろいろいじったのですが、うまくいきません 。表示が崩れる

ググってもそれっぽい答えが出てこない、ギブアップ、、、、

というわけでSimplicityのフォーラムで質問してみました。サポート対象外かも? と思いつつ質問しましたが、心優しき方(かうたっくさん)が回答してくださいました。

https://wp-simplicity.com/suport/topic/%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7-%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB-pc%E3%81%A8%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E8%A1%A8%E7%A4%BA/

回答としては、

.entry-thumb img { object-fit: cover; }

mobile.cssに記述するだけ。 「CSS 画像きれいに表示」で調べれば出てくるよと教えていただきました。

このコードはどういう意味だ? と気になったので、さっそくググッてみる。

object-fit: cover; で、画像のアスペクト比(縦横比)を維持したまま指定のサイズにトリミングしてくれるんだってなるほど~、勉強になりました。

これでPC表示、モバイル表示共に思い通りのトップページになりました。かうたっくさんありがとうございます。

マウスオーバーで拡大させる

次にマウスオーバーで拡大させる方法です。マウスをサムネイルの上にもってきたら、画像が動くやつです。以下のコードをスタイルシートstyle.cssに記述します。

/* トップページのサムネイルを拡大 */
/* サムネイル領域を固定 */
.entry-thumb{
width: 259px;
height: 160px;
overflow: hidden;
}

.entry-thumnail{
-moz-transition: 0.5s linear;
-webkit-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;
transition: 0.5s linear;
}
/* マウスオンしたとき */
.entry-thumnail:hover {
opacity: 0.6;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

こちらのサイトを参考にさせていただきました。

参考

【Simplicity】トップページサムネイルを「hover」を使ってマウスオンで拡大させる方法

サムネイルをマウスオーバーした時に画像を拡大表示する方法

これでマウスをサムネイル画像の上に持ってくるとヌルっと拡大します。

おわりに

カスタマイズって完全なる自己満足ですね。カスタマイズを通して、phpとかCSSの構造や意味が少しずつ分かってきた気がします。(←気がしているだけw)

こうやって記事にすることでカスタマイズの復習になりますし、同じようなカスタマイズをしようとしている人の役に立てばと思います。

スポンサーリンク
スポンサーリンク