賢威の画像サイズがはみ出す？サイト幅に自動変更カスタマイズ！
今回は、
WordPressテーマ賢威の
画像をサイトからはみ出さないように
するカスタマイズ方法を紹介します。
賢威のデフォルトの状態ですと、
大きなサイズの画像を貼り付けた場合、
記事サイズの幅からはみ出して表示されて
しまいます。
その対策として、
記事サイズよりも大きな画像を
貼り付けた場合は、
自動で記事サイズに収まるように
サイズ調整してくれる設定を行います。
また、
ヘッダー画像のサイズの
合わせた方も紹介します。
簡単なカスタマイズですので、
ぜひ設定してみてください。
賢威の画像サイズはみ出し防止設定！サイト幅に自動変更のカスタマイズ！
ダッシュボードの「外観」
→「テーマエディター」
→「design.css」をクリック。
「design.css」は
デザインを管理するためのCSSです。
※参考→賢威6.2のテンプレート一覧（phpとcss）
「design.css」に以下を追加します。
※場所はどこでも問題ありませんが、
「/*●メイン画像*/」の下に追記すると
後々わかりやすいです。
|
1 2 3 4 |
.post img{ max-width:100%; height:auto; } |
また、サイドバーに表示した画像も
はみ出さないように以下を入力します。
|
1 2 3 4 |
#sidebar img{ max-width:100%; height:auto; } |
これは、画像の横幅を
記事枠内に収めるというコードです。
そして、
高さは画像の縦横比を変えないように
自動で調整してくれます。
コードの入力が終わったら、
【ファイルを更新】をクリックして完了です。
以上の設定で、
画像サイズが記事枠サイズよりも大きい
場合でも、自動的に記事枠内に収まるように
画像のサイズ調整が行われます。
賢威のヘッダー画像のサイズの合わせ方
ヘッダー画像のサイズは、
サイトの横幅に合わせると良いので、
サイトの横幅をまず確認します。
ダッシュボード「外観」
→「テーマ編集」→「layout.css」
をクリック。
「layout.css」は
レイアウトを管理するためのCSSです。
サイトの横幅を指定しています。
「layout.css」を開いたら、
「px」で検索してみてください。
※検索はショートカットキー「CTRL + F」
サイト横幅は
1～3カラムごとに設定されていますが、
デフォルトの状態から変更していなければ
全て同じサイズのはずです。
「950px」と表示されている
のではないでしょうか？
これがサイトの横幅ですので、
このサイズに画像を合わせて準備します。
ヘッダー画像のカスタマイズは
以下で詳しく説明していますので、
参考にしてください。
→ 賢威ヘッダーを画像へ変更カスタマイズ！幅や高さサイズは？
また、画像ではな
YouTube動画のはみ出し防止設定は
以下を参考にしてください。
→ WoordPress賢威でのYouTube動画サイズ自動調整設定
記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。
↓↓↓メルマガ登録は下のフォームから↓↓
無料メールマガジン登録フォーム
はじめまして！
賢威6.2をワードプレスで使用してますが、
ユーチューブ動画が横幅はいいのですが、
縦幅が狭く「テキスト画面で【height】を変更しても、
ユーチューブから埋め込みコードを取り直す時、
大きさを変えてみても横長にしか反映されず、
困ってます。
上記にあるdesign.cssに追記がありますが、
design.cssのどの部分に追記すればいいのでしょうか？
それとも他に考えられる原因はあるでしょうか？
何卒、御教授いただければと思い、メールしました！
よろしくお願いいたします！
小西さん、コメントありがとうございます。
コードの入力位置に関してですが、
本文に以下のように説明を追記しました。
*************
※場所はどこでも問題ありませんが、
「/*●メイン画像*/」の下に追記すると
後々わかりやすいです。
*************
Youtubeに関してはこちらの記事が参考になると思います。
→YouTube動画のレスポンシブ対応
また、不明点などありましたらご連絡頂ければと思います。
初めまして。
賢威6.2を3カラムで使っているのですが、
記事の一番上に画像を挿入しようと考えています。
色々検索している中で、
分かりやすいこちらのサイトに辿りつきました！
この時に挿入した画像のサイズに関係なく、
閲覧している画面（スマホやPC）に合わせて
サイズを自動で調整してくれる！
といった解釈で合っているでしょうか？
そしてここで使った画像とアイキャッチ画像は
また別物なのでしょうか？
もしかするとトンチンカンなこと言ってるかも知れませんが^^;
アドバイス頂ければ幸いです。
nishiさん、コメントありがとうございます。
＞挿入した画像のサイズに関係なく、
＞閲覧している画面（スマホやPC）に合わせて
＞サイズを自動で調整してくれる！
「画面に合わせてサイズを自動調整してくれる」というと少し誤解が生じてしまうかもしれません。
今回紹介した設定は、枠からはみ出す場合にはみ出さないように自動調整してくれます。
画像サイズが小さい場合は、枠に合わせて大きくする訳ではありません。小さいサイズの場合はそのままのサイズになります。
＞ここで使った画像とアイキャッチ画像は
＞また別物なのでしょうか？
記事内に表示される画像すべてに適用される設定です。
不明点などありましたらまた気軽にコメントください。
早速のアドバイスありがとうございます！
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;
}
nishiさん、コード合ってます。
基本的にコードを入力する場所はどこでも問題ありませんので、これでサイズが自動調整されるはずです。
他で画像関連のコードなどを追記されたりしてないかも確認ください。
賢威のデフォルトの状態から、ここで紹介しているコードを追記すれば、画像が自動調整されます。
お返事ありがとうございます。
何度も睨みつけながらやってみました。
最初の「 img 」と「 { 」の間にスペースが入ってました＞＜
これを詰めると全てが上手くいきました！
おかげさまで一人でやるよりも安心して出来ました。
とても為になる情報とアドバイスありがとうございます！
また色々と参考（勉強）させてください^^
感謝感謝です。
nishiさん、上手く設定できたようで良かったです。
私の場合は半角スペースがあっても問題なかったんですが、そこが原因だったんですね。
同じようなことでエラーにならないよう記事内の表記もスペースをなくしておきました。
報告ありがとうございました。
また他の記事も参考にして頂いて、疑問点などあればコメント頂ければと思います。