忘却エンドロールブログカスタマイズカテゴリ紹介

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

FC2ブログのSSL化の方法と役に立つツールのご紹介

(記憶違いじゃなければ)いつの間にか仕様が変わってました!!

記事内の画像については、外部のものでも自動的に「http:」の部分を削除してくれるようになりました。これにより、すでにSSL化しているサービス(amazonの広告やにほんブログ村ランキングボタンなど)のタグは修正しなくても問題ありません。他にもわかったことがあれば追記します。
*******************

SSL化手順と作業の効率アップツールやテクニックをご紹介。ごちゃごちゃ書いてますが、多くの場合はここまでしなくても問題なく移行できます。(カウンターなどがリセットされる場合もありますが、少なくともfc2カウンターでは大丈夫)

◆基本事項◆

<SSL化設定のある場所>

「環境設定」→「ブログの設定」のリスト下部にある「SSL設定」

<修正しなくてもいいもの>

・fc2ブログにアップした画像などのURL
・fc2ブログにアップしてないSSL対応サービスの画像URL
・テキストや画像などのリンク

<よくある修正箇所>

・FC2カウンターや人気ランキングなどのプラグインのタグ
・古い動画のタグ
・SSLに対応していない広告やバナーの画像URL
・プラグインエリアの画像URL
・外部ストレージの画像URL

◆対応方法◆

<テンプレートの修正>

テンプレートの「HTMLの編集」で「http」をページ内検索し、「blog〇.fc2.com」や「blog-imgs-○○」などfc2ブログ関係以外のURLを探します。もしあってURL末尾が画像関係やcss、js、icoなどの拡張子なら、リンク先に移動し右クリックで「名前を付けて保存(またはページを保存など)」を選んでダウンロードし、ブログにファイルアップロード。そのURLで先ほどのURLを上書きします。
別のテンプレを使うのも一つの手です。

<プラグインエリアの修正>

プラグインエリアにプロフィール画像やサムネイル、バナーなどの画像を使っていて、それが自分のブログにアップしたものなら、プラグインの「HTMLの編集」で画像URLを「https」に修正。
 自分のブログにアップしたものじゃないなら、そのファイルが置いてあるサーバーがSSLに対応しているか確認し、対応していたらURLを新しいものに修正。対応していないなら、ダウンロードして自分のブログにアップし、そのURLに差し替える。

<プラグインの修正>

プラグインエリアやテンプレートにFC2サービスのプラグインなどを使用している場合は、改めてタグを取得して貼り替えます。まだSSLに対応していないプラグインなら対応するまで非表示にしておくか別サービスを探してください。

◆記事の修正◆

<修正が必要な記事を探す>

1、過去記事を検索したり目視で
2、バックアップデータからタグ内の文字を検索
「データバックアップ」ページで年度別か月度別の記事エクスポートを利用し、テキストエディタ(メモ帳など)で開きます。旧いyoutubeの動画タグを探すなら「http://www.youtube」で検索し、見つけたら前後を読むと記事や動画のタイトルがわかります。わかったらブログの記事の管理で検索してください。

<修正時のお役立ちツール「FoxReplace」>

Firefoxのアドオン「FoxReplace」を使えば、ブラウザ上に表示されたテキストを複数同時に一括置換できます。メモ帳などの一括置換(Ctri+H)はすべての「A」を一括で「1」に置換したりできますが、このアドオンを使えば「B」は「2」に、「C」は「3」にと複数同時に置換できます。しかも、設定すれば記事編集画面を開いた時点で自動的に!
動画や広告画像などいくつも修正する必要がある場合は、このアドオンをインストールして置換条件をすべて登録するとかなり楽なるのでおススメ。

Firefoxで「FoxReplace」配布ページに行き、「firefoxへ追加」をクリックするか、「互換性がありません」と出ている場合は「他のバージョンを見る」で一つ前のバージョンをインストールしてください。現在(2017/11/1)最新の2.0.0はfirefoxのベータ版にしか対応していません。
使い方についてはこちらの”FOXISM|ブラウザ上で入力欄のテキストを置換するFirefoxアドオン「FoxReplace」”や”となはざな|Firefoxのテキスト置換アドオン「FoxReplace」でブログ記事を編集・修正!”の記事が詳しいです。

<一括で修正する方法>

一度すべての記事を削除することになります。実行する時はきちんとバックアップを取って、自己責任で行ってください。
「データバックアップ」から記事データをダウンロードすることで、大量の記事もテキストエディタで一括置換できるようになります。amazonなどの広告画像のURLを修正する時などに便利ですが、過去に記事を削除したことがある人はもうひと手間かかります。それでも、1000記事以上修正が必要な場合などは、この方法の方が断然楽。手順通りにやればURLも元通りです。
ただし、amazonの広告タグは何度か変更されたようなので、過去記事をいくつか調べて修正パターンを確認してからにしてください(例:「src="http://ws-fe.amazon」→「src="//ws-fe.amazon」)。

1、「データバックアップ」から過去記事をダウンロードし一括置換でタグなどを修正していきます。データ量が多すぎるとインポートに失敗することがあるようなので「年度別」が無難。修正用とバックアップ用の二つ用意してください。

2、「記事の管理」で過去記事一覧の左端にある「#」をクリックして記事番号を表示させ、抜けている記事番号を調べます。日付順になっているので、一覧を100記事表示にした後、表全体を選択してコピー。エクセルなどの表計算ソフトに貼り付けて番号順に並び変えて探します。この表はインポート後の確認にも必要です。

3、抜けている番号があったら、その番号の後の記事のタイトルと年月日をメモします。バックアップデータ内をそれで検索するので、メモ帳などに控えておいてください。

4、バックアップデータをテキストエディタで開き、「AUTHOR」から「次のAUTHOR直前」までの一記事分のデータをコピーして新たにエディタを開いて貼り付けます。
「BODY:」と「EXTENDED BODY:」以下にある本文データや「COMMENT:」以下にあるコメントデータは削除し、「STATUS: Publish」を「STATUS: draft」(下書き状態)に変換しておいてください。日付はその日の日付にし、タイトルは「ダミー」などに変えておくとわかりやすいです。
適当な名前で保存してインポートすると下書き状態の記事が追加されるので、一度試してみるといいかも。

5、再びバックアップデータを開き、先ほどメモした記事タイトルで検索。そのタイトルの前の「AUTHOR」直前に先ほど別のエディタに準備した一記事分のデータを貼り付け、抜けた番号を埋めていきます。

6、すべての抜けを埋めたら上書き保存して、バックアップデータすべてに同じことをします。ここで抜けが残っていると記事のURLがずれてしまいます。確認用に最新記事の番号を控えておくこと。

7、「記事の管理」で過去記事を100記事表示にしてから一括削除し記事数をゼロに。

8、「データバックアップ」→「インポート」の「ファイルを選択」で古いバックアップデータから順にインポートしていき最新記事の番号がずれていなければ完了です。
ずれていた場合は、表計算ソフトに保存した古い記事一覧と新しいものを照らし合わせて抜けている番号を探し、新しいバックアップデータをダウンロードしてから「5」~「8」をもう一度行ってください。

◆SSL化後のチェック◆

基本的にはchromeやfirefoxなどのブラウザで、一記事ずつ目視でチェックしていきますが、そこまで徹底する必要はありません。ブラウザのURL欄に緑の錠前マークがついていれば成功です。もし出ていなければ、F12を押してデベロッパーツールを開いてください。chromeならコンソールタブに英語で問題になっているURLなどが表示され、firefoxなら日本語で表示されます。そこを修正するなり削除するなりすればOKです。

SSL化が完了しました

環境設定からSSL化を有効にするとSSL化できるようになったので、さっそく有効にしてみました。
ちょこちょこ準備してあったので、なんとか全ページ緑の鍵マーク(鍵というか錠前。Edgeだと灰色です)のがついていることを確認するところまで完了。SSL化するまでと外してあったコメント欄のパスワードも復活させてます。

ただ、個別記事の下に表示していた関連記事のサムネイルが何故かhttpで始まっていて、混在コンテンツとして鍵に注意マークが表示されてしまったので、修正されるまで外すことにしました。最新記事のサムネはちゃんとなってたから、たぶん運営の人がうっかりしてるんだよね?9/23に確認したら直ってました。というか、SSL化した直後だったせいかも?

SSL化するかしないかは個人の自由みたいですが、いちおう天下のぐーぐる先生が推奨しているし、ChromeやFirefoxではSSL化してないページに警告を出したりと厳しくなっていくと思うので、時間のある時にやっておいた方がいいと思います。でも、一通り修正箇所がないかチェックしてからが安全でしょうね~。
というわけで、私がチェックした部分をメモしておきます。(あくまで私が万全を期してやったことなので、やらなくても案外大丈夫です)

◆SSL化前にチェックしたこと◆

  • 1、httpで始まっているfc2ブログ以外の画像の削除、もしくは張り替え修正(広告やcssスプライトなど)
  • 2、古い動画の埋め込みを貼り替え、もしくは削除してテキストリンクに変更
  • 3、拍手や投票フォーム、ソーシャルボタンなどのタグを新しいものに貼り換え(SSLに対応していない場合は、代替サービスを探すか削除してください)
  • 4、テンプレの編集画面で「http」をページ内検索。「blog-imgs-○○」などfc2の画像サーバーに置いてあるもの以外で、jsファイルやcssファイルがあるならSSLに対応していないかチェック。対応していなかったらそれらのファイルをDLしてfc2の画像サーバーにアップ。わからないものは触らない。
  • 5、(SSL化してから気付いたけど)最新記事のサムネを表示する変数を最新のものに変更(テンプレ編集画面の「テンプレート中に使える変数一覧」にある「記事内の画像をサムネイル画像として表示」の大小どちらか)もしかしたらサムネ付き最新記事一覧のプラグインを登録し直せば最新版になるかも?

◆SSL化後にやったこと◆

  • 1、ランキングサイトやサーチコンソール(ウェブマスターツール)などの登録情報の修正。サーチコンソールはプロパティ追加で別のサイトとして登録し直します。アナリティクスは簡単に修正できるらしい。
  • 2、サムネ付き関連記事の一時撤去直ったので復活
  • 3、コメント欄のパスワード復活
  • 4、ブログ内検索をfc2プラグインに戻しました(google検索の修正がめんどくさかったので)
  • 5、最新の個別記事からひたすら過去記事にさかのぼって全ページチェック。緑の鍵が表示されていなくて原因不明の場合は、F12を押してブラウザのデベロッパーツールのコンソールタブから原因がわかります。

FC2ブログでタイトルタグの重複対策(備忘録)

「タイトルタグの重複」と聞いてもわからない人はスルーしちゃって下さい。
こんな事に試行錯誤するより、知らない人は知らないまま真面目にブログを更新していた方がアクセスアップに繋がると思いますので。
でも、ウェブマスターツールに登録して、一度気になリ始めてしまったらもう簡単には抜け出せないんですよね…。
そんなワケで、私が行った重複対策を備忘録として残しておこうと思います。後で、ここはどういう意図でこうしたんだっけ?となると、また調べなおさないといけないので(汗)
全体的に、「ありのごとくあつまりて」というブログの「ウェブマスターツール 重複エラー対策のまとめ」を参考にしました。

【このブログで行ったPCテンプレートへの対策】

<!--▽タイトルタグ▽-->
<title>
<!--titlelist_area-->全記事一覧<!--/titlelist_area-->
<%sub_title>|<%blog_name> <%cno>
<!--index_area-->|サブタイトル的なもの<!--/index_area-->
<!--not_index_area-->
<!--not_titlelist_area-->
<!--not_permanent_area-->
<!--not_search_area-->
<!--topentry-->.<%topentry_no><!--/topentry-->
<!--/not_search_area-->
<!--/not_permanent_area-->
<!--/not_titlelist_area-->
<!--/not_index_area-->
</title>
<!--▽メタデータ▽-->
<!--index_area-->
<meta name="description" content="<%introduction>">
<!--/index_area-->
<!--▽正規化▽-->
<!--index_area--><link rel="canonical" href="<%url>"><!--/index_area-->
<!--permanent_area--><link rel="canonical" href="<%url>blog-entry-<%pno>.html"><!--/permanent_area-->
<!--titlelist_area--><link rel="canonical" href="<%url>archives.html"><!--/titlelist_area-->

上記は修正前の状態です。追記でちょこちょこ変更してるので注意。あと、XHTMLの場合は、「meta」や「link」は「 />」で閉じます。

まず、seo的に重要とされる「title」です。

1、<!--titlelist_area-->全記事一覧<!--/titlelist_area-->
「(ブログURL)/archives.html」で表示される記事タイトルの一覧ページだとわかるようにします。
2、<%sub_title>|<%blog_name> <%cno>
ブログ名(blog_name)はどのページにも表示。「sub_title」はページエリアによって内容が変わる変数で、カテゴリページではカテゴリ名、個別記事ページでは記事タイトル、月別アーカイブページでは年月、検索結果ページでは検索単語、タグ検索結果ページではユーザータグが表示されます。
そして「cno」はカテゴリページでカテゴリ番号を表示します。FC2ブログでは削除されたカテゴリページもURLを入力すれば空のページとして表示されてしまい、過去にインデックスされたカテゴリページがあるとタイトルタグの重複で注意される事が多いのですが、カテゴリ番号をタイトルに含める事で重複を防げます。
3、<!--index_area-->|サブタイトル的なもの<!--/index_area-->
他にブログ名しか表示できないエリアがあるので、「index_area(トップページ)」のタイトルを区別します。「イラストつき映画感想ブログ」のようにブログのサブタイトル的なものを書いて下さい。
また、ページ送りから戻ってくるとトップページが「index_area」ではなくなってしまうため、ページ送りの戻る(<!--prevpage-->)のリンクに「rel="nofollow"」を設定してクロールされるのを防ぎます。
4、<!--not_index_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_search_area--><!--topentry-->.<%topentry_no><!--/topentry--><!--/not_search_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_index_area-->
長ったらしいですが、トップページでも全記事一覧ページでも個別記事ページでも検索結果ページでもなく、繰り返しエントリーが表示されるページというのは、カテゴリー別ページ、月別アーカイブページ、検索結果ページ、タグ検索結果ページ、その他のページ(トップページからページ送りで移動して、戻った時のページpage-0.html)の事です。「topentry_no」で繰り返し表示される記事の番号をすべて表示し、ページ送りのあるエリアの重複を防ぎます。
また、ブログ設定で月別アーカイブ・カテゴリ・検索結果ページなどの1ページの表示件数を最大にするなど、ページ送りを作らないことも大切です。
5、<!--edit_area-->コメント no.<%eno><!--/edit_area-->
投稿したコメントを後から編集する時に表示されるページで、コメントごとに割り振られる番号を表示させます。
…が、そもそもこんなページをインデックスされても仕方がないので、「comment_edit_link」のリンクに「rel="nofollow"」を追加。
また、そのリンクタグ全体を<!--comment_edit-->~<!--/comment_edit-->で囲み、編集用パスワードを設定したコメントしかリンクが表示されないようにしましょう。
ウェブマスターツールでコメント編集ページに対する警告が出なければ、5の記述は必要ないと思います。

<追記:2015/3/10>

非公式扱い?みたいですが、何ページ目か表示できる変数を発見したので、2を修正、4を削除しました(ある日突然使えなくなる可能性もあります)。2の変更後は以下のようになります。

<%sub_title><!--not_index_area-->
<!--not_permanent_area-->
<!--not_titlelist_area-->
<%current_page_num>ページ目<%cno>
<!--/not_titlelist_area-->
<!--/not_permanent_area-->
<!--/not_index_area--> <%blog_name>

<追記:2015/3/17>

実はこれでも「blog-category○.html」と「category○-0.html」で重複が発生します。苦肉の策としては、ぐーぐる先生的には正しくない正規化する方法が使えそう?なので、正規化のところで説明します。

次にメタデータ「description」です

これはぐーぐる検索でタイトルの下に表示される160文字程度のページ説明を指定するものです(必ずしも使われない)。
FC2では、全ページに「introduction」(環境設定でブログの説明として指定した文)が表示されるようになっている事が多く、そのままだと先生に「重複してるよ」と注意されてします。私のブログの場合は、先生に任せておいた方が検索した人にとってわかりやすい内容が表示されるので、トップページのみに指定してます。

ちなみに、「meta keywords」はスパムサイトが悪用するので、もう先生がサポートするのをやめたそうです。邪魔なので、即削除しました。

そして最後にURLの正規化についてです。

これは、ほとんど同じ内容のページでありながらURLが違うページを、1つのURLを指定して「これが正しいURLですよ」とクローラーに教えるものです。

1、トップページ(index_area)
何種類かのURLでアクセスできるようになっている事が多いので「<%url>」に正規化。
2、個別記事ページ(permanent_area)
コメントした後の「戻る」リンクでURLが変わってしまうので「<%url>blog-entry-<%pno>.html」に正規化。
3、全記事一覧ページ(titlelist_area)
archives.htmlとall.htmlの二種類のURLがあるので、片方に正規化。ページ送り対策にもなる。

(追記:2015/6/23)現在は、全テンプレートで1と2のみ設定し、それ以外の場所はすべてインデックス拒否しています。重複対策でインデックス拒否する事は推奨されてませんが、これは検索する人にとって価値のないページをインデックスから除外するための処置です。このブログでは主に映画の感想を記事にしており、検索で来る人は「タイトル名 ネタバレ」などで検索するため、カテゴリやアーカイブページも検索結果に現れると、別の映画のネタバレしか書いてない場合でも引っかかってしまいます。なので、検索する人にとっては邪魔なページという事でインデックス拒否しました。

<追記:2015/3/17>カテゴリページ対策

ページ数を表示する「%current_page_num」を使い、カテゴリページで「category○-○.html」の形に正規化します。ただし、「%current_page_num」では何故かURLのページ数とは違い、ゼロページ目が存在しません。そのため、この方法ではカテゴリのトップページ(「blog-category○.html」と「category○-0.html」)は「category○-1.html」に正規化、次のページ(「category○-1.html」)は「category○-2.html」に正規化というふうに、一つづつずれて正規化します。元々ページ送りのあるエリアでは、何ページ目に何の記事があるかは、記事数が増えるごとに変わっていくので、おそらく大きな問題にはならないでしょう。この方法だと、削除したカテゴリページで「category○-.html」とハイフンで終わる間違ったURLになってしまうことに気付きました…。なので、普通に各カテゴリのトップに正規化する方法しかないようです。

<!--category_area-->
<link rel="canonical" href="<%url>category<%cno>-<%current_page_num>.html">
<link rel="canonical" href="<%url>-category-<%cno>.html">
<!--/category_area-->

<追記:2015/5/19>月別ページ対策

スマホページも重視されるようになってから、月別ページの重複もでてきたので正規化することにしました。重複ページがなくなってから(←待つ必要はないです。というかnoindexしないとなくならない)「noindex, follow」に変えようと思います。

<!--date_area-->
<link rel="canonical" href="<%url>blog-date-<%now_year><%now_month>.html">
<!--/date_area-->

【スマートフォンテンプレートへの対策】

スマートフォン版・タイトルについて

<!--▽タイトルタグ▽-->
<title><%sub_title>
<!--page_area-->
<%current_page_num>ページ目<%cno>
<!--/page_area-->「<%blog_name>」スマフォ版</title>

「page_area(トップ、カテゴリ、月別アーカイブページ)」ではブログタイトルと「sub_title」、何ページ目かを表示。
その他、「戻る」リンクなどURL中に「?sp」のパラメータがついたもの(末尾の場合は「?sp」削除)や、コメント、TBへのリンク、コメント編集、ページ送りの「prevpage_area」へのリンクに「rel="nofollow"」追加。

スマートフォン版・正規化について

fc2ブログでは、スマホでアクセスすればスマホ版ページが自動的に表示されますが、スマホ版ページはURL末尾にパラメータがつくため、正規化しておかないとPC版と同じ内容でも別のページとしてインデックスされてしまいます。するとタイトルタグの重複で注意されるだけでなく、PCで検索した時にスマホ版のページが上位にきてしまうこともあり、seo的に良くありません。
そのため重要なページはPC版に正規化しつつ、余計なページはインデックス拒否するといいでしょう。

<!--▽正規化▽-->
<!--index_area--><link rel="canonical" href="<%url>" /><!--/index_area-->
<!--not_index_area-->
<!--not_category_area-->
<!--not_date_area-->
<!--not_spplugin_area-->
<link rel="canonical" href="<%url>blog-entry-<%pno>.html" />
<!--/not_spplugin_area-->
<!--/not_date_area-->
<!--/not_category_area-->
<!--/not_index_area-->
<!--category_area-->
<link rel="canonical" href="<%url>blog-category-<%cno>.html" />
<!--/category_area-->
<!--date_area-->
<link rel="canonical" href="<%url>blog-date-<%now_year><%now_month>.html">
<!--/date_area-->

すでに重複を注意されている場合、cm、tb、formと、スマホ版とPC版のカテゴリページの重複がほとんどだと思います。なのでトップページと個別記事以外をインデックス拒否するか、cm、tb、formはpc版個別ページに、カテゴリページはPC版に正規化します。カテゴリはPC版と同じくページごとに正規化しても構いません。

スマートフォン版・インデックス拒否について

<!--▽インデックス拒否▽-->
<!--not_index_area-->
<!--not_permanent_area-->
<meta name="robots" content="noindex,follow" />
<!--/not_permanent_area-->
<!--/not_index_area-->

最近は価値の低いページがサイト全体の評価を下げるようなので、トップと個別ページ以外を全てインデックス拒否してしまうのが手っ取り早いでしょう。スマホ版でそれらのページに被リンクをもらうことはほとんどないと思われます。

ウェブマスターツールのurlパラメータの設定

Googleウェブマスターツールの「URLパラメータ」の使い方のページを参考にしました。スマホ版のURLはほとんどパラメータがついており、それが重複の原因にもなっています。そのパラメータがどんな意味を持っているのか、クロールする価値があるのかを伝える事で、ぐーぐる先生が効率よく的確にインデックスできるようになるようです。
とりあえず以下のように設定。他の検索エンジンには影響ありません。
rno(コメント編集):「指定する内容」→「クロールしない」
page(ページ送りのあるエリア):「ページ指定」→「Googlebot が決定」
cat(カテゴリ)、date(月別):「絞込み」→「Googlebot が決定」
m2(cm、tb、form)、no(個別ページ):「指定する内容」→「Googlebot が決定」

<追記>
ウェブマスターツール
やっぱりfc2ブログで重複を完全になくすには、トップページと個別記事以外を全てnoindexするしかないね…。上の状態になってから数ヶ月。noindexしたからと言ってマイナスになることは何もなかったし、ブログ名で検索した時にサブのリンク?がほとんど表示されなくなったものの、ブログ名で検索する人なんていないしなぁ。
こんな事に時間を費やすくらいなら、サクっとnoindexしてコードもスッキリ、気分もサッパリした方がいいと思います。

CSSスプライトを使ってイラストを一覧できるギャラリーページが完成!

*現在は「イラスト一覧」は撤去しました(2018/11/14)
サイドバーのプチギャラリーにある≫イラスト一覧(映画メイン)をクリックすると見られます。
過去イラストのサムネイルを3ケ月ごとにまとめました。カーソルを合わせるとツールチップが表示され、何のイラストかわかり、画像クリックでその記事にとびます。

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

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

で、色々と調べて、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ブログの場合、拍手タグをで囲めば、個別記事でのみ表示できます。

.