【Luxeritas】関連記事のサムネイル画像サイズを変更する方法

2025年7月9日WordPress

この記事では、WordPressの「Luxeritasルクセリタス」テーマで記事末尾にある関連記事のサムネイル画像サイズを調整する方法を書きます。

子テーマの編集（style.css）にCSSを書き込みます。

「Luxeritas」の関連記事のサムネイル画像サイズをCSSで変更した比較画像

僕はWordPressブログで「Luxeritas」テーマを使っています。

デフォルトでは記事末尾に設置した関連記事のサムネイル画像は正方形になっています。横長のサムネイルを使っている場合は、無理やり調整されるため比率がおかしくなります。

横長のサムネイルを使っていて、関連記事も比率を維持したまま横長で表示させたい方のためにカスタマイズ方法を紹介します。実際当サイトも使っています。

1. 関連記事に表示する画像サイズを調整するCSS
2. 感想

関連記事に表示する画像サイズを調整するCSS

子テーマの編集ページを開く

WordPressの管理画面を開いて、左側サイドバーの「Luxeritas」→「子テーマの編集」をクリックします。

CSSを書き込む

「スタイルシート : style.css」ページを開いて、以下のCSSを書き込みます。既に書かれているコードには絶対触れず、一番下をEnterで改行して新しく書き込みます。

CSS

/*関連記事の画像サイズ変更*/
div#related img {
    width: 150px !important;
    height: 100% !important;
}

/*関連記事の画像サイズ変更*/
div#related img {
    width: 150px !important;
    height: 100% !important;
}

「width」の数字を皆さん好きなように調整してみてください。僕のブログだと上記の150pxでちょーどいいと思いましたが、人によって最適は異なります。数字を小さくしたらサムネイル画像も小さくなります。

「height」は比率を合わせるために必要なコードです。

書き込めたら「保存」ボタンを押します。

「Luxeritas」の子テーマの編集（style.css）に関連記事のサムネイル画像サイズを変更するCSSを書き込んでいる画像

ページがリロードされて「変更を反映しました」と表示されたらOKです。

サイズが変わったか確認

自身のブログ記事ページを開きます。既に開いていた場合は一度ページをリロードします。

関連記事のサムネイル画像が指定したサイズで表示されます。

やっぱり表示させたくなったら書き込んだCSSを削除します。

PC・スマホで見た時で変えたい場合

以下のようにメディアクエリの「max-width」と「min-width」を使い分けます。

CSS

/*関連記事の画像サイズ変更（スマホ版）*/
@media screen and (max-width: 640px) {
    div#related img {
        width: 100px !important;
        height: 100% !important
    }
}

/*関連記事の画像サイズ変更（PC版）*/
@media screen and (min-width: 641px) {
    div#related img {
        width: 150px !important;
        height: 100% !important;
    }
}

/*関連記事の画像サイズ変更（スマホ版）*/
@media screen and (max-width: 640px) {
    div#related img {
        width: 100px !important;
        height: 100% !important
    }
}

/*関連記事の画像サイズ変更（PC版）*/
@media screen and (min-width: 641px) {
    div#related img {
        width: 150px !important;
        height: 100% !important;
    }
}