ブログ カスタマイズ TOP画像の変更
挑戦してみよう！
以前から自分の好きな画像をTOPに使いたいと思っていましたが
今回ようやく成功しました♪
私でも出来た簡単な方法を説明します。
なるべく分かり易く書いたので少し長くなってますが
内容は意外と薄いのでチャレンジしてみては？
【 TOP画像 カスタマイズ手順 】
１．トップ画像のサイズを確認する。
１－１．
現在使っているテンプレートのTOP画像を名前を付けて画像を保存しましょう。
１－２．
保存した画像のプロパティを開き概要タブを選択すると幅と高さが確認出来ます。
（760ｘ220 740ｘ228 ピクセル等）
この画像サイズに合わせて自分のお気に入り写真を加工します。
２．トップ画像で使う素材を用意し加工する。
２－１．
TOP画像に使いたい画像ファイルを用意しましょう。
２－２．
Windows付属の画像加工ソフト、ペイントを使用します。
プログラム⇒アクセサリ⇒ペイントでソフトを立ち上げます。
２－３．
変形⇒キャンバスの色とサイズを開き
１－２．で調べたTOP画像サイズを幅、高さに入力しＯＫをクリックする。
何もないキャンバスが出来ますね、ここに画像をはめ込めば良い訳です。
２－４．
まず編集⇒すべてを選択をクリックします。
キャンバスが選択された状態になりますね。
★ここがポイント
選択された状態のまま、編集⇒ファイルから貼り付けをクリックする。
ファイルから貼り付けウィンドウが開くので、加工したい画像ファイルの
保存場所を開き、写真を指定してＯＫをクリックする。
キャンバス内に画像が入りましたね。
好みのレイアウトになる様にマウスで上下左右にドラックします。
決まったら選択範囲外をクリックして画像を確定させる。
※写真のサイズは変形⇒伸縮と傾きで変更出来ます。
反転と回転も役に立つと思います。
２－５．
ファイル⇒名前を付けて保存で加工した画像に名前を付け、
ファイルの種類欄でJPEGを選択して保存する。
ペイントを終了します。
３．用意した画像をブログにUPする。
３－１．
管理画面⇒画像一覧を開き、ペイントで保存した写真をアップロード。
記事を書く時の写真の挿入と同じなので簡単ですね。
※ファイルサイズはオリジナルサイズを選択します。
（ペイントでサイズ調整済みなので）
３－２．
アップロードした画像をクリックしてみましょう。
★ここがポイント
別ウインドウが開き画像の保存先アドレスが表示されますので
アドレスをコピーします。
このアドレスが重要です！
４．スタイルシートでトップ画像を入れ替える。
４－１．
管理画面⇒テンプレート⇒カスタマイズを選択します。
★ここがポイント
次にスタイルシートの上から1/4くらいの箇所にある記述を探します。
見つかりましたか？
上の画像の中でTOP画像のサイズも確認出来ます。
４－２．
★ここがポイント
カッコ内のアドレスを３－２．でコピーしたアドレスに差し替えます。
※この時アドレスの両側にある （ ） を消さないように注意して下さい。
【最重要ポイント】
#banner,#subbanner{
background:#fff url(/_img/ecology/ecology_life.jpg) left;
padding:0px 0px 0px 0px;
height: 220px;
４－３．
プレビューで確認して登録したら完成です！お疲れ様でした。
あなたにおススメの記事
関連記事