MENU

【forウスケバ】ブログのトップ画像をオリジナルに!

(2010.11.2 追記)
本記事はリニューアル前に書かれたものです。
現在は、「マイブログを管理」→「デザイン設定」→「ブログデザインの設定」から
「ヘッダー画像」で簡単に設定できます。




ブログのトップ画像を自分だけのオリジナルにする方法。

テンプレートは種類も豊富で、お好みに合わせて選べるのですが、
やはり数に限りがあるので、デザインがかぶってしまうことも多いですよね。
ウスケバ内だと、個人ブログの中では『ウイスキー2』を良く目にしますね。

「他の人と違うデザインにしたいな~」
と思った方も多いのではないでしょうか?
知っている方も多いと思いますが、実は非常に簡単に変更できます!
以前から、お会いしたウスケバブロガーさん数名に質問されていたので、
さっそく説明したいと思います。

※今回は固定幅(横幅が決まっている)テンプレートの解説です。
 例として『ウイスキー2(3カラム)』を使用しています。

 好きな画像を用意する

まずは、お好みの画像を用意します。
デジカメで撮影したカッコイイ写真など、お気に入りの写真を用意しましょう。

1)画像の幅・高さをどうすればいいの?
画像の幅・高さが合わなければ、ブログのデザインが崩れてしまったり
見栄えの悪いトップが出来上がってしまいます。

 画像の幅や高さを知るには、
 ブログ管理画面の左メニューから、
 【ブログの設定】【テンプレート】をクリック。
 【テンプレート】画面の【カスタマイズ】をクリック。
 (使用中のカスタマイズをクリックしましょう)








このテンプレート画面で、お好みのトップ画像に変更するのですが、
まずは画像の幅や高さを確認しましょう。
【スタイルシート】の中から『#container』を見てみると、以下のようになっています。






『width:918px;』となっていますね。
これがブログ全体の幅を表しています。つまり画像の幅も918pxにすれば良いわけです。

次に高さを見てみましょう。
同じスタイルシートから『#banner,#subbanner』を見ます。
(通常は『#container』の直下にあります)






『height: 202px;』となっている部分が高さを示しています。

つまり、テンプレート『ウイスキー2(3カラム)』のトップ画像は、
 幅:918px
 高さ:202px

ですので、その幅の画像を用意すればいいわけです。

これを応用して、高さを変更することも可能です。
『height: 202px;』の部分を変更すれば高さを変えられます。

2)画像をカスタマイズしておこう
Windowsを使用している方は『Microsoft Office Picture Manager』で、手軽に画像の切り抜きができますし、簡単な色の補正も可能ですね。
『Adobe Photoshop』など画像編集ソフトなどを持っている方は、さらに高度な加工もできますので、サイズを決めながら画像を用意しましょう。
お手持ちのデジカメを購入時に画像編集ソフトが同梱されている場合がありますので、
それらを利用してもいいですね。

ちなみに僕の場合、『Adobe Master Collection CS4』を持っているので、
『Photoshop』と『Fireworks』でブログデザインを作成しています。
・・・そろそろCS5が欲しい今日この頃(独り言)

 用意した画像を挿入する

素敵な画像が用意できましたか?
後は、これを指定された【スタイルシート】に入れてしまえば完成です♪

1)画像をアップロードしておきましょう
 【管理画面】の左メニューから、
 【記事を書く】【画像一覧】をクリック。
 (別ウインドウで表示されます)



【画像一覧】ページで、用意しておいた画像をアップロードします。
アップロードした画像をクリックすると別画面で表示されますね。
そのURLを右クリックでコピーします。
【画像一覧】ページで、アップロードした画像のサムネイルを右クリックして、
【画像URLをコピー】を選択しても構いません。

2)スタイルシートに画像URLを挿入しよう
スタイルシートの『#banner,#subbanner』を見てください。
『background』の右側に、『url(画像のアドレス)』とあるのが分かるでしょうか?
ここに、先ほどコピーした画像URLを貼り付けます。






貼り付けたら、プレビューで確認してみましょう。
上手くいったなら、ページ下の【登録】ボタンをクリックします。

※必ず【登録】ボタンをクリックしましょう。クリックしないと変更が反映されません。

 まとめ

 1.使用しているテンプレートのトップ画像の幅・高さを把握しておく
 2.画像を用意する。(お好みで加工しておく)
 3.画像をアップロードする
 4.画像URLをスタイルシートに記述する。
 5.変更を「登録」する

カスタマイズは以上です。
サイズに合った画像を用意、アップして、スタイルシートに記述。
たったこれだけの作業で、サクッとオリジナルのトップ画像が表示されます。
見た目に他の人とは違う、オリジナルなブログになれますよ!
ぜひ試してみてください!!

※変更は慎重に!自己責任でお願いします。

#カスタマイズ

この記事を書いた人