Simplicityでサムネイル画像のサイズ変更とマウスオーバーで拡大させる方法

カスタマイズ

WordPressテーマ「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);

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

METALLIC RATIO／貴金属比（黄金比・白銀比などを計算）

黄金比や白銀比、4:3や16:9といった画像サイズのpx（ピクセル）が確認できます。

お好みのサイズを指定してください。

サムネイルのサイズ変更│追加した画像サイズを表示

次に、追加で登録したサムネイルサイズが表示されるように設定を変更します。

これは「entry-card.php」を編集することになります。

「entry-card-php」は親テーマにしか存在していません。

そこで、親テーマの「entry-card.php」を子テーマヘコピペします。

  1. FTPソフトでサーバーへ接続し、
  2. 「wp-content/themes/simplicity/」のフォルダから、
  3. 「wp-content/themes/simplicity-child」のフォルダへコピペ

これで子テーマに「entry-card.php」がコピペされました。

FTPソフトの使い方は以下で詳しく紹介しています。初心者向けに書いています。参考にどうぞ。

FileZilla for 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」で調整、サムネイル再生成

スタイルシートCSS「style.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のフォーラムで質問してみました。

サポート対象外かも? と思いつつ質問しましたが、心優しき方（かうたっくさん）が回答してくださいました。

記事一覧 サムネイル PCとモバイル表示

回答としては、

.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）

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

にほんブログ村 その他生活ブログへ
にほんブログ村