WPtouch Pro のトップページをカスタマイズ サムネイルを大きくする
※更新
スマートフォンからのアクセスを多くいただくようになりまして、勢いで買った WPtouch Pro もおかげさまで活躍中です。
同梱されてるテーマそのままでも全く十分なのですが、写真好きの僕ですので、トップページに表示されるサムネイルのサイズを少しだけ大きくしてます。
デフォルトは 46px なのを 70px にしましたのでそのメモです。
WPtouch Pro 側の設定
デフォルトではカレンダーアイコンで記事の投稿日が表示されてます。
Active Theme > Style / Appearance > Calendar/Thumbnail Icons から 『WordPress Thumbnails/Featured Image』を選ぶことで、サムネイルが表示されるようになります。
またその下、Thumbnail Icons から Classic thumbnails を希望のサイズへ、僕の場合は 70px へ変更しました。
WordPress 側の設定
WordPress の使用テーマ内、functions.php に以下を追記します。
|
1 |
set_post_thumbnail_size( 70, 70, true ); |
幅 70px、高さ 70px、切り抜きモードです。この設定で、次回の画像のアップロードから指定したサイズのサムネイルが自動で作られます。
過去の画像のサムネイルを作成
では過去の画像は・・・となりますが、ここはプラグイン、Regenerate Thumbnails に助けてもらいました。
名前通り、設定したサイズで新たにサムネイルを作ってくれます。
CSSの変更
まずはサムネイル自身を 70px にします。
|
1 2 3 4 5 6 7 |
.post img.attachment-post-thumbnail{ /* width:46px; */ /* height:46px; */ width:70px; height:70px; border:2px #FFF } |
次はその周りの部分。70-46=24。それぞれに24px足していくだけ・・・ではありませんでした。
コメント数をあらわすバブルがサムネイルの角に来てませんし、タイトルが長いとタグやカテゴリーがズレてしまいますので微調整。
またタイトルの右側に不自然なスペースができましたので、それも微調整しました。
|
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 |
.generic .comment-bubble { /* left:37px */ left:66px } .generic .comment-bubble.double { /* left:32px */ left:60px } .post h2 { /* margin-right: 9%; */ /* margin-left: 50px; */ margin-left: 78px; } .date-author-wrap .date, .date-author-wrap .post-author { /* margin-left:54px */ margin-left:78px } .post .tags-and-categories { /* margin-left:54px */ margin-left:78px } |
こうして編集した style.css をサイズを圧縮し、style.min.css としてアップロードして完了です。
CSS圧縮のウェブサービスでは webkit系のプロパティが削除されてしまいますので、自前で圧縮してアップロードしました。
ad
公開： | 更新： | WPtouch Pro WPtouch Pro
ad
関連記事
新着記事
-
-
薪割り機のエンジン、しばらくぶりの火入れ式
去年買って大活躍してくれたエンジン式薪割り機。そこまで長く寝か...
-
-
2016年フォルクスワーゲン冬のキャンペーンの写真が素晴らしい
フォルクスワーゲンジャパンの今年の冬支度を呼びかけるサイトの写...
-
-
薪ストーブの煙突掃除
薪ストーブの煙突掃除に挑戦です。 屋根に登っての作業がベ...
-
-
ワーゲンバスはやっぱり「遊び」のシンボルだ
ワーゲンバス、安定して広告に使われてますね。今は売られてないクルマなの...
-
-
過去記事を検索できる！ buslog Antenna をアップデートしました
めっちゃ久しぶりに、空冷ワーゲンブログを巡回して一覧にする『b...
