きまぐれAWA's Life

アクセスカウンタ

zoom RSS ブログ記事画像の幅は任意指定、あと高さは自動調整しちゃうためのCSS編集

<<   作成日時 : 2011/06/13 18:39   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 10 / トラックバック 0 / コメント 16

記事で使う画像の大きさをブログデザインに合わせて変更すると記事の雰囲気も変わりますね(にこ)

画像サイズを変更することは記事を見やすくしたりするのに効果的なテクニックです(にや)b
でも、一枚一枚記事に貼る画像のサイズを縦横の比率を確認しながらタグ修正のはホネの折れる作業かもかも。
そんなわけで、今回はCSS編集で記事画像のサイズを決めちゃいましょう〜という方法です。

まずはファイルマネージャの画像リストから画像貼付け作成される画像貼付けタグを見てみましょう。
上が貼付けしたがぞう、そして下が画像貼付けタグになります。

 ■ 横幅指定無し 標準サイズ(320×227)
<div align="center"><a href="画像URL" target="_blank"><img src="画像URL" width="320" height="227" class="up-image" alt="画像" title="画像を等倍で表示します" /></a></div>

画像



タグ内の「width="320" height="227"」で横幅と高さの指定がされています。
標準では横幅320pxで指定され、高さは縦横の比率に合わせて自動的に指定されます。

さて、当ブログではブログ幅を広げてあるので最近では600pxを基準にして画像貼付けしています。
上記画像の元サイズは「800×567」です。(※ 単位はpx)
幅を「600px」に表示する場合、縦横の比率を見ると高さは「425px」になります。
500pxなら354px、400pxなら…といちいち見るのはめんどくさ〜いですよね。
※ 実際はそのめんどくさい作業を一枚一枚やってるんですがが(笑)


で、このめんどくさい作業を省くためにCSS編集でちょっぴりひと工夫してみます。
やり方はDIVタグにクラス値をつけ、そのDIV内の画像に個別で画像サイズの指定をするという方法です。

先に書いた標準サイズのタグで「<div align="center">」という部分に注目。
この部分を「<div class="***">」というタグに置き換えてクラス値を付与します。
クラス値は任意の文字列で構いません。
使用できる文字は半角英数字、ハイフン(-)、アンダースコア(_)です。

横幅を指定するクラス値はいくつかパターンを用意して使い分けるといいと思います。
例として「600px」「500px」「400px」の3バターンを作成、それぞれ以下のような文字列を使用してみます。

 横幅600px → <div class="w600">
 横幅500px → <div class="w500">
 横幅400px → <div class="w400">



次にこのクラス値にそれぞれ合うようなCSS編集をしていきます。
スタイル指定はそれぞれ、w600→600px、w500→500px、w400px→400pxとして、
以下の文字列をスタイルシートに新規で書き込みます。

/* 画像の横幅を固定高さはオート指定 */
#blog-body .w600 img{ width:600px; height:auto;}
#blog-body .w500 img{ width:500px; height:auto;}
#blog-body .w400 img{ width:400px; height:auto;}

/* 画像を中央寄せ */
#blog-body div{text-align:center;}

最後の「/* 画像を中央寄せ */」のスタイル指定は任意で書きこんでください。
書き込みをしない場合は左寄せで画像が表示されます。
※ 書き込みをした場合、ブログ記事内のDIVタグすべてが中央寄せになります。
※ 個別に指定したい場合は「#blog-body .w600{text-align:center;}」という記述でもOKです。

CSS編集で文字列を書き込みが出来れば準備OKです。
あとは画像貼りつけタグの頭部分「<div align="center">」を、表示させたい横幅のスタイル指定をしたDIVタグに置き換えてブログ記事を作成していきます。

以下は例で示した3パターンのタグで画像貼付けました。※ 画像URLは簡略化


 ■ 横幅600pxに指定<div class="w600">
<div class="w600"><a href="画像URL" target="_blank"><img src="画像URL" width="320" height="227" class="up-image" alt="画像" title="画像を等倍で表示します" /></a></div>

画像




 ■ 横幅500pxに指定<div class="w500">
<div class="w500"><a href="画像URL" target="_blank"><img src="画像URL" width="320" height="227" class="up-image" alt="画像" title="画像を等倍で表示します" /></a></div>

画像





 ■ 横幅400pxに指定<div class="w400">
<div class="w400"><a href="画像URL" target="_blank"><img src="画像URL" width="320" height="227" class="up-image" alt="画像" title="画像を等倍で表示します" /></a></div>

画像



こんな感じで個々の画像サイズの指定はしなくても任意の画像サイズに変更できます(ん)
お好みでパターンを作成してブログに合った画像サイズの指定をしてみてください。


それでは、今回はこのくらいで(にこ)

|ω・)ノシ See you♪

|彡 サッ



■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■




(ほし)コチラの記事は2011年5月23日のウェブリの仕様変更に伴い手直し修正をしています。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 10
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス
かわいい

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(16件)

内 容 ニックネーム/日時
ウェブリ広場で教えて頂いたクローバーフィールドです(ぺこ)
無事、画像変換できました(@うる)
ありがとうございました(@はーと)
この絵文字むちゃくちゃカワイイですね(@ぐっど)
クローバーフィールド
2011/06/13 23:43
クローバーフィールドさん、いらっしゃいませ(にこ)
わざわざこちらまで来ていただきコメントありがとうございます┌○ ペコッ
うまくいったようで何よりでした(にこ)
また何かありましたらお気軽にご相談下さいませ〜☆

この絵文字はパンヤってゲームの中で使える絵文字です(ん)
かわいいのでブログでも使えるようにしてあります(わら)
mairis
2011/06/14 11:46
なるほどぉCSSでこういう使い方あるんですかぁ(びっくり)

σ(・ω・ )は、画像のサイズ見て『width値入れて height="auto" 』
毎回書き込んでます(わーん)ノ
あちょ♪
2011/06/15 20:02
(にや)ありがとうです。
あきら
2011/06/18 21:15
ぬぉ!? こんな事が出来るのですか(んが)スゴイナ

私は毎回毎回計算して 縦横のサイズ書いてましたよ(うる)autoスラシラナカタヨ
早速使う事にします(ぺこ)ありがとうです
れき
2011/06/20 01:56
エリカかわゆす(すき)ジュル  とか思って見てましたら・・・
もしかしてこれって私でしょうか(ぎょ)!?

違ってたらかなり恥ずかしいですが、もしそうだったとしたら随分懐かしい
SSですねぇ(すき)

そして比率については私もめんどうな計算をしていた1人です(ぐらさん)
最近はそもそも縮小したものを貼り付けているのであまり記憶がありませんが
昔はわざわざ1個1個計算していたような(あらやだ)
参考にさせて頂きます(ぺこ)

最後にmaiさんがこんなにブログ更新に間が空くなんて珍しい(びっくり)
お元気でしょうか??のんびりと更新楽しみにしています(わら)
ユーリル
2011/06/21 00:45
あちょさん、いらっしゃいませ(にこ)
ほぅほぅ、height="auto"で書き込んでるんですね(にや)
CSSでも同じように使えます(ん)
うちは全部数値書き込んでますけど(笑)
mairis
2011/06/23 12:01
あきらさん、いらっしゃいませ(にこ)
コメントありがとうございます(ぺこ)
お役にたてましたでしょうか(ん)
mairis
2011/06/23 12:04
れきさん、いらっしゃいませ(にこ)
はい、こんなコトも出来てしまいます(ん) (@んが)
うちも毎回毎回一枚一枚縦横サイズ書き込んでますが(ひょえ))
まーほとんど同じサイズの画像使いますのでほとんど計算無しでいけるんですが、違うサイズの時はリサイズソフトにほりこんで出来上がった画像サイズを書き込んでます(笑)
mairis
2011/06/23 12:44
ユーリルさん、いらっしゃいませ(にこ)
よくわかりましたね(ひょえ)σ you! Σ(@ぎょ)me!?
2009年12月13日のヒカミさんのイベントの時のSSです(ん)
どうしてこのSSなのかというと…
いやまぁ、エリカ可愛かったからw
ついでですので過去記事のURLを貼っておきますね(にや)っ【URL欄】ペタッ

CSSでの一括オート処理は昔チャレンジして断念したことがあるのですが、ちょこっとこの質問が出たので再チャレンジしてみたのでした。
DIVタグにクラス値を使うことで任意の画像に対してオート処理ができますし、いくつかパターンを用意すれば活用できるのではないかと思われます。
そういいつつ、うちはまだ数値書き込んでるんですけどねw

ブログ更新は今日からまた復活です(ん)
またぼちぼち書いていきますのでよろしくお願いしま〜す。
mairis
URL
2011/06/23 13:01
mairisさん、こんにちは♪

自爆HDDの復旧中は別のパソでネット徘徊しているのですけれど、
なにしろ古い機種のため
mairisさんや新宿舞姫さんのブログのコメント欄が表示されないという罠が…。
このところ、コメントしたくてもできない悲しさを味わっておりまする(^o^;

舞姫さんのゲームの所だけはコメントを読んだり書いたりできますので、どうやら
コメント欄の近辺に複雑なスクリプトがあると表示しきれないみたいです。
非力マシンのヘタレぶりを絶賛実感中(^_^)

話変わって。
某所が…最近ちょっと無秩序な感じになってきてるような(笑)。
質問でもコミニュケーションでも、回答でもない投稿が増えてきて、
必要な話題を探しにくい印象と言うか何と言うか・・・(^o^;アセアセ
Aki
2011/06/25 10:29
Akiさん、いらっしゃいませ(ん)
>コメント欄が表示されない
なんとっ(ぎょ)「
そんなこともあるんですか(ノ∀`)タハー
絵文字の表示でパワー食われるんでしょうかねぇ(しょぼ)
メインマシンの早期復活をお祈りいたしますよー(うる)人

>某所
例の方ですね(気まずい)
あーいう書き込みは迷惑になるばかりで百害あって一利なしなのでやめていただきたいのですが、あーいう人たちって宣伝することを目的にしてますので、そういう事考えないでバンバン投稿してくるからホント困ったものです。
もともとスレの探しにくい仕様な掲示板なので、そういう事も含めていろいろ改善して欲しいですね。
問い合せてみようかしらw(あらやだ)
mairis
2011/06/25 13:18
こんにちは(にや)実は「お久しぶり」です。
最近CSS編集をうちで復活させ、またこちらにお世話になっています。
大変分かりやすく、重宝しています。感謝!(はーと)

さて、CSS編集について質問(相談?)があるのですが、こちらに書いて宜しいでしょうか?
かなり前の、一覧、タイトル・日時部分の画像の差し替えについてなのですが・・・。
実は、タグと画像URLを入力したのに、画像がページに表示されないのです。
解決方法が分からず(どういった情報を載せて良いのかも分からず)(なみだ)ここで相談すれば、あるいは・・・とコメントさせて頂いた次第です。
もしそちらで分かる範囲ならお手数ですが、ご指導宜しくお願いします。(かなし)

では一旦失礼します。長乱文、すみませんでした(なみだ)
眉上市子松
URL
2011/10/25 17:38
眉上市子松さん、こんにちは(ん)
昨日コメント頂いたのと同じ内容のご質問ですね。
ロストしちゃいましたか?(気まずい)

あちらのコメントに書かせていただいたのと同じ内容になりますがご質問の件についてです。

スタイルシートを見させて頂きましたトコロ「/* 一覧ヘッダセル */#contents #postlist th{}」の部分ですね。
こちらの『background-image』の『()』が抜けているのが原因のようです。
以下のように書きなおしてみてください。

background-image:url(http://tsu.ptu.jp/myg/itrn.jpg);

これで画像が表示されます。
※反映されない時は『F5』キーを押してリログしてみてください。
mairis
2011/10/25 18:39
mairisさん、こんにちは。
昨日のコメント、送信されてたんですねorz
何度かエラーが出まして、重複が確認できず。すみませんでした。(かなし)
そしてこちらでも回答して頂いたことに感謝です…!

画像の件ですが、正常に表示されました!
確認と修正、本当にありがとうございました(ぺこ)
引き続き、このブログにお世話になりつつ、CSS編集頑張りたいと思います。
失礼しましたーっ
眉上市子松
URL
2011/10/26 17:01
>眉上市子松さん
御返事遅くなり申し訳ございませんでした。
うんうん、コメントの投稿エラーってよく起きたりしますよね(しょぼ)
それはさて置き、画像表示もうまくいったようで何よりでした。
これからもよろしくおねがいしますね〜(にこ)ノ
mairis
2011/12/06 21:31

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

ブログ記事画像の幅は任意指定、あと高さは自動調整しちゃうためのCSS編集 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる