2016.02.18もう少しトップページを動的なものにしたいと思ってカスタムしていみました。他のブログテーマでたまに見かける「マウスオン(オーバー)すると画像が拡大する」って言うのをどうしてもやりたくて、初心者ながら挑戦してみました!このサイトのトップページを見て頂くと意味が分かると思います!※現在は一時削除しています。編集は「子テーマ」で行うWordPressをカスタムする際の下準備は【Simplicity】ブログカスタムする時に用意したもの4つを参考にしてください。【Simplicity】ブログカスタムする時に用意したもの4つ僕のブログは「Simplicity」を利用させて頂いています。Simplicityの開発コンセプトが「カスタマイズのベースになるもの」だそうなので、そのまま使用するとかなりシンプルです。他にもこのテーマを使用している方はたくさんいらっしゃいparu-log.net「entry-card.php」を子テーマにコピーサーバー上のWordPressインストールディレクトリ内wp-content/themes/simplicityここが親テーマのディレクトリになります。その中から「entry-card.php」を子テーマのディレクトリwp-content/themes/simplicity-childここへコピーします。子テーマのディレクトリ内にある「style.css」に以下のソースをコピペします。scale(1.2);}「.entry-thumb」の部分でサムネイルの大きさを固定しています。画像を拡大する事によって、指定範囲からはみ出してしまうのを防ぐ為です。僕は150×150pxのサイズですが、違うサイズのサムネイルを使用している場合はここを変更する必要があります。liner」の部分は拡大に何秒かけるか?と言う意味です。この数字を大きくすればゆっくり拡大する事になります。「.scale-img:hover」の部分でマウスオーバーした時にどれだけ拡大するかを指定しています。「scale(1.2)」は「120%の大きさに拡大する」と言う意味です。「scale(1.0)」とすると大きさは100%のままになるので変化しないと言う事になります。「entry-card.php」の中身を書き換える現在の僕の「entry-card.php」は以下の様になっています。--></div>変更した部分は6行目と14行目の「entry-thumnail」を「scale-img」に書き換えただけです。上のソースをそのまま「entry-card.php」の中身と置き換えて正常に動かない場合は、Simplicityのバージョンによってクラス名など変更になっている可能性があるので直接編集した方が良いと思います。動作確認これは本当に簡単です。トップページを表示して、サムネイル部分にマウスを乗せてみるだけです!拡大されれば成功、何も起こらなければ失敗です。まとめとりあえず、狙い通りにには動くようになったのですが・・・。スマホでも同じ挙動になっているんですよね(笑)スマホやタブレットではもちろん、マウスオーバーなど無いので要らない機能ですね。その辺も勉強が必要ですね。今回は以下のサイト様を参考にさせて頂きました!ありがとうございます!Simplicityのトップページ等のリスト表示をサムネイルカード方式に変更するカスタマイズ方法アイキャッチ画像のサイズ変更方法にて、以下のような質問をいただきました。TOPページのアイキャッチ画像を大きいサイズに変更する方法をご教示頂けないでしょうか。LINEぱるしをフォローするぱるしぱるログ関連記事WordPress【Simplicity】パソコン用広告ウィジェットの保存がいつまでたっても終わらない時の解決方法Simplicity用の「パソコン広告用ウィジェット」にアドセンスのコードを貼り付け、保存ボタンを押しても一向に保存が終わらない・・・。そんな時の解決方法です。ロリポップサーバーをご利用の方限定の対処法ですが、その他のサーバ...2016.02.12WordPress【Simplicity】モバイルメニューが正常に表示され無い!原因はあのプラグインインターネットに関して時代はモバイルファースト。スマホでのウェブページを見る人がPCに比べて圧倒的に多い時代です。ブログもスマホでのユーザビリティを一番に考えなければいけません。ログのWordpressテーマは「Simp...2016.09.22WordPress【Simplicity】バージョン2に移行!移行時の注意点と変化点のまとめこの「ぱるログ」はSimplicity1.7.8.eをずっと使っていました。古いし、新しいバージョンに乗り換えてみようと思い、絶賛人柱中のバージョン2.0β版を導入してみる事にしましたー。Plus」と言うのがあります。僕のブログでも使っていたのですが、表示が崩れると言う問題があったため最近は...2016.08.09WordPress【Simplicity】ブログカスタムする時に用意したもの4つ僕のブログは「Simplicity」を利用させて頂いています。Simplicityの開発コンセプトが「カスタマイズのベースになるもの」だそうなので、そのまま使用するとかなりシンプルです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。(13)ホームブログ運営WordPressスポンサーリンクスポンサーリンクよく読まれています!iQOS(アイコス)遂にiQOSアイコスの寿命が来た。使用10ヶ月でiQOSアイコスにこんな症状が出てます。