賢威の画像サイズがはみ出す?サイト幅に自動変更カスタマイズ!

今回は、
WordPressテーマ賢威の
画像をサイトからはみ出さないように
するカスタマイズ方法を紹介します。
 

賢威のデフォルトの状態ですと、
大きなサイズの画像を貼り付けた場合、
記事サイズの幅からはみ出して表示されて
しまいます。

その対策として、
記事サイズよりも大きな画像を
貼り付けた場合は、

自動で記事サイズに収まるように
サイズ調整してくれる設定を行います。
 

また、
ヘッダー画像のサイズの
合わせた方も紹介します。

簡単なカスタマイズですので、
ぜひ設定してみてください。

賢威の画像サイズはみ出し防止設定!サイト幅に自動変更のカスタマイズ!

ダッシュボードの「外観」
→「テーマの編集」
→「design.css」をクリック。
賢威 画像 サイズ はみ出す サイト幅 自動 変更 カスタマイズ 外観 テーマの編集 賢威 画像 サイズ はみ出す サイト幅 自動 変更 カスタマイズ 外観 テーマの編集design.css

「design.css」は
デザインを管理するためのCSSです。
※参考→賢威6.2のテンプレート一覧(phpとcss)

「design.css」に以下を追加します。

※場所はどこでも問題ありませんが、
 「/*●メイン画像*/」の下に追記すると
 後々わかりやすいです。

 
また、サイドバーに表示した画像も
はみ出さないように以下を入力します。

これは、画像の横幅を
記事枠内に収めるというコードです。

そして、
高さは画像の縦横比を変えないように
自動で調整してくれます。
 

コードの入力が終わったら、
【ファイルを更新】をクリックして完了です。
賢威 画像 サイズ はみ出す サイト幅 自動 変更 カスタマイズ 外観 テーマの編集 ファイルを更新
 

以上の設定で、
画像サイズが記事枠サイズよりも大きい
場合でも、自動的に記事枠内に収まるように
画像のサイズ調整が行われます。

賢威のヘッダー画像のサイズの合わせ方

ヘッダー画像のサイズは、
サイトの横幅に合わせると良いので、
サイトの横幅をまず確認します。

ダッシュボード「外観」
→「テーマ編集」→「layout.css」
をクリック。
賢威 ヘッダー 画像 変更 カスタマイズ 幅 サイズ 外観 テーマの編集 賢威 ヘッダー 画像 変更 カスタマイズ 幅 サイズ layout.css

「layout.css」は
レイアウトを管理するためのCSSです。
サイトの横幅を指定しています。

※参考→賢威6.2のテンプレート一覧(phpとcss)

「layout.css」を開いたら、
「px」で検索してみてください。

※検索はショートカットキー「CTRL + F」

サイト横幅は
1~3カラムごとに設定されていますが、
デフォルトの状態から変更していなければ
全て同じサイズのはずです。

「950px」と表示されている
のではないでしょうか?

これがサイトの横幅ですので、
このサイズに画像を合わせて準備します。
 

ヘッダー画像のカスタマイズは
以下で詳しく説明していますので、
参考にしてください。
賢威ヘッダーを画像へ変更カスタマイズ!幅や高さサイズは?
 

また、画像ではな
YouTube動画のはみ出し防止設定は
以下を参考にしてください。
WoordPress賢威でのYouTube動画サイズ自動調整設定

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




8件のコメントがあります

  1. 小西 より:

    はじめまして!
    賢威6.2をワードプレスで使用してますが、
    ユーチューブ動画が横幅はいいのですが、
    縦幅が狭く「テキスト画面で【height】を変更しても、
    ユーチューブから埋め込みコードを取り直す時、
    大きさを変えてみても横長にしか反映されず、
    困ってます。
    上記にあるdesign.cssに追記がありますが、
    design.cssのどの部分に追記すればいいのでしょうか?
    それとも他に考えられる原因はあるでしょうか?
    何卒、御教授いただければと思い、メールしました!
    よろしくお願いいたします!

  2. affikatsu.com より:

    小西さん、コメントありがとうございます。

    コードの入力位置に関してですが、
    本文に以下のように説明を追記しました。
    *************
    ※場所はどこでも問題ありませんが、
     「/*●メイン画像*/」の下に追記すると
     後々わかりやすいです。
    *************

    Youtubeに関してはこちらの記事が参考になると思います。
    YouTube動画のレスポンシブ対応

    また、不明点などありましたらご連絡頂ければと思います。

  3. nishi より:

    初めまして。

    賢威6.2を3カラムで使っているのですが、
    記事の一番上に画像を挿入しようと考えています。

    色々検索している中で、
    分かりやすいこちらのサイトに辿りつきました!

    この時に挿入した画像のサイズに関係なく、
    閲覧している画面(スマホやPC)に合わせて
    サイズを自動で調整してくれる!

    といった解釈で合っているでしょうか?

    そしてここで使った画像とアイキャッチ画像は
    また別物なのでしょうか?

    もしかするとトンチンカンなこと言ってるかも知れませんが^^;
    アドバイス頂ければ幸いです。

  4. affikatsu.com より:

    nishiさん、コメントありがとうございます。

    >挿入した画像のサイズに関係なく、
    >閲覧している画面(スマホやPC)に合わせて
    >サイズを自動で調整してくれる!

    「画面に合わせてサイズを自動調整してくれる」というと少し誤解が生じてしまうかもしれません。
    今回紹介した設定は、枠からはみ出す場合にはみ出さないように自動調整してくれます。

    画像サイズが小さい場合は、枠に合わせて大きくする訳ではありません。小さいサイズの場合はそのままのサイズになります。

    >ここで使った画像とアイキャッチ画像は
    >また別物なのでしょうか?

    記事内に表示される画像すべてに適用される設定です。

    不明点などありましたらまた気軽にコメントください。

  5. nishi より:

    早速のアドバイスありがとうございます!

    CSSを追加してみたのですが、画像が大きいままはみ出てしまいます。
    コードを貼った前後はここなのですが合っているでしょうか?

    /*——————————————————–
    コンテンツ全体
    ——————————————————–*/

    #main-in{ padding-top: 1.5em; }

    /*●メイン画像*/
    .post img {
    max-width:100%;
    height:auto;
    }

    #sidebar img{
    height:auto;
    max-width:100%;
    }

    #main-image{
    padding-top: 1.5em;
    }

  6. affikatsu.com より:

    nishiさん、コード合ってます。

    基本的にコードを入力する場所はどこでも問題ありませんので、これでサイズが自動調整されるはずです。

    他で画像関連のコードなどを追記されたりしてないかも確認ください。

    賢威のデフォルトの状態から、ここで紹介しているコードを追記すれば、画像が自動調整されます。

  7. nishi より:

    お返事ありがとうございます。

    何度も睨みつけながらやってみました。
    最初の「 img 」と「 { 」の間にスペースが入ってました><

    これを詰めると全てが上手くいきました!
    おかげさまで一人でやるよりも安心して出来ました。

    とても為になる情報とアドバイスありがとうございます!

    また色々と参考(勉強)させてください^^
    感謝感謝です。

  8. affikatsu.com より:

    nishiさん、上手く設定できたようで良かったです。

    私の場合は半角スペースがあっても問題なかったんですが、そこが原因だったんですね。
    同じようなことでエラーにならないよう記事内の表記もスペースをなくしておきました。

    報告ありがとうございました。
    また他の記事も参考にして頂いて、疑問点などあればコメント頂ければと思います。

コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA