もう少しトップページを動的なものにしたいと思ってカスタムしていみました。
他のブログテーマでたまに見かける
「マウスオン（オーバー）すると画像が拡大する」
って言うのをどうしてもやりたくて、初心者ながら挑戦してみました！
このサイトのトップページを見て頂くと意味が分かると思います！※現在は一時削除しています。
下準備
編集は「子テーマ」で行う
WordPressをカスタムする際の下準備は【Simplicity】ブログカスタムする時に用意したもの４つを参考にしてください。
「entry-card.php」を子テーマにコピー
サーバー上のWordPressインストールディレクトリ内
wp-content/themes/simplicity
ここが親テーマのディレクトリになります。
その中から「entry-card.php」を子テーマのディレクトリ
wp-content/themes/simplicity-child
ここへコピーします。
サムネイルを拡大させる
子テーマの「style.css」に追記
子テーマのディレクトリ内にある「style.css」に以下のソースをコピペします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* トップページのサムネイルを拡大 */ /* サムネイル領域を固定 */ .entry-thumb{ width: 150px; height: 150px; overflow: hidden; } .scale-img{ -moz-transition: 0.2s linear; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; -ms-transition: 0.2s linear; transition: 0.2s linear; } /* マウスオンしたとき */ .scale-img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } |
「.entry-thumb」の部分でサムネイルの大きさを固定しています。
画像を拡大する事によって、指定範囲からはみ出してしまうのを防ぐ為です。
僕は150×150pxのサイズですが、違うサイズのサムネイルを使用している場合はここを変更する必要があります。
「.scale-img」の部分の「0.2s liner」の部分は拡大に何秒かけるか？と言う意味です。
この数字を大きくすればゆっくり拡大する事になります。
「.scale-img:hover」の部分でマウスオーバーした時にどれだけ拡大するかを指定しています。
「scale(1.2)」は「１２０％の大きさに拡大する」と言う意味です。
「scale(1.0)」とすると大きさは１００％のままになるので変化しないと言う事になります。
「entry-card.php」の中身を書き換える
現在の僕の「entry-card.php」は以下の様になっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<?php //投稿をのリスト表示のループ内で呼び出されるサムネイルカード ?> <div id="post-<?php the_ID(); ?>" <?php post_class('entry'.(is_list_style_large_thumb_cards() ? ' entry-large-thumbnail' : '').(is_list_style_thumb_cards() ? ' entry-card' : '')) ?>> <div class="entry-thumb"> <?php if ( is_list_style_thumb_cards() ): //デフォルトのサムネイルカード表示の場合?> <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?> <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb150', array('class' => 'scale-img', 'alt' => get_the_title()) ); ?></a> <?php else: // サムネイルを持っていない ?> <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" /></a> <?php endif; ?> <?php else: //大きなサムネイルカードの場合?> <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき //サムネイル画像の縦横比を保存するかどうかで取得するサムネイルを変化 $thumb = ( is_list_style_tile_thumb_cards_raw() ? 'thumb320_raw' : 'thumb320') ?> <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb , array('class' => 'scale-img', 'alt' => get_the_title()) ); ?></a> <?php else: // サムネイルを持っていないとき ?> <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" /></a> <?php endif; ?> <?php endif; ?> </div><!-- /.entry-thumb --> <div class="entry-card-content"> <h2><a href="<?php the_permalink(); ?>" class="entry-title entry-title-link" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <p class="post-meta"> <?php if ( is_create_date_visible() ): //投稿日を表示する場合?> <span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published"><?php the_time( get_theme_text_date_format() ) ;?></span></span> <?php endif; //is_create_date_visible?> <?php if ( is_category_visible() && //カテゴリを表示する場合 get_the_category() ): //投稿ページの場合?> <span class="category"><span class="fa fa-folder fa-fw"></span><?php the_category(', ') ?></span> <?php endif; //is_category_visible?> <?php //コメント数を表示するか if ( is_comments_visible() && is_list_comment_count_visible() ): $comment_count_anchor = ( get_comments_number() > 0 ) ? '#comments' : '#reply-title'; ?> <span class="comments"> <span class="fa fa-comment"></span> <span class="comment-count"> <a href="<?php echo get_the_permalink() . $comment_count_anchor; ?>" class="comment-count-link"><?php echo get_comments_number(); ?></a> </span> </span> <?php endif ?> </p><!-- /.post-meta --> <p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?></p> <?php if ( get_theme_text_read_entry() ): //「記事を読む」のようなテキストが設定されている時 ?> <p class="entry-read"><a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a></p> <?php endif; ?> </div><!-- /.entry-card-content --> </div> |
変更した部分は６行目と１４行目の「entry-thumnail」を「scale-img」に書き換えただけです。
上のソースをそのまま「entry-card.php」の中身と置き換えて正常に動かない場合は、Simplicityのバージョンによってクラス名など変更になっている可能性があるので直接編集した方が良いと思います。
動作確認
これは本当に簡単です。
トップページを表示して、サムネイル部分にマウスを乗せてみるだけです！
拡大されれば成功、何も起こらなければ失敗です。
まとめ
とりあえず、狙い通りにには動くようになったのですが・・・。
スマホでも同じ挙動になっているんですよね(笑)
スマホやタブレットではもちろん、マウスオーバーなど無いので要らない機能ですね。
その辺も勉強が必要ですね。
今回は以下のサイト様を参考にさせて頂きました！
ありがとうございます！
コメント