*

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 に以下を追記します。

幅 70px、高さ 70px、切り抜きモードです。この設定で、次回の画像のアップロードから指定したサイズのサムネイルが自動で作られます。

過去の画像のサムネイルを作成

では過去の画像は・・・となりますが、ここはプラグイン、Regenerate Thumbnails に助けてもらいました。

名前通り、設定したサイズで新たにサムネイルを作ってくれます。

CSSの変更

まずはサムネイル自身を 70px にします。

次はその周りの部分。70-46=24。それぞれに24px足していくだけ・・・ではありませんでした。

コメント数をあらわすバブルがサムネイルの角に来てませんし、タイトルが長いとタグやカテゴリーがズレてしまいますので微調整。

またタイトルの右側に不自然なスペースができましたので、それも微調整しました。

こうして編集した style.css をサイズを圧縮し、style.min.css としてアップロードして完了です。

CSS圧縮のウェブサービスでは webkit系のプロパティが削除されてしまいますので、自前で圧縮してアップロードしました。

ad

公開: | 更新: | WPtouch Pro

ad

関連記事

新着記事

薪割り機のエンジン、しばらくぶりの火入れ式

去年買って大活躍してくれたエンジン式薪割り機。そこまで長く寝か...

記事を読む

2016年フォルクスワーゲン冬のキャンペーンの写真が素晴らしい

フォルクスワーゲンジャパンの今年の冬支度を呼びかけるサイトの写...

記事を読む

薪ストーブの煙突掃除

薪ストーブの煙突掃除に挑戦です。 屋根に登っての作業がベ...

記事を読む

ワーゲンバスはやっぱり「遊び」のシンボルだ

ワーゲンバス、安定して広告に使われてますね。今は売られてないクルマなの...

記事を読む

過去記事を検索できる! buslog Antenna をアップデートしました

めっちゃ久しぶりに、空冷ワーゲンブログを巡回して一覧にする『b...

記事を読む

コメントを残す

メールアドレスが公開されることはありません。

ad

薪割り機のエンジン、しばらくぶりの火入れ式

去年買って大活躍してくれたエンジン式薪割り機。そこまで長く寝か...

2016年フォルクスワーゲン冬のキャンペーンの写真が素晴らしい

フォルクスワーゲンジャパンの今年の冬支度を呼びかけるサイトの写...

薪ストーブの煙突掃除

薪ストーブの煙突掃除に挑戦です。 屋根に登っての作業がベ...

ワーゲンバスはやっぱり「遊び」のシンボルだ

ワーゲンバス、安定して広告に使われてますね。今は売られてないクルマなの...

過去記事を検索できる! buslog Antenna をアップデートしました

めっちゃ久しぶりに、空冷ワーゲンブログを巡回して一覧にする『b...

→もっと見る

  • follow us in feedly
  • my bus

    buslogは、Volkswagen Type2(通称ワーゲンバス、略称バス)に乗るmasahiroのサイトです。バスの日々のメンテナンスやドライブ、試したアイテム、バスやクルマ一般についての情報を主に取り上げたブログがメインです。

PAGE TOP ↑