【SIMPLESTER】タイトルロゴの表示が小さい場合のカスタマイズ

テーマや子テーマのコードを直接触るカスタマイズを行っていきます。

コードのカスタマイズは、やたらめったらいじくり回すとどこをどう修正したかわからなくなる上、思わぬ不具合が起こる可能性があります。

＊たのちんが行ったプラグインなしのブログカスタマイズ

たのちんでは今のところ動作不良や不具合などは起こっていないと認識していますが、どなたの環境でもそれを保証するものではありません。

  必ずバックアップやローカル環境でチェックを行ったうえで実施してください。

たのちんではトラブルに対する責任を負うことはできませんので、ご自身の判断の元で便利に快適に楽しく行ってください(∩´∀｀)∩♪

 

スポンサーリンク

 

ロゴ画像の表示サイズを変更しよう

ロゴ画像の設定が済みました。

子テーマにSIMPLESTERを採用している場合、タイトルのロゴマークを設置した時に画像のサイズによっては表示が小さくてバランスがおかしいな？と思う場合があります。

この部分を修正するには、テーマのスタイルシート（CSS）を触ります。

まずはWordPressの管理画面にログインして、サイドバーの「外観」から「テーマの編集」をクリックします。

  編集するテーマはSIMPLESTERです。

見た目の調整をしますので、スタイルシート（CSS）を編集します。

上から36行目くらいに「header周り」に関係するコードが書かれています。

ここにヘッダーに関する設定が書かれています。

今回はタイトルロゴ画像を表示するサイズを変更したいので、

/*header 周り --------------------*/ .sitename img{ max-height: 25px; }

の部分を、

/*header 周り --------------------*/ .sitename img{ max-width:350px }

に変更しました。

変更後は忘れずに、ファイルを更新します。

  max-heightというのは、高さの最大値を指定するコードです。

「SIMPLESTER」では、初期設定の25pxから50pxへの変更を推奨されていましたので、最初そのように設定してみましたが、たのちんのロゴ画像は横に長い形になっているのであまりキレイに表示させることができませんでした。

 icon-caret-right そこで、max-widthという幅の最大値を指定するコードに書き換えてみました。

スマホでの表示も確認してみましたが、今のところおかしな表示にはなっていないようなので一旦これで完成にしています。

ロゴ画像の上下左右のバランスによって指定する数値は変わると思いますので、調整してみてください。

  たのちんのロゴ画像は、このようになりました。

最初と比べると、全然違いますね。

おつかれさまでした(*´ω｀)

 

たのちんが行っているカスタマイズ一覧はこちら

＊たのちんが行ったプラグインなしのブログカスタマイズ

 

-ワードプレスの使い方
-SIMPLESTER, カスタマイズ