by echo  
image01

スーパー超シンプルテンプレートは記事ページを除くインデックス(トップページ、カテゴリページ、タグページ、検索結果ページ)で表示される記事一覧をなるべくコンパクトに表示するよう設計しています。

そのため記事の最初に貼り付けているアイキャッチ画像も縮小表示するようにスタイル定義しました。

ここではアイキャッチ画像が表示される状況に応じてどのようにサイズ変更されているのか詳しく解説します。

[アイキャッチ画像:300px × 160px, float right]

記事ページでの画像の表示

記事に貼り付けた画像は width, height で指定された縦横サイズの通り、もしくはサイズ指定がない場合は原寸で表示されます。

記事冒頭のアイキャッチ画像はサイズが 300px × 160px で、この記事中のその他の画像も指定されたサイズ通りに表示されています。

アイキャッチ以外の画像を挿入する

記事中の画像は普段通りに挿入します。何も属性をしていしなければ指定サイズ通りの表示です。属性の無い記事中の挿入画像は、スタイルシートによる画像サイズの調整は一切おこなわれません。

アイキャッチ画像を挿入する

記事冒頭に挿入するアイキャッチ画像は特定するために eyecatch 属性を付けます。

<img src="画像URL" alt="画像の名前" width="300" height="180" class="eyecatch">

この他にアイキャッチ画像の属性には右回り込み(floatright)、左寄せ(floatleft)があらかじめ準備されています。アイキャッチ画像を回り込みさせるときには floatright, floatleft のいずれかを並記してください。

<img src="画像URL" alt="画像の名前" width="300" height="180" class="eyecatch floatright">

アイキャッチ画像拡縮のブレイクポイント

アイキャッチ画像は表示幅によってアイキャッチ画像のサイズを拡縮して表示します。

  • 画像縮小のブレイクポイント:480px
  • 0 〜 480pxまで:本文表示幅に対して 100%
  • 481px 〜 680px(レスポンシブブレイクポイント):本文表示幅に対して 50%
  • 681px 〜 :width, height 指定幅もしくは原寸

比較用の挿入画像サンプル

eyecatch 属性のある画像が ブレイクポイント 480px でどのように拡縮されるか次の2画像で比較してください。PCではブラウザの幅を変え、スマートフォンでは縦横を持ち代えてください。

eyecatch クラスが割り当てられたアイキャッチ画像
image07

幅150px × 高さ84pxでサイズ指定されていますがメディアクエリにより拡大表示されます。

eyecatch クラスが割り当てられていない画像
image07

幅150px × 高さ84pxでサイズ指定されています。

一覧形式ページでのアイキャッチ画像の表示

トップページ、カテゴリページ、タグページ、検索結果ページでも、アイキャッチ画像はブレイクポイント 480px でメディアクエリにより拡大・縮小されて表示しています。

メディアクエリは eyecatch セレクタで制御しているため画像に eyecatch 属性を付け忘れた場合レイアウト一貫性が保てなくなります。アイキャッチ画像には忘れずの属性を付けてください。

アイキャッチ画像のファイルサイズ

image13

Wordpress ではデータベース上に色々なサイズのサムネイル画像が保存されており、 index ページなどサムネイル表示するときには、縦横サイズ・ファイルサイズの小さい画像を選ばれます。

Seesaa は最近の仕様変更によりサムネイルを作成することができますが、トップ(index)ページではサムネイル、記事(article)ページでは元の画像という切り替えはできません。

image08

従って、記事に画像をたくさん貼り付けた場合、特に Wordpress でよく見る記事先頭にデカいアイキャッチ画像を貼り付けてとやったら、読み込みが遅くて仕方ないですね。

Seesaa は画像のファイルサイズに関してはどうにもなりません。tinyPing.com のような画像をロスレス圧縮してくれるオンラインのサイトで圧縮してからサーバにアップするしかないでしょう。

ちなみに、ボクは画像を Seesaa サーバにはアップしません。すべて picasa ウェブアルバム にアップして変数で画像サイズを変えながら使うようにしています。» ブログ記事作成やカスタマイズに便利なオンラインツール15選

コメント

3 件
echoさんこんにちは。シェア案件かもとおもいましたので、メールではなくこちらに書かせてもらいますね。

追記ではなく本文の方に貼った画像は300以下の小さいもだと記事を折りたたんだ状態の時に、拡大されて300いっぱいの大きさになって、小さいアイコンが伸びまくりました。大きさを指定しても伸びてしまいます。

あと、本文にバナーを貼った時、バリュコマのバナーはiframeで画像と認識しないからバナー画像が伸びません。他社のものは伸びます。

あくまでも折りたたんだときに見える画像はアイキャツチ用で300に拡大されてしまうのでしょうか?

大きい画像は問題ないのですが、アイコンのような小さい画像はここに貼り付けるのは無理なのでしょうか?
Posted by さくら at 
さくらさん

最近、画像に関して正直なところ大変に混乱しています。
混乱の発端は 「IE10で画像の高さが取れないことへの対策」。
これを解決したことにより、これまでのボクの画像の扱い方が根本的におかしくなってしまいました。

画像の扱いについて諸々整理しているのでちょっと待って頂いて宜しいでしょうか。
Posted by echo at 
echoさん

わかりましたー(*`・ω・)ゞ
私についてはそこに画像を貼らないことにすれば済む話なので全然大丈夫です。

整理する案件に注力してください。しかしあまり根をつめられないように...(テンプレ配布中断されたのですね)
Posted by さくら at 
コメントをどうぞ
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

トラックバック

0 件

スポンサーリンク