トップ画像の変更方法

セフォ

2013年09月10日 18:40

 
やっぱりネタ切れなので、私のブログを見てくださる私と同じブログ初心者の方のため、
とってもわかりやすいトップ画変更方法講座\(^o^)/
の、はじまりはじまり〜( ゚Д゚ノノ☆パチパチパチパチ
 
 
 
まず、変更したい画像を用意します。

このブログの場合、
縦:960 ピクセル
横:228 ピクセル


の大きさで作りました。photoshopを使用しております。PSの場合ピクセルとは別でドキュメントサイズがありますが、このサイズは無視しちゃっていいです。これは印刷物等で使用する際のもので、ネット上ではピクセルだけが参照されます。


画像ができましたら、「管理画面」のメニューの「画像一覧」をクリックし、そこから先ほどの画像をアップします。


アップするとファイル一覧に表示されます。表示されたサムネイル(赤丸部分)をクリックしてみてください。


アップした画像が別ウインドウで開きます。そこに表示されたアドレス(赤丸部分)をのちのち使用します。

これはいったん置いておいて、また「管理画面」に戻ります。


 
次にいよいよカスタマイズですが、ブログの設定から「テンプレート」を選択しましょう。
 

「テンプレートの追加・再選択」コーナーから「テンプレートの追加(赤丸部分)」を選択します。
 
ここでベースにしたいテンプレートを選択しましょう。
すでに使用しているテンプレを元にカスタマイズしたい場合でもここで再び同じテンプレを選択しましょう。

カスタマイズはとりあえず隠れて行い、うまく成功したらブログに反映させるためです。失敗を公開しないのを防ぐためですね。
 
 
テンプレを追加できたら、それの「カスタマイズ」をクリックします。
 

するとこんな編集可能なテキストウインドウが4つ現れます。
今回編集するのは一番上(赤丸)のテキストです(^o^)
 

この画面の時に、ブラウザのメニューから「検索」を選びます。
たいてい“Ctrl + F”かな?Macの場合“⌘ + F”
 
検索で「_img」と入力します。


するとこの画面に近い結果になると思います。
なんか違うぞ!という人は“Ctrl + G”または“次を検索”を押してこれに近いところを見つけてください。
選択したテンプレートによって微妙に違うので注意です。
だいたい上からすこ〜しスクロールした所にあります。
 
ここをいじります。
 
 
では、先ほど上でアップした画像のアドレス

これですね。このアドレスをコピーします。
 

そして、この部分の
url(/_img/3_shinryoku/top_bnr.jpg)の部分の
( )の中にペーストします。
 
これで画像が変更されます。
 
 
 

後は微調整をします。
1:画像の横のサイズを入力します。
2:画像の縦のサイズを入力します。
3:先ほど変更したアドレス部分です。

 
1はブログの横のサイズにもなってますので要注意です。
なので、トップ画像を作る際は、選択したテンプレートの1と2の数値を初めに調べて、それに合わせて画像のサイズを決めるとミスがないと思います。
 
 
 
いじったら結果を見てみましょう。
 
編集したテキストボックスのすぐ下に「プレビュー」ボタンがあるので、そこをクリックしてチェックしてみてください。
どうですか?うまく画像変わってましたか?
 
 
うまくできた!と思ったら一番下にスクロールし、「登録」ボタンを押しましょう!
押さないと保存されませんので気をつけてください。

 
登録できたら、最後に「このテンプレートを使う」を押してブログに反映です\(^o^)/
 
 
簡単ですね〜!これでよりブログに愛着がわき楽しくなること間違いなしです^^
 
 
 
 
いや〜説明するって難しいですね!始めに「とってもわかりやすい」とか言っちゃいましたが
わかりやすくは無理でした!\(^o^)/
 
とにかく、簡単なので恐れず一度やってみましょー♪
 
 
↓他にも色々なカスタマイズ情報がいっぱいです

にほんブログ村


あなたにおススメの記事
関連記事