マナブログコピーのサムネイルサイズを変更する方法【WordPress】

今回の記事も、マナブさん（@manabubannai）が販売しているWordPressテーマ manablog_copy（マナブログコピー） について書いていきます。

マナブログコピーでは、記事一覧と記事詳細ページにサムネイルを表示されるようになっていますが、これまで別のテーマで運用されてきた方など、サムネイルサイズを変更したい場合もあるかもしれません。

マナブログコピーの場合には、PHPファイルを編集せずにサムネイルサイズを変更することもできるので、今回はCSSと管理画面のみでサムネイルサイズを変更する方法について書いていきたいと思います。

記事詳細ページのサムネイルサイズを変更する

記事詳細ページのサムネイルサイズは、WordPress管理画面から簡単に変更することができます。

まずは画像サイズの設定を変更

管理画面のサイドバーにある 設定 > メディア のページに移動します。

メディアの設定ページから、画像サイズを変更することができるので、これまでのテーマで使ってきた画像サイズなど、お好みのサムネイルサイズを入力して、変更を保存ボタンをクリックします。

サムネイルを作り直す

メディアの設定ページでサムネイルを設定しても、サムネイルサイズは変更前と変わらないかもしれません。こういう時に便利なのが、「Force Regenerate Thumbnails」というプラグインです。

※ これまで自分も何度も使ってきているので大丈夫だとは思いますが、最近アップデートされていないようなので、利用は自己責任でお願いします。

「Force Regenerate Thumbnails」の使い方は簡単で、インストールが完了したら、WordPressの管理画面から

「ツール」→「Force Regenerate Thumbnails」

を選択し、「すべてのサムネイルを再生成する」というボタンを押すだけです。

これでサムネイルが登録したサイズで再生成されます。
（記事の量によっては時間がかかるかもしれません）

これで記事詳細ページの画像が、指定したサイズで表示されるはずです。

記事一覧のサムネイルサイズを変更する（style.cssファイルを編集）

トップページとアーカイブページのサムネイルサイズを変更

トップページやアーカイブページなどの記事一覧ページのサムネイルサイズは、CSSで変更することができます。

（できれば子テーマの）style.cssファイルに以下のコードを追加します。ここではPCのサムネイルサイズを400px、スマホのサムネイルサイズを200pxに設定しましたが、お好みに合わせて調整してみて下さい。

main .wrap .thumbnail a {
    height: 400px;        /* ← PCでは400pxに設定 */
}

@media only screen and (max-width: 479px) {
    main .wrap .thumbnail a {
        height: 200px;        /* ← スマホでは200pxに設定 */
    }
}

※ 今回のようなカスタマイズの場合には、子テーマのstyle.cssファイルにCSSを書いていくと便利なので、子テーマを使える状態になっている方は、子テーマのstyle.cssにCSSを書いていくのがオススメです。もしまだ子テーマを作っていないという方は、こちらの記事で紹介しているので、よかったら参考にして下さい。

サイドバーのサムネイルサイズを変更

サイドバーのサムネイルサイズも、トップページなどのサムネイルと同じように、CSSで変更することができるので、style.cssファイルに、以下のコードを追加すればOKです。

.popular .thumbnail a {
    height: 200px;        /* ← 200pxに設定 */
}

今回の記事は以上になります。最後まで閲覧ありがとうございました。