2010年1月4日月曜日

Bloggerに背景画像を入れる方法

Bloggerはデザインであまり凝ったことはできるようなことは考えず手軽にテンプレートでという思想であるようです。しかしを背景に画像を入れたりすることくらいはしたいと思います。しかしBloggerは画像等のバイナリをアップロードしておくインターフェースも場所も用意されていません。何処か外に場所を確保しなければなりませんが何か美しくありませんね。しかし画像ガジェットなら Picasaウェブに保存しますので Picasaを使えばうまくいきそうです。とりあえず制限はありますが手順を書いておきます。
  1. レイアウトに画像ガジェットを追加します。
  2. 画像ガジェットを削除します。(すぐ削除して構いません。)
  3. Picasaを開き、マイフォトにブログタイトルと同じ名前の公開ギャラリーをクリックします。
  4. PicasaにJPEG画像をアップします。(サイズは横1600ピクセル縦は自由で作ります。)
  5. レイアウトにHTML/Javascriptガジェットを追加します。
  6. タイトルは空欄でコンテンツに以下のテキストを貼り付けます。
  7.  <script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7Bbackground-image%3A%20url%28%22http://xxxxxxx/s1600/yyyyyy.jpg%22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3C/div%3E%20"));<script> 
    
  8. Picasaでアップした画像を選択したときに右にある「この写真へのリンク」の「画像の埋め込み」のHTMLをエディタへコピペします。
    1. イメージタグ内のURLを切り出します。
    2. "http://xxxxxx/s144/yyyyy.jpg"の xxxxxx 部分とyyyyyy の部分が重要です。
    3.  この場合、s144は横サイズが144 ピクセルということなので s1600に変更します。(s1600-hとしないとリファラに撥ねられると書いてる人もいましたが大丈夫そうです。)
  9. HTML/Javascriptガジェットのコンテンツのxxxxxxx/s1600/yyyyy.jpgの部分を書き換えます。
  10. プレビューで上手く見れれば完成です。
ピクセルを合わせるのは結構な手間ですが、外部に画像保存の場所を用意しなくてよいのが楽ちんです。

    追記:そうして出来たデザインがこのブログのものですが、うちの子がちょっとだけと、何を研究(デザイン)してるのかの片鱗がわかるようにしました。

    0 件のコメント:

    コメントを投稿