ワードプレスでロゴのサイズと位置の変更―追加CSS設定で超簡単

2025-04-04

Last Updated on 04-04-25 by Shinichi

Table of Contents

ワードプレスでロゴのサイズと位置変更

ワードプレスでブログやサイトを始めて、ロゴはアップロードできたけれど、サイズと位置の変更の方法が分からず悩む場面は多いです。テーマによっては設定メニューにオプションが用意されている場合もありますが、すべてのテーマでうまくいくわけではありません。

私も以前、設定メニューを随手探してみたものの、目的のオプションが見つからず、最終的に「追加CSS」を使う方法にたどり着きました。この方法は、設定メニューが使えない場合にも有効で、自分のデザインに対応したカスタマイズが可能になります。

ロゴの作成法やアップロードの方法は、たくさんのサイトやYouTubeで紹介されています。私もここまではできました。

カスタマイズのメニューから「サイト基本情報」のセクションで、ロゴをアップロードします。しかし、そこから私が使っているCorporate Liteのテーマでは、ロゴのサイズも位置も全く設定できませんでした。

それでも、最終的に英語のYouTubeの解説を参考にして、追加CSSを用いて問題を解決しました。この設定方法は、これまで悩んでいた人にとって大変有益なものです。

追加CSSに以下のコードを追加します：

img.custom-logo {
    max-width: 100px;
    position: absolute;
    padding-left: 300px;
}

max-width: この数値を変更することで、ロゴの大きさを調整できます。これは、サイトに最適なサイズを選択できる設定です。
position: absolute;: このコマンドは、ロゴをヘッダーの部分から切り離するための設定です。これを使うことで、ロゴを自由に移動させることが可能になります。
padding-left: この値を大きくすると、ロゴを右側に移動させることができます。右側のバランスを重視するときに有効です。
padding-top: この値を変更することで、ロゴを下方に移動させることも可能です。上下の位置調整に重要な設定です。

max-width: Padding-left:の後の数字とロゴの大きさと位置の相関を確認してみて下さい。

これらの設定を馬鹿演して調整することで、ロゴのサイズや位置を自分の主導機能に合わせることができます。これは、サイトのユーザー賞性やブランドイメージの向上に直結します。

追加CSSを使うことで、ワードプレスのテーマによらず、ロゴのサイズや位置を自由に調整することが可能です。お役に立てれば幸いです。

リンク