最近Bloggerのテーマを変更したりカスタマイズしていなかったので、何かをやってみようかと思いたち、今更ですがBloggerの画像仕様について調べたりしてみました。
Bloggerで画像をカスタマイズ出来るパラメーター
Bloggerは投稿記事に画像を追加した後で、［画像の編集］から画像のタイトルや代替テキスト、サイズを変更する等、必要最小限の編集が可能です。
更に秘密(？)のパラメーターを使うことで画像のスタイルやフィルター等のカスタマイズも可能となります。
Bloggerの画像サイズのパラメーター
Bloggerでは投稿記事に貼り付けた画像は、[画像の編集]から5つのサイズ(小・中・大・特大・元のサイズ)を選択する事が出来ます。
よく使う中・大・特大のサイズの詳細を見てみましょ。
デフォルト サイズの画像
画像を貼り付けたあと、投稿記事の編集画面をHTMLビューに切り替えて、imgタグを確認すると以下のように記述されます。
*もう少し記述内容は多いのですが、アスタリスクで表示している箇所は内容を省略しています。
アップロードした画像のデフォルトサイズは"中"に設定され、パラメーター: s320(太字)に固定されます。
パラメーターsnnnは、画像の幅or高さが大きい方をnnn pixelに固定して、小さい方はアスペクト比から自動算出しているみたいです。
例えば、オリジナルサイズが幅1200px-高さ900pxの画像の場合は幅 > 高さ なので、Bloggerで表示する画像サイズは幅320px-240pxで表示させます。
因みにs0とすると元の画像サイズが適用されます。
サイズを"大"に変更した場合
幅or高さの大きい方を400pxに固定されます。
画像サイズを"大"にしてみると、パラメーターs320がw400-h300に書き換わります。
サイズを特大に変更した場合
幅or高さの大きい方を640pxに固定されます。
特大にしてみると、パラメーターs320がw640-h480に書き換わります。
注意:スマホ上だとcssでレスポンシブ対応をしているため、サイズの大も特大も元のサイズも同じ大きさに見えると思います。
Bloggerはこんな感じで内部的に画像サイズを変更しています。
更に画像サイズ意外の効果を出すパラメーターもあります。
垂直方向への反転 fv
サイズのパラメーターに続いて "fv"を記述すると、天地反転します。
例えば"s320-fv"と記述します。
水平方向へ反転 "fh"
サイズのパラメーターに続いて "fh"を記述すると、左右反転します。
例えば"s320-fh"と記述します。
円形に切り抜く事も可能
サイズのパラメーターに続いて "cc"を記述すると、cssで加工する必要もなく画像を円形に切り抜きます。
但し、アーカイブ等で実行させる場合はjsの記述が必要かと。
余白部分は透過されますが、読み込む画像がwebp形式の場合に後述するパラメーター"rw"を付与しないと上手く透過されないようです。
例えば"s320-rw-cc"と記述します。
画像スタイル以外のパラメーター
前述までは目に見えるスタイルのパラメーターで、変化が目に見えないパラメーターも幾つかあるようです。
画像のキャッシュを設定する
画像毎に読者(訪問者)側の有効期限を設定出来ます。
デフォルトが何の位の有効期限なのか知らないのですが、パラメーター"e"の付与により設定可能です。
7日であれば"e7"、30日であれば"e30"となります。
例えば、"s320-e30"と記述します。
都度行うのは面倒なのでテーマ側でjsと組合せて使う方が最良かと。
webpとして表示させる
高圧縮の画像ファイルwebp変換も可能。
jpeg画像をアップロードしてもパラメーター"rw"を付与することで投稿記事をロードした時にはwebpの画像として扱われるパラメーター。
*ダウンロードする時はwebpとして保存。
例えば、"s320-rw"と記述します。
逆にBloggerでwebpの画像をアップロードした場合、パラメーターを付与しない場合は、容量こそ小さいですがjpegに変換されて投稿記事にロードされてしまいます。
*ダウンロードする時はjpegとして保存。
複数のパラメーターを組み合せる時は、"-"でパラメーターを連結していきます。
"w640-h480-rw-cc"のように連続して記述するだけです。
他にもパラメータはあるようなのですが、画像の保存先のURLが変更されてから残念ながら機能しないパラメーターを確認しました。
fSoften、fVignette等は旧URLの画像は機能するのですが、新URLでは機能しませんでした。
さて、どうするか
これらのパラメーター使うことで、何か出来そうな気がしますが少し微妙。
キャッシュやwebpのパラメーターは、テーマ単位or投稿記事単位で便利な使い方がありそうです。
そのうちやってみよう。
以上
コメント