Bloggreのテンプレートをダウンロードして読み込む

Bloggerのテンプレートがあまりにも味気ないので、海外のWEBデザイナーが作成したテンプレートを使ってみようと思います。

今回ダウンロードさせて頂いたのはBTemplates様のサイトです。

上記BTempleteサイトからテンプレートをダウンロードして、Bloggerのテンプレートに適用してみます。

1.まずはBTemplatesから自分のBlogに使いたいテンプレートをダウンロードし、分かり易い所に解凍しておきます。

2.Bloggerの管理画面から、デザイン＞テンプレート＞バックアップ／復元を選択します。

3.先ほどダウンロードしたテンプレートファイルをアップロードします。(拡張子が.xmlのファイル)

テンプレートによっては別途JavaScriptファイルも必要となる場合があります。Read Meを確認してみましょう。

4.今回採用したのはこんなページです。センターの画像がスライドするデザインです。それではスライドの画像とコメントをオリジナルに変更しましょう。

5.まずは、画像の名前を知る必要があります。画像上で右クリック＞イメージファイルをダウンロードする事で画像の名前を把握でき、HTMLソースのどの部分を変更すれば良いか分かります。(1.jpgという名前の画像でした)

6.デザインページに戻り、HTMLの編集を選択します。

7.HTML上で先ほどの画像(1.jpg)が記載されている箇所を探すのですが、HTMLが長過ぎて、1.jpgを探すのに苦労します。そこで、command+Fで検索システムを呼び出し、1.jpgの記載箇所を探します

8.どうやら赤字のURLから画像を読み込んでいる様なので、新しい画像のURLに書き換えます。

9.画像のアップロードとURLの取得ですが、PicasaやDropboxを使うのもいいですが、一番お手軽なやり方はBlog自体に画像を投稿します。そして画像を右クリックして『イメージのアドレスのコピー』を実行します。コピーしたアドレスをHTMLにペーストすれば完了です。

9.文字に関しても、下記HTMLを書き換える事でオリジナル文章になります。