きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(小技編) トップページ新着記事の画像のサイズを指定する

<<   作成日時 : 2010/06/15 01:55   >>

ブログ気持玉 0 / トラックバック 1 / コメント 34

ブログ全体の幅を900pxにしてから、新着記事エリアのバランスが少し気になっていました(まじ)


画像


新着記事エリアが広がったことで、トップページの画像が少し小さく感じてしまいます。
今回は新着記事の画像を任意のサイズに変更するためのCSS編集になります。



トップページ新着記事の画像のサイズを指定する

トップページの新着記事で表示される画像サムネイルのサイズはデフォルトで縦横150pxまでとなっています。
画像が横長の場合は横のサイズを、縦長の場合は縦のサイズを基準にして画像の縮小がされます。


このブログでは新着記事の本体部分を690pxにしています。
※ 左右に余白がありますので、実際にはこの数値より狭いです。

あまり大きくしすぎてもバランスが悪いので、今回は画像の横幅を240pxにしてみました。
このCSS編集で横幅が240px以上ある画像でも240pxで表示されることになります。



※追記
ウェブリの仕様変更により新着記事の画像がサムネイル化されました。
(ほし) ウェブリブログ事務所の記事より → (12/22)画像表示仕様変更のお知らせ

生成されるサムネイル画像のサイズは「240×180(単位はpx)」となります。
この仕様変更に合わせましてこの記事の指定サイズを240pxに変更、記事内容も一部手を加えました




以下の文字列を新規でスタイルシートに追記します。
書き込む位置は「新着記事」付近にすると整理しやすいと思います。

/* 新着記事の画像の横幅を固定表示 */
#postlist blockquote a img{
width:240px;
height:auto;
}



画像


画像が大きくなってバランスも良くなりました(にこ)


注意してください

生成されるサムネイルサイズ(240×180)の関係でトップに表示される画像サイズの比率に注意してください。
幅240pxにした時の高さが180px以上になると画像がぼやけてしまいます。
サムネイル画像に関しての記事とトップページに任意の画像を表示するための記事のリンクを置いておきます。
(ほし)参考記事 → ブログトップに表示されるサムネイル画像生成パターンとルール
(ほし)参考記事 → ブログ(小ネタ編)新着記事一覧の画像をお好みで変えちゃいましょう♪

こちらのスタイル指定はブログ幅を広げたり、上下にサイドバーを持っていったりと、
新着記事エリアの広い場合にのみ有効なCSS編集になるかもです。

画像を大きくする条件がそろった場合に使ってみてください(にや)


【追記 2012/04/15】
トップページのレイアウトを見直し本文表示エリアを広くするCSS編集の記事を掲載しました。
こちらの記事とあわせて御覧ください。

(ほし)CSS(小技編)TOPページ新着概要表示の記事本文エリアを広げちゃう裏ワザ☆



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

|ω・)ノシ See you♪

|彡 サッ



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



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
かなりありがた迷惑でしかもコントロールのしにくい画像表示仕様変更
んー、改善のための仕様変更になるのですが、うち的にこれはちょっと困ったコトかも(あせ);;; ...続きを見る
きまぐれAWA's Life
2010/12/22 18:57

トラックバック用URL help


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

タイトル
本 文

コメント(34件)

内 容 ニックネーム/日時
mairisさん、こんにちは♪
mairisさんがCSSに関する記事をアップされると、
私はウェブリ広場の「助け合いの部屋」のことを思い浮かべてしまいます(^_^)

昔は御意見番的な方がけっこう常駐していたのに、今では一部を除きほとんど
mairisさん一人で質問を引き受ける形になっちゃってますよね・・・(^o^;

mairisさんがいるからこそ「助け合いの部屋」は存続できていると思います。
回答者になったからといって何か見返りがあるわけでもないのに
親身にアドバイスされている姿を見ると、畏敬の念を感じずにはいられません。

まだ「助け合いの部屋」を利用したことのない私ですが、
けどけど、それでもmairisさんには「ありがとう♪♪」って言いたいですっ!
Aki
2010/06/15 04:16
AKIさん、いらっしゃいませ(にや)
久々のCSS記事でございます(笑)
助け合いの部屋でアドバイスをしてみたりなコトをさせてもらってますが、
ちょっとはお役にたってるのかしら?(気まずい)
もっと知識のある方にアドバイス頂けるといいんですけどねぇ。
そんな方が現れるまでうちが出来るコトはやってみたいです(ん)

なんかAKIさんにお礼貰っちゃったらテレますよ(笑)
でも元気貰ったんでまた頑張りたいと思います(わら)
mairis
2010/06/15 08:43
こんばんは。
背景色ではお世話になりました。(@ぺこ)
こちらを拝見して新着記事の画像のバランス直しました。
お邪魔するたびに本当に助かります。
ありがとうございました。(ぺこ)(@ぺこ)
くー
2010/07/01 01:48
くーさん、いらっしゃいませ(ん)
お疲れ様です〜♪
コレからも痒いトコロに手が届く的なCSS編集もまた増やして行きたいと思いますのでよろしくお願いしますね〜(にや)
mairis
2010/07/01 09:15
ご無沙汰しております。
おかげさまで快適なブログ運営ができています。(@ぺこ)
今日お邪魔したのは、オリジナルバナーを作り、フリースペースに張り付けたところ、フリースペース下方の新着コメント表示部分あたりのバランスが悪くなってしまったのです。
独自にバナーを作ってみましたが、ただサイズを適当に変えるだけでは
フリースペースには適用しないのでしょうか。
見栄えがよくないのですが、そのままフリースペースに張り付けておきますので、お時間ある時に視察してくださいますか。
宜しくお願い致します。(@ぺこ)
くー
2010/09/28 11:53
上記の追記です。
問題のバナーは、猫の快適グッズと↓を入れた、猫の手の写真がついたバナーです。
宜しくお願いします。(@ぺこ)
くー
2010/09/28 11:57
バナーの文字列の中の</div>を取り除いたらバランスが戻りました。
ありがとうございました。
ただ、その理屈がまだよく分からないので、なぜこれで修復したのか教えていただけますか?。
宜しくお願いします。(@ぺこ)
くー
2010/09/28 12:17
くーさん、いらっしゃいませ(にや)
んー、なんだったのかなぁ(あれ)
</div>を消したら直ったということですので、単純に</div>の書き込みが余分だったんじゃないでしょうか。
<div>〜</div>が1つのセットですので、</div>があればそこからセットが崩れてしまったんだと思います(にや)b
mairis
2010/09/28 20:05
ありがとうございました。(@ぺこ)
もう一つ教えてもらってもよろしいでしょうか。
以前にmairisさんにバナーを作ってもらった時に渡した画像と、今回自分で作ったパナーの画像のサイズは同じものなんです。
しかし、フリースペースのバナー用に`width="120" height="60"と単純に数字を変えても画像のバランスがとても悪く、しかたなく120と90で張り付けてあります。
120と60で作るためには、どのようにしたらいいのでしょうか。
難しい問題で私の手に負えないものならば、現状で我慢します。(@はず)
くー
2010/09/28 20:17
>くーさん
バナーのサイズは画像編集ソフトなどでトリミング(切り抜き)などでサイズを自由なサイズで揃えたりします。
ちょうど最近の記事にトリミングのことが書いてあったりします。
【撮り方ポイント『トリミング』】って書いてあるあたりです。
http://mairis.at.webry.info/201009/article_38.html

またバナー画像の大きさを120×60にする場合はそのサイズに画像を縮小するといいです。
これも画像編集ソフトなどで加工ができます。

さて、くーさんが使われている画像ですが、120×90にしてある通り、縦横の比率の関係で120×60では被写体が変形してちょいときつい感じですね。
写真を撮るときに左右に空間が出来る程度にカメラを引いて撮影、そして使いたいサイズの比率でトリミングすると良いかと思います。

んで(まじ)
せっかくですので、かわいい手の写真をちょいと加工して120×60サイズにしてみました。
よろしかったら使ってみて下さいな(ん)

画像URLは下記の通り
http://userdisk.webry.biglobe.ne.jp/003/282/84/N000/000/010/128567605668316103721_neko_hand.jpg

※なお、この画像はしばらくしたら削除するつもりでいます。
mairis
2010/09/28 21:27
ありがとうございました。(@ぺこ)
感謝感激です。
早速貼りつけましたので、削除して下さい。
また寄らせて頂きます。(@ぺこ)
くー
2010/09/28 22:48
> くーさん
どういたしましてです(ん)
また何かあればいつでもお気軽に〜♪
mairis
2010/09/29 08:55
おはようございます。
またまたお邪魔します。
頂いた画像、昨夜貼りつけた時は何も問題がなかったのですが、今朝見たらノーイメージとなっていました。
これはどういうことなのでしょうか。(@しょぼ)
宜しくお願い致します。(@ぺこ)
くー
2010/09/29 12:11
補足です。
元の画像URLのところに頂いた文字列を挿入すればいいだけですよね?
昨夜はそれで普通に表示されていたのですが・・・。
何で画像が消えてしまったのでしょうか??
しかたがないので、元のバナーもノーイメージデータの下に貼りつけてあります。
何か新しいことを試みるたびにmairisさんには何度も助力頂いて感謝しています。
だめなら削除して元のバナーで妥協しますが、何故突然画像が消えてしまったのかだけでも教えて頂けたら嬉しいです。
ひとつ知識が増えます。(@ぺこ)

くー
2010/09/29 12:32
> くーさん
画像はですね、URLから画像を開いて名前をつけて保存、それから画像処理をくーさんの保存スペースにファイルマネージャでUPして画像URLを取得、そしてその画像URLをフリースペースの該当箇所に書き込んで…という手順になるのでした(気まずい)
上で書いたURLはうちの保存スペースに置いてある画像のURLだったので、うちが保存スペースから画像を削除するとなくなってしまうのです。
今は外にいますので夜(たぶん7時以降)にもう一度画像UPしてURLを貼ります。
画像URLを最初に書いた手順で、くーさんのブログ設定をしてみてくださいね。
取り急ぎご連絡まで(ぺこ)
mairis
2010/09/29 12:58
> くーさん
お待たせしました。
下記URLより画像を開いてパソコンに保存してください。

http://userdisk.webry.biglobe.ne.jp/003/282/84/N000/000/010/128575338839816114644_neko_hand.jpg

バナーの設置設定の仕方については上のレスの通りです。
mairis
2010/09/29 18:45
画像保存並びに貼りつけ完了です。(@はず)
お世話おかけしました。(@ぺこ)
ありがとうございました。
今度こそ消去して頂いて結構です。(@ぺこ)
また、いずれお邪魔すると思いますが、どうぞ宜しくお願いします。
上のコメント、あまりにかっこ悪いのでよければ削除して下さいませ。
くー
2010/09/29 22:44
> くーさん
お疲れ様でした(にこ)
また何かあればいつでも〜♪
mairis
2010/10/01 09:59
おはようございます
はじめまして
ブログのトップページを自分流に変えてみたくて
はいじさんにお尋ねしたらこちらを紹介してくれましたので
お邪魔しました。
まずブログの幅を広げたいのと、タイトル画像を大きくしたいと
思います。
解らないのでとりあえずタイトル画像に貼りたい画像はブログ
紹介の部分に張り付けてみましたが、その上にあるブログ名と
小さく表示された文字も表示されないようにしたいのです。
説明がうまく出来なくてすみませんが、よろしくお願いします。
ねこちゃん
2011/04/11 08:16

ねこちゃんさん、いらっしゃいませ(にこ)
はじめまして、こんにちはー☆

カスタマイズの記事がありますのでチャレンジしてみてくださいね(ん)

>ブログの幅を広げたい
→ CSS(スタイル編)第7回 ブログの幅を広げてみよう♪
http://mairis.at.webry.info/200802/article_19.html

>タイトル画像を大きくしたい
→第1回 タイトル画像を変更する♪
http://mairis.at.webry.info/200802/article_4.html

>ブログ紹介の部分のブログ名を表示されないようにしたい
→CSS(小技編)プロフィール領域のブログ名を見えなくしてスッキリ♪ 【その2】
http://mairis.at.webry.info/201003/article_37.html

わからない時やうまくいかない時はまたコメント下さい(にこ)ノ
mairis
2011/04/12 08:50
こんにちは
色々教えて頂きましてありがとうございました。
ブログの幅を広げ、ブログ紹介の部分のブログ名を表示
されなくなりましたが、タイトル部の高さがうまくいきません。
出来たらブログ紹介の所の画像をタイトル部に入れたいと
思うのですが?出来るでしょうか?
テンプレートの選択に問題はありませんか?


ねこちゃん
2011/04/12 11:07
こんにちは 追加質問です
サイドバーを左に表示するデザインに変えたいのですが
その場合横幅を広げなければなりませんよね。
1番上の幅を広げる方法が解らないのですが
その編集は何処でするのか教えて下さい。
お願いします。
ねこちゃん
2011/04/12 11:19
>> ねこちゃんさん
ひとつずついきましょうか(にや)
まずはブログの幅を広くする方法です。
トップページの新着記事部分と記事本文部分の800px程度を基準にしてサイドバーを左に表示してみます。
http://www7b.biglobe.ne.jp/~club_awas/dl/rakugakiki_css.txt
上記URLにアクセスするとスタイルシートが表示されますので、こちらをごっそりコピーしてCSS編集ページで「右クリック→すべて選択→貼り付け」で設定を反映してください。
複数箇所で記述ミスがありましたのでこちらのスタイルシートで進めたいと思います。
出来ればテキストファイルとして保存して編集していくことをオススメします。

次にタイトル画像の設定の仕方です。
編集箇所は47行目付近の「 タイトル(大)」のところですね。
こちらを下記のように書き換えます。
/*---------------- タイトル(大) ----------------*/
#banner{
background-image:url(http://userdisk.webry.biglobe.ne.jp/022/310/76/N000/000/001/130256857283916113632_3_20110412093612.jpg);
background-position: top center;
height:461px;
/* 包含要素を相対位置指定できるようにします */
}

これでタイトル画像の変更と高さの指定が完了です。
mairis
2011/04/12 18:53
こんばんは
たびたびすみません
幅はこんな物でしょうか?
トップの画像を2番目のと変更するにはどうしたらいいでしょう?
後 記事の画像も大きくしたいのですが?
よろしくお願いします。
それとブログ名も消えないです。
初心者なのですみません。よろしくお願いします。
ねこちゃん
2011/04/12 20:38
おはようございます
解りやすく教えて頂いてありがとうございます。
一応教えて頂いたとおり頑張ってみました。
タイトルの画像は変えたかったので、タイトル(大)の
CSS編集はコピーせずです。
何処かご指摘あれば助言をお願いします。
またお世話になると思いますが、よろしくお願いします。

ねこちゃん
2011/04/13 07:37
>> ねこちゃんさん
お疲れ様でした(にや)
コメント遅くなりました、もう解決しちゃったようですね(気まずい)
また何かありましたらお気軽にお寄りください♪
mairis
2011/04/13 12:34
mairisさんこんにちは
ありがとうございました
また訪問させて頂く事が多いと思いますが
よろしくお願いします。
ねこちゃん
2011/04/13 12:40
(にや)いいですね・・・。
あきら
2011/06/23 17:35
ねこちゃんさん、いらっしゃいませ(ん)
今更のコメントになって申し訳ないです(*_ _)人ゴメンナサイ
コメしたと思ってましたがちゃんと送信できてなかったみたいで(はず))
また何かありましたらいつでもお越しください┌◯ ペコッ
mairis
2011/06/25 12:51
あきらさん、いらっしゃいませ(にや)
このCSS編集はお気に入りのひとつです(ん)
ご活用いただければと思います♪
mairis
2011/06/25 12:54
mairisさん、はじめまして
mairisさんは私のCSS編集の先生でございます。
いつもありがとうございます。

すみません!質問させて頂いて宜しいでしょうか。

トップページの新着記事一覧に表示される画像の右横に記事本文(概要)が表示されますが、変な所で文が折り返しされます。mairisさの様に表示するには、どうしたらよいのでしょか。
ご指導 宜しくお願いします。
hiroxx
2012/04/13 18:09
hiroxxさん、いらっしゃいませ(にや)
はじめまして、こんにちは〜☆

トップページの新着記事概要の部分はhiroxxさんのお気付きのようにちょいと一工夫がしてあります。
記事にしようしようと思いつつそのまま放置(コラ)していたり(気まずい)
ここでの説明はちょっとスペースが足りませんのでこれについてのCSS編集を記事にして近日アップさせて頂きます。
来週頭にはアップ出来ると思いますので少しお時間頂ければとおもいます(ん)
mairis
2012/04/13 20:09
mairisさん、ありがとうございます(ういんく)
質問だぶっていないか、mairisさんの過去の記事全て見直しました。
記事アップされていなかったということで、少し安心しました。
アップされる日を、楽しみにしております。お忙しいところ、すみません。
宜しくお願いします。

hiroxx
2012/04/13 23:50
>> hiroxxさん
記事が書き上がりましたのでご報告です(にこ)
記事のリンクをURL欄にハリハリしておきますね。
該当文字列をhiroxxさんのブログにあった数値に変更してお使い下さい。
ご質問等ありましたらまたコメントよろしくです(ん)
mairis
URL
2012/04/14 13:48

コメントする help

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

* ぱにゃステ *

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

CSS(小技編) トップページ新着記事の画像のサイズを指定する きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる