忘却エンドロール

素敵映画に出会えた時の感動をそのまま書き綴る、映画感想ブログ.

ギャラリーできました

 | ブログカスタマイズ  Comment(6) 

サイドバーのプチギャラリーにある≫イラスト一覧を見るをクリックすると見られます。
過去イラストのサムネイルを3ケ月ごとにまとめました。カーソルを合わせるとツールチップが表示され、何のイラストかわかり、画像クリックでその記事にとびます。

ただ、ギャラリー記事をつくるにあたって、過去記事(主に雑記)をリメイクしてしまいました。コメントを頂いた記事をリメイクするのは心苦しかったんですが、未完成記事を大量更新するのは嫌だったのと、情報が古いものなどもあったので思い切ってやってしまいました…。コメントを下さったみなさん、本当に申し訳ありません(コメント自体は残してあります)

ちなみに、いっぺんにサムネイルを大量表示すると読み込みがすごく遅くなるので、前から気になっていたCSSスプライト(複数の小さな画像を一枚にまとめ、読み込みを一回で済ませるサイト高速化のテクニック)を試してみました。
というか、最初それを忘れていて、完成したと思ったら滅茶苦茶重くて直さざるを得なかったんですけどね(笑)
しかも、その前に一度、自分で作った横150px縦110pxの900枚くらいのサムネイルをうっかり削除してくじけそうになったんですけどね!(バカ)
以下、ブログ高速化やCSSスプライトに興味のある方の参考になれば…。

→Read More

で、色々と調べて、topページのアイコン類で試したところ、IMGタグにCSSを指定する方法が一番無難そうだという事で、「ゆめぴょんの知恵」さんの【ブログ術】表示速度を高速化!CSSスプライト/SpirteでHTTPリクエスト減の記事を参考にやってみました。
こちらで紹介されていた「IMGタグのCSSスプライト簡単作成」のサイトで作成してみたんですが、わたしの場合、三か月分、約45枚のサムネイルを一枚の画像にしなければならず、このサイトは複数列に対応してなかったので自分で作ることにしました。(fc2ブログは一辺999px以上はアップロードできない)

愛用の画像編集ソフト「irfanview」でサムネイル(画質劣化を抑えるためPNG版をまた作りました…)を順番に結合し、画質75でjpeg保存。
サムネイルの大きさはすべて横150px縦110pxなので、CSSで指定する座標の計算も簡単です。最大6列9段ぶんのタグをメモ帳に書き出して、それをひとつひとつギャラリーのタグのsrcの部分に置き換えました。

この時、ダミー画像はbase64でエンコード(文字列データ化)した方がいいのか?、IMGに指定する画像サイズはどの画像のサイズを指定するべきなのか?しない方がいいのか?、表示スピードに関わる事なので調べまくったんですが、いまいち分からなかったので全部試して、ページ表示速度の平均値を調べられる「webwait」というサイトで調べてみました。

結果、遅かったのはbase64と画像サイズ未指定。base64はリピート表示する無地の背景に向いていると思います。画像の時よりサイズが増えるので、何度も記述する場合は逆に遅くなります。あと、やっぱり画像サイズは指定しないと遅くなります。
次に、実際の表示サイズや、CSSスプライトの元画像サイズを指定した場合は同じくらい速かったです。表示されるサイズも変わりありませんでした。
僅差で一番速かったのは、ダミー画像のサイズ1px×1pxを指定した場合。表示されるサムネイルのサイズはCSSで指定してあるので、IMGに指定するのはあくまでダミー画像のサイズで良かったという事でしょうか?
何度か平均を取ったんですが、他のサイズを指定した場合と0.02s程度しか差が出なかったので、誤差の範囲かもしれません。

ついでに、もう少し高速化できるかもと、拍手数が表示されるアイコンは個別ページでのみ表示するように直しました。fc2拍手に限らず、記事ごとの数字を表示するようなソーシャルボタンなどは、読み込みのたびに数字を問い合わせるので重くなると思います。
fc2ブログの場合、拍手タグを<!--permanent_area-->~<!--/permanent_area-->で囲めば、個別記事でのみ表示できます。

カテゴリ「ブログカスタマイズ」の関連記事
FC2ブログでタイトルタグの重複対策(備忘録)
2015/02/18
ギャラリーできました
2013/12/23

■ Comment

ただいま~☆

寂しかったわ~ん♪
またウルサイのが帰ってきたので、どうぞ宜しく~!

>サイドバーのプチギャラリーにある【イラスト一覧】から見られます。

すんばらしいのですが、
その【イラスト一覧】という文字が
いまいち目立たないので、もうちょっと文字を大きくするとか
赤色にするとか? いかがでせう?

リメイク記事の事ですが、
ハンバーグのが読みたかったのですが・・・
またいつか読ませて頂ければな~って思っています☆

また勝手なことばっかり書いてすみません。
コメント嬉しかったです!

では、また~!!!


.
2013/12/25 (Wed) 13:57  miri〔編集〕  

>miriさん

おかえりなさ~い♪
私も寂しかったですよ~。やっぱりmiriさんがいないと思うといつもの調子がでないです。

> その【イラスト一覧】という文字が
> いまいち目立たないので、もうちょっと文字を大きくするとか
> 赤色にするとか? いかがでせう?

わたしも目立たないかなぁと思ってたところなんですよ。
前みたいにアイコンを作りますね。

> リメイク記事の事ですが、
> ハンバーグのが読みたかったのですが・・・

すみませんでした!
バックアップがまだ残ってると思うので発掘してみますね。ちょっと時間がかかるかも。
クックパッドとかにもあるし、わたしの記事なんかなくてもいいかと思って…。読みたかったと言って頂けて本当に嬉しいです。ありがとうございます!
2013/12/26 (Thu) 07:21  宵乃〔編集〕  

奥が深いですね

初出の時はCSSスプライトを全く知らず、何が書いてあるのかさっぱりわかりませんでしたが、今なら分かります(笑)

「ゆめぴょんの知恵」さんのところを読んできましたが、ダミー画像を埋め込むってのはSEO的に無評価なんでしょうか?マイナス評価されそうな気がします。

ギャラリーは一か所に画像が集まっているので、CSSスプライトの他にもクリッカブルマップで実現できそうです。その場合はどちらが早いんでしょうね。
2014/03/05 (Wed) 23:39  Deka-E  

>Deka-Eさん

いらっしゃいませ、再び来て下さってありがとうございます♪

> 「ゆめぴょんの知恵」さんのところを読んできましたが、ダミー画像を埋め込むってのはSEO的に無評価なんでしょうか?マイナス評価されそうな気がします。

わたしもそこは気になってたんですが、隠しテキストはNGでも、ダミー画像で不利になるというのは調べても出てこないんですよね。プラスでもマイナスでもないという感じなのかな?
ダミー画像は、画像の遅延ロードにも使われていて、画像がインデックスされない可能性はあるみたい。
画像の多いサイトで劇的に読み込みが速くなれば、その分のプラスの方がseo的に重要になるんだと思います。

> ギャラリーは一か所に画像が集まっているので、CSSスプライトの他にもクリッカブルマップで実現できそうです。その場合はどちらが早いんでしょうね。

若干CSSスプライトが速いというのを読んだことがあります。
詳しくはわからないけど、ツールチップを出すのにjavascriptを使わないといけないような感じだったので、私の場合はCSSスプライトにしてみました。
適材適所ですね~。
2014/03/06 (Thu) 08:05  宵乃〔編集〕  

クリッカブルマップ

クリッカブルマップ(イメージマップ)でツールチップを出すには、areaタグにtitle属性を使えば可能です。

「イメージマップ CSSスプライト」で検索すると、イメージマップをCSSスプライトで実現する方法があって、ツールチップをspanタグを使うという方法もあるらしく、なかなか奥が深いなぁと感心してしまいました。
2014/03/06 (Thu) 23:19  Deka-E  

Re: クリッカブルマップ

> クリッカブルマップ(イメージマップ)でツールチップを出すには、areaタグにtitle属性を使えば可能です。

お~、簡単に出来たんですね。
あんまり調べてなかったので知りませんでした。
うちのブログ、フレキシブルレイアウトなので、イメージマップだとはみ出ちゃうんですよ。

> イメージマップをCSSスプライトで実現する方法があって、ツールチップをspanタグを使うという方法もあるらしく、なかなか奥が深いなぁと感心してしまいました。

地図のイメージマップの記事読んでみました。
まだまだ活用の場はありますし、こうやって工夫して様々な活用法を編み出していけそうです。HTML、CSSの道を極めるのは難しいですね~。
2014/03/07 (Fri) 10:39  宵乃〔編集〕  
名前
タイトル
URL
本文
非公開コメント

■ Trackback

この記事のトラックバックURL
トラックバック一覧