サポート » 使い方全般 » Lightningでヘッダーロゴの大きさ変更の仕方

  • はじめまして。
    Ligtningを使っています。
    ヘッダーロゴを大きくする方法がわからないので、教えていただけませんでしょうか。

    ネットで検索すると「BizVektor」のテーマでの変更方法は記載があるのですが、Ligtningの方法がわかりません。
    ちなみに、「BizVektor」のテーマと同じく、「外観」→「テーマの編集」→「Lightning: スタイルシート (style.css)」に
    #header #site-title a img { max-height:60px;margin-top:3px; }
    を入れてみたのですが、だめでした。

    初心者ですので、お手柔らかにお願いします。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • 大きいサイズのロゴをアップロードしても同じですか。
    max-height:60px;と、されていることから60px以上でアップロードしてあるんですね。

    トピック投稿者 ishigakipakira

    (@ishigakipakira)

    ロゴは
    319 kB
    4772 × 820 のサイズのロゴをアップしているんですが、小さいままです。

    「BizVektor」のテーマと同じく
    #header #site-title a img { max-height:60px;margin-top:3px; }
    を入れると このソースの字が反映
    <header #site-title a img { max-height:60px;margin-top:3px; }
    で入れると、文字は出ませんが、変化なしです。

    トピック投稿者 ishigakipakira

    (@ishigakipakira)

    ちなみに
    max-height:60px の60pxを300pxなどに変えても変化なしです。

    なぜ max-height にしたの?

    試しに 260px にしましたが、問題なくサイズ変更できています。
    http://wp.me/P5ZPvS-b

    デベロッパーツールで要素を見てご覧なさい。「BizVektor」のテーマと同じと判断したのはなぜでしょう。

    トピック投稿者 ishigakipakira

    (@ishigakipakira)

    ありがとうございます。

    私は初心者なので、もう少し詳しく教えてください。
    Ligtningのどこのページで、どこを変更すれば ヘッダーロゴの大きさを変更できますか?

    よろしくお願いします。

    プロパティをカスタムCSSで上書きすれば良いです。

    Ligtningのどこのページで、どこを変更すれば ヘッダーロゴの大きさを変更できますか?

    「BizVektor」のテーマでの変更方法と道理は同じです。その点は、ご理解されていることを前提にしています。
    「BizVektor」もLigtningも設計的には同線上です。だからといって、クラス名は同じにするとメンテナンス作業で混乱することもあるので、テーマ固有にクラス名をつけることは普通ではないかと思います。

    故に、デベロッパーツールで要素を再度確認してくださいと、おすすめします。スタイルシートの末尾に追記してもプロパティは上書きされますが、自動更新でテーマがアップデートされると、追記はクリアされてしまいますのでカスタムCSSが良いです。

    詳しくも何も、理解はどうでもいいから丸写しで良いという向きには、
    具体的には、デベロッパーツールで
    http://wp.me/P5ZPvS-b
    を観れば、わたしがどこのページで、どこを変更しているかは隠しようがなく明確に丸わかりです。

    こんにちは、ishigakipakira さん。

    CSS のことになり、WordPress とは関係のない回答になってしまうのですが・・・

    max-height
    これ以上広がらないで!これ以上にならなきゃ、なんでもいいよ♪
    min-height
    最低これだけ必要なの!多いぶんにはいいのよ♪
    height
    多くても少なくてもダメ!キッチリしないとね♪
    ※ auto を指定した場合はルーズに。デフォルト: auto

    簡単にいうとこんな感じです(たぶん)。ですので、ロゴが小さいのは、ロゴの画像またはデザインされている領域がそもそも小さいのではないでしょうか?

    4772 × 820px の画像をロゴに設定した場合、max-height: 60px; の効果で、349 x 60px に縮小表示されます。元の画像のデザインや余白にもよりますが、確かに小さくなると思います。

    CSS を編集するのが難しいようであれば、ロゴの方を編集するのはいかがですか?

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「Lightningでヘッダーロゴの大きさ変更の仕方」には新たに返信することはできません。