ブログ記事に画像を入れた時の自動リサイズ

このQ&Aのポイント
  • ブログ記事に画像を入れる際に、画像サイズがカラムをはみ出す場合、自動的にリサイズする方法を紹介します。
  • 画像をクリックすることで拡大表示する方法もありますが、記事の作成中は手間がかかります。
  • JUGEMの公式テンプレートを使用している場合、自分で指定したサイズを超えた場合にのみ画像をリサイズするスクリプトがあります。
回答を見る
  • ベストアンサー

ブログ記事に画像を入れた時の自動リサイズ

こちらでは初めて質問させて戴きます。 質問内容に不備があるかもしれませんが、おわかりになる方がいましたら、どうぞ宜しくお願い致します。 現在、JUGEMの公式テンプレート(2カラム、右サイドバー)を利用しています。 記事中に画像を入れると、画像サイズのせいでカラム落ち・・と言うのはよくある事と思うのですが、画像を投稿した時に、自分で指定したサイズを上回った場合のみリサイズしてくれる、と言うスクリプト(?)や方法などはあるのでしょうか? (CSSで.pictに対して何かしら記述出来たりとか・・) 「画像をクリックで別窓にて拡大表示」 と言うものは試した事がありますが、今回は、記事を書いている最中には何の記述も必要の無い方法を探しております。 上記の方法では、記事を書いている時に画像サイズの比率を考えたりするのがちょっと面倒に思え、やめてしまいました・・;

質問者が選んだベストアンサー

  • ベストアンサー
  • thila
  • ベストアンサー率73% (45/61)
回答No.2

CSSのmax-widthでいけるかなと思ったのですが、IEでは無理みたいですね。 (詳しくは参考URLをご覧になって下さい) >上記の方法では、記事を書いている時に画像サイズの比率を考えたりするのがちょっと面倒に思え、やめてしまいました・・; ということでしたので、質問の回答としては不十分かもしれませんが代替案を。 例えば画像サイズを200px以上にしたくない場合で、画像が200px以上のものの場合は <img src="画像URL" width="200"> のように、横幅のサイズのみ指定されてみてはいかがでしょうか。 私も画像の縦横比を計算するのが面倒なのでよくこの方法を使っています。

参考URL:
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1070550
zxcxz09
質問者

お礼

ご回答、ありがとうございました。 max-width、こういうのがあるんですね! ブラウザがIEなのでやはり使え無いのですが、試すだけでもやってみたくなりました。 <img src="画像URL" width="200"> いつも検索先の「こう記述して~」通りにやっていたので考えもしませんでした。 width=200、くらいの記述なら全く面倒じゃないです。 参考URLもありがとうございます。 スクリプト、やはり作れる方は凄いなぁと思いました。 私は参考書の見開き一ページを遠めに眺めるのが精一杯でしたので、この「自力で発展」はほとんど不可能そうですが、色々と面白く読めました。 (これから自分が知りたい事を検索する時のワード的な事も貰えた気がします) とりあえず、width指定を使ってみたいと思います! 詳しいご説明、ありがとうございました。

その他の回答 (1)

回答No.1

そういうことであれば、 画像編集ソフトで、画像のサイズをいじった方がいいような気がします。

zxcxz09
質問者

お礼

ご回答ありがとうございました。 そうですよね、画像ソフトで調整してから載せる、というのが、現時点で取れる一番簡単な手段かもしれないです。使っているソフトの立ち上がりが遅い事や画像ごとのリサイズの手間が省けたらなーと、今回は色々探しておりました。 当面は、この方法になりそうです。

関連するQ&A

  • FC2ブログの共有テンプレ

    テンプレート豊富なFC2でブログをやりたいと思っています。 しかし、いくつか疑問点がでてきました。 (1)共有テンプレについて 共有テンプレは、カスタマイズしてもいいのでしょうか? (例えば背景画像を変更するとか、記事タイトルのフォントサイズを変える 等) 私が見た共有テンプレは「アジカン(id:bisco)」さんのものが多く、そちらのブログを見てみましたが、上記の件に関する記述を見つけられなかったので… (2)カレンダーについて よくFC2ブログで、横一列のカレンダー表示を見かけますが、簡単に横一列のカレンダー表示に変更できますか? (3)テンプレートについて 蛇足の質問なので、もし宜しければ教えて下さい。 テンプレートは、1カラム・2カラム(右or左サイドバー)・3カラム(両サイドバー)がありますが、 3カラムだとブログの表示に時間がかかるor重い、ということはありますか?

  • 画像のリサイズ

    ブログを始めたので、タイトルの背景に写真を貼り付けようとしています。貼り付けたい画像サイズは「縦205×横770」です。  ただ、手持ちのデジカメには、このサイズを指定して撮影する機能がありません。すでに撮影した写真でもいいのでリサイズしたいのですが、かなり特殊な横長サイズなのでリサイズの方法が分からず困っています。  また、すでに撮影した画像を編集でリサイズしてみたのですが、横に潰れたようになり、うまくいきません。 「205×770」サイズの写真を手に入れる方法や画像サイズをこのサイズにリサイズできる無料ソフトがあれば、教えてください。 芸能人などのブログを見ていると、キレイに写真が貼り付けられているのですがどうやっているのでしょう? http://ameblo.jp/emiri/

  • JTrimで画像をリサイズ

    例えば10MBを2MBへ、または5MBなどほかの大きさへ変更したい時、縦横の比率はそのままに1回で済ます方法はないでしょうか? 連結画像を2MBにする場合、 イメージ→リサイズ→サイズで指定する→縦1900×横713ピクセル でやってるのですが、これでもうまく2MBにならない時があります。 何度かリサイズを繰り返してますが、思いのほか時間がかかります。 JTrimの画面でMBは表示されないのですか? 色々検索しましたが分かりませんでした。 宜しくお願い致します。

  • FC2ブログの個別記事ページのカスタマイズについて

    左がメインで、右のサイドバーにプラグインを表示する 2カラムのカスタマイズ可能テンプレートを使用しています。 ブログのTOPページから記事タイトルをクリックし 個別の記事ページを表示すると右サイドバーが下がってしまい レイアウトが崩れてしまいます。 Firefoxでは個別ページもトップページと同じように崩れることなく表示されるのですが IEだとおかしくなるようです。 散々調べたのですが、どうにもお手上げになってしまいました。 解決方法がわかる方がいらっしゃいましたら、教えてください。

  • ヘッダーのブログ説明下に画像を置くと記事にかぶる

    シーサーブログですが、画像をヘッダーのブログ説明の下に配置すると、メインの記事や両サイドバーのコンテンツにかぶってしまいます。 これはスタイルシートの編集だな、と思い、スタイルシート内の各種場所(banner、marginなど)の数値を色々いじって試行錯誤してみるのですが、どうもうまくいきません。 私の使用テンプレートは、ライトグレー(両サイドバー)です。 スタイルシートのどこをさわればよいのでしょうか?

  • アメーバブログで記事とサイドバーの高さが合わない

    アメーバブログの編集用CSSを使っています。 CSS編集用のデザインは「カテゴリから探す」→「カスタム可能」を選び、真ん中の列の一番下です。こちらを2カラム・メニュー右で使用しています。 記事とサイドバーの高さを合わせる方法があれば教えてください(画像参照)。

    • ベストアンサー
    • CSS
  • リサイズ画像が送れません

    初歩的な質問ですが教えてください。 Outlookにて、画像サイズを小さくして送ろう思います。 説明書では「イメージを下のサイズにする」のあと、「メッセージの作成」画面が出るとの事ですが、何度ためしても「プロファイルの選択」となってしまいます。 どうしたら、リサイズで遅れるでしょうか?

  • ブログの画像サイズ大きくしたい

    記事の記述方式を[HTML]と選択している場合、こちらのソースをご利用いただくことで記事の中に画像を 配置することができます。と云うことですが 640×480の画像を表示させたいのですが下記のソースでは300×225のサムネイル画像が表示されます、当然ですが <div class="msg-pict"> <img src="http://******.asablo.jp/blog/img/2017/08/03/49a580.jpg" alt="" title="" width="300" height="225"></div> width="300" height="225"の数値をwidth="640" height="480"に変えるとサイズは640×480になりますが拡大されるだけです。 元画像サイズ640×480にするHTML記述を教えていただけないでしょうか。

    • ベストアンサー
    • HTML
  • 縮小画像をImage型にいれるには?

    画像の縦横サイズに関係なく 100*100のサイズにリサイズして(縦横比率を保った状態 Image型に設定したいのですが どのような方法があるのでしょうか? 縦横比率を無視したリサイズなら GetThumbnailImageを使用して出来る事は確認しました。 何か参考になりそうな情報がありましたら よろしくおねがいします。

  • max-widthを指定した場合の縦サイズのリサイズ方法

    画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS (Movable Type)でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか?宜しくお願いします。

    • ベストアンサー
    • HTML