今度はブログの幅より広い画像を使って画像クリックできるようにして見ます
CSS ヘッダー3 の説明で使った画像を使ってみます・・
ヘッド画像を作る2 Pixl アメブロ向上企画書で過去に記事にしましたが・・
http://ameblo.jp/exlink/entry-10504899904.html
http://www.pixlr.com/
高機能で無料のオンライン画像編集ツール
pixlrのトップ画面で →Open image editor← をクリック
現在は日本語環境のパソコンで開くと自動で日本語で表示されるようになっています
今回はCSS ヘッダー3 の画像を加工してみるので・・・
URLに・・・
http://stat.blogskin.ameba.jp/blogskin_images/20110811/23/93/21/p/o12000700exlink0021313073341872.png
↑をコピペしてOK
画面に封筒画像が表示されました・・・
この窓の部分にブログタイトルを合成してみます
ツールバーの下のほうにあるタイプツールをクリック
文字を入れる部分を決めてから（あとで位置は自由に動かせますからだいたいでかまいません）
ブログタイトルを入力・・・
フォントや文字のサイズや太さや傾きを決めたり・・・・
文字の色も変えられます・・
文字を入力するとレイヤーは[Ａ]マークの文字レイヤーです
このままではこれ以上の加工が出来ませんので・・・普通のレイヤーにします
レイヤー → レイヤーをラスタライズする
これで普通のレイヤーになりましたのでいろいろ加工が出来ます
が・・文字ではなくなりました（文字の形をした画像）ので文章の変更は出来なくなります
ブログタイトルのあるレイヤーを選択して青くなったら
編集 → 自由変形
カーソルの位置で・・・回転や縮小などが出来ます
今回は封筒の窓に合わせて傾けたいので角にカーソルを近づけて回転のカーソルにして・・
適当に傾けて封筒の窓に合わせます
よければ・・てきとうにどこかクリックでもすると確認窓が現れますので「はい」
完成した画像を保存します・・
背景が透明な場合はPNG形式で保存します
ＰＤＸ形式はレイヤーの状態とかこのままで保存をします
途中でやめたり・・一度作った画像を修正したりする場合に使いますので
ＰＤＸ形式でも保存しておくとあとで便利です
名前をつけて保存・・・
今回の画像は横幅が800pxをオーバーしますので
ブログの画像フォルダーにはアップできません（アップしても自動で横幅が800pxに縮小されます）
ＣＳＳの編集のブログデザインヘッダ・背景用画像の追加で保存します（ココには5枚までしか保存が出来ません）
↓こんな画像ができました・・
この記事を参考に楽しいヘッダー画像を作ってみてください
次回はこの画像を表示してトップに戻るリンク部分のエリアを設定します