きまぐれAWA's Life

アクセスカウンタ

zoom RSS ブログ(小ネタ編)新着記事一覧の画像をお好みで変えちゃいましょう♪

<<   作成日時 : 2010/08/24 04:06   >>

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

今回はトップページの新着記事一覧に表示させる画像を任意で変更する小技の紹介です(ん)





ウェブリでは記事本文に最初に掲載されている画像がトップページ一覧に表示されるようになっています。
でも、トップページの画像を変えたいシチュエーションもあったりしませんか?
例えばネタ記事などでトップページに画像出たら読む前にネタばれしちゃうじゃん(はず)…とか、
記事の流れで最初に載せる画像より違う画像の方が雰囲気いいよな〜(うる)…とかとか。

いろいろあると思いますが、そんな時に使うと便利な小技です(にや)



画像



こちらは2010年8月22日の記事が掲載された時のトップページ新着記事の様子です。
「たまごまだーっ?」の画像が表示されています。
実はこの「たまごまだーっ?」の画像は最初に表示されているものではありません。

この記事ではこのような順番で画像が表示されています。


画像
    【参考記事】 お花集めな第47回ES定例会でブロンズカード目標数達成ヾ(・∀・。)ノダ-!!



こちらのタネ明かしはとても単純な仕組みだったり。
一枚目の画像の前に、見えないけれどもうひとつ画像をいれてあるんです(*・ω・)b ネッ

この見えない画像を入れるための「見えない画像タグ」がコチラになります(にや)

<img src="トップページに表示したい画像のURL" width="0" height="0" />



画像の幅と高さをゼロにしてあるので見えないって寸法ですよ(ぐらさん)σ どろん!! ※パッ
このタグを一枚目の画像タグより前に書き込むことでトップページの画像コントロールが出来ます。


実際の記事ではこんな風にタグを書き込んであります。


■ 画像タグを書き込んだ記事本文 ■
昨晩は第46回EnjoySnow定例会がありました(にや)

<img src="画像URL" width="0" height="0" />

定例会では大会をする前にチャルムでまったり時間をすごすのが恒例となってます(ん)
そんなチャルム風景を何枚か紹介です♪



■ 画像タグを書き込んだ記事のSS ■
画像


このように記事内では画像が見えることはありません(わぁ)



あ、これの応用で豆知識をひとつ(ん)b
トップページに表示されている画像は記事本文の画像を利用して表示する仕組みになってます。
表示サイズは小さくなっていますが、ファイルサイズはそのままなんですね。

トップページ用に小さいサイズの画像を用意して、見えない画像タグでトップページに表示する。
このようにすると、トップページの軽量化ができたりします。

ただ…
めんどくさいです(笑)

手間で快適さ選ぶか、楽して重さを無視するか…悩むところです(むう)
ちなみにうちは後者ですw(ノ∀`)タハー




さて、この見えない画像タグですが、ちょっと注意したいことがあります。
パソコンで見る場合はほぼ問題ないのですが、ウェブリのケータイ版だけはこのタグの効果がありません。


画像



スマートフォン版とケータイ版のSSです。
※ケータイ版はiPhoneのケータイエミュアプリで見ていますので、ちょっと見え方が違うかも?

スマートフォン版では画像タグの効果がありますが、ケータイ版は画像が見えてしまってます(あれ)
このくらいは目を瞑らないといけないかもしれませんねぇ…

なるべく変なトコロに画像が入らないように工夫はした方がいいかもです(気まずい)






こんな感じで今回の「見えない画像タグ」ですが、いろいろ使い道も多いと思いんじゃないでしょうか。
実はこの記事も「見えない画像タグ」を使ってますし、他の記事でも大活躍だったりします(にや)

お試しくださいませ(ん)


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

|ω・)ノシ See you♪

|彡 サッ




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


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(2件)

タイトル (本文) ブログ名/日時
かなりありがた迷惑でしかもコントロールのしにくい画像表示仕様変更
んー、改善のための仕様変更になるのですが、うち的にこれはちょっと困ったコトかも(あせ);;; ...続きを見る
きまぐれAWA's Life
2010/12/22 18:56
CSS(小技編) トップページ新着記事の画像のサイズを指定する
ブログ全体の幅を900pxにしてから、新着記事エリアのバランスが少し気になっていました(まじ) ...続きを見る
きまぐれAWA's Life
2011/06/13 20:02

トラックバック用URL help


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

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
(わぁ)なるほどねぇぇ
それでネルのモザイク写真とかがトップにいたのね
いつもいつも役に経つ情報の発信ありがとん(ぺこ)

こいつは、結構使いたかった機能??なのかもしれん
PCに携帯にスマートフォンにって そんなに沢山の表示物全部気にしてたら
大変だな(ひょえ))
れき
2010/08/24 09:47
この方法、前から知りたくて聞こうかどうか悩んでた。
その発想はなかったわー。
アドマイヤ
2010/08/24 15:07
れきさん、いらっしゃいませ(にこ)
トップページの画像をコレにしたいってコトはよく出てくると思いますので、けっこう使うんじゃないでしょうか(ん)
トップでネタバレとかは悲しいしねー(気まずい)

>スマートフォン
基本はPC版だけ気にしてたらOK(にこ)
まぁ、こうなのねぇくらいに思って貰えたらいいんではないかと(ん)
mairis
2010/08/25 08:59
アドマイヤさん、いらっしゃいませ(にこ)
こんなタネでした(ん)
お役立てたみたいですね〜(わら)
mairis
2010/08/25 09:04

コメントする help

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

* ぱにゃステ *

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

ブログ(小ネタ編)新着記事一覧の画像をお好みで変えちゃいましょう♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる