Blogのテンプレートとかスタイルシートとか その９ [2008年09月04日(木)]
今日は画像の横幅をかえてみようと思います。
XIV.改造６…まずは画像をひっこぬく
先の改造５の結果画面があれれな状態になったわけですが、
確実にいかれてしまった画像は２つでした。
TOP絵と、Blogの背景にあたる薄桃色の部分。
しかしながら、一般的なやり方である、右クリックメニューからの
イメージ保存はできません。この２つは。
何故か？
それはこいつらがスタイルシートで背景画像の指定で
表示されている画像だからです。
じゃあ保存できないじゃん…と思う人もいるかもしれませんが、
あいやまたれい！
まずはスタイルシートの設定を見直してみよう。
この２つはBlogの横幅と関連しているので、
設定しているとしたら、横幅周り…以前800とあり980と書き直した所…
付近が怪しいなと目星がつきます。
#container {
width:800px;
background:url(/template/118/img/bg.gif) repeat-y;
text-align:left;
margin:0px auto 10px auto;
border-bottom:1px solid #80518B;
}
#top {
background:url(/template/118/img/hr.jpg) no-repeat top center;
padding:0;
}
以前のこいつらが怪しそうです。
露骨に画像ファイルを指定してます。
しかし、ちょっとURLの指定が変です。
こういう先頭から全部書かず、一部分だけURLやファイルパスを
各方法を「間接パス」とか「相対パス」とか言います。
どっか基本となる場所があり、そこからどれだけ離れているか
という書き方の指定方法です。
で、まぁ、じゃあどこが基本の場所になるの？と言うと
"http://track-back.net/" です。
つまり
"http://track-back.net/template/118/img/bg.gif" と
"http://track-back.net/template/118/img/hr.jpg" となります。
試しに、この合体させたURLをブラウザにつっこんでみましょう。
画像ファイルだけが表示されたはずです。
そして右クリックメニューから保存ができるはずです。
ちゃちゃっと保存してしまいましょう。
XV.改造７…画像の横幅を変える
いよいよ画像の修正です。が その前に。
この作業はWindowsのPaintでは無理です。
できない事はないですが、保存がまともにできません。
ですのでグラフィックツールをどこかからか落としてきましょう。
ちなみに私はGIMPというフリーソフトを使っていますので、
そちらを使った場合の手順を書きます。
他ソフトを使っている方は同じに結果になるように操作して下さい。
では
○"bg.gif"
・GIMPにファイルをDragして読み込ませる。
・メニューから「画像＞キャンバスサイズの変更」を選びDialogBoxを呼び出す。
・Dialogのキャンバスサイズ欄にある鎖マークをクリックして鎖を外す
・幅欄の内容を800＞980にする。
（鎖マークを外していないとこの段階で高さが釣られて変わりますこれは×）
・オフセット欄の中央ボタンを押す。
・サイズ変更ボタンを押す
これでキャンバスサイズが９８０になります。
・メニューから「レイヤー＞レイヤーを画像サイズに合わせる」を選ぶ。
・メニューから「レイヤー＞レイヤーの拡大縮小」を選びDialogBoxを呼び出す。
・レイヤーサイズ欄にある鎖マークをクリックして鎖をはずす。
・幅欄の内容を800＞980にする。
これで横幅が綺麗に980になります。
○"hr.jpg"
ほとんど同じですが、bg.gifの手順にあった
・オフセット欄の中央ボタンを押す を辞め その代わり
・オフセット欄のX欄に179を入力する。 にします。
これで、絵が右に寄った状態でキャンバスサイズが大きくなります。
後は、背景の格子模様が不自然にならないようにコピペを繰り返し、
いかにもそれっぽい形にしていきます。
その作業結果は見ての通りです。
横幅９８０ 絵のズレもなくなりました。残っているのは文字のずれのみ。
ツールによって、キャンバスのサイズ変更、レイヤーのサイズ変更等
操作が違いますので頑張ってください。
では今日はここまでー
XIV.改造６…まずは画像をひっこぬく
先の改造５の結果画面があれれな状態になったわけですが、
確実にいかれてしまった画像は２つでした。
TOP絵と、Blogの背景にあたる薄桃色の部分。
しかしながら、一般的なやり方である、右クリックメニューからの
イメージ保存はできません。この２つは。
何故か？
それはこいつらがスタイルシートで背景画像の指定で
表示されている画像だからです。
じゃあ保存できないじゃん…と思う人もいるかもしれませんが、
あいやまたれい！
まずはスタイルシートの設定を見直してみよう。
この２つはBlogの横幅と関連しているので、
設定しているとしたら、横幅周り…以前800とあり980と書き直した所…
付近が怪しいなと目星がつきます。
#container {
width:800px;
background:url(/template/118/img/bg.gif) repeat-y;
text-align:left;
margin:0px auto 10px auto;
border-bottom:1px solid #80518B;
}
#top {
background:url(/template/118/img/hr.jpg) no-repeat top center;
padding:0;
}
以前のこいつらが怪しそうです。
露骨に画像ファイルを指定してます。
しかし、ちょっとURLの指定が変です。
こういう先頭から全部書かず、一部分だけURLやファイルパスを
各方法を「間接パス」とか「相対パス」とか言います。
どっか基本となる場所があり、そこからどれだけ離れているか
という書き方の指定方法です。
で、まぁ、じゃあどこが基本の場所になるの？と言うと
"http://track-back.net/" です。
つまり
"http://track-back.net/template/118/img/bg.gif" と
"http://track-back.net/template/118/img/hr.jpg" となります。
試しに、この合体させたURLをブラウザにつっこんでみましょう。
画像ファイルだけが表示されたはずです。
そして右クリックメニューから保存ができるはずです。
ちゃちゃっと保存してしまいましょう。
XV.改造７…画像の横幅を変える
いよいよ画像の修正です。が その前に。
この作業はWindowsのPaintでは無理です。
できない事はないですが、保存がまともにできません。
ですのでグラフィックツールをどこかからか落としてきましょう。
ちなみに私はGIMPというフリーソフトを使っていますので、
そちらを使った場合の手順を書きます。
他ソフトを使っている方は同じに結果になるように操作して下さい。
では
○"bg.gif"
・GIMPにファイルをDragして読み込ませる。
・メニューから「画像＞キャンバスサイズの変更」を選びDialogBoxを呼び出す。
・Dialogのキャンバスサイズ欄にある鎖マークをクリックして鎖を外す
・幅欄の内容を800＞980にする。
（鎖マークを外していないとこの段階で高さが釣られて変わりますこれは×）
・オフセット欄の中央ボタンを押す。
・サイズ変更ボタンを押す
これでキャンバスサイズが９８０になります。
・メニューから「レイヤー＞レイヤーを画像サイズに合わせる」を選ぶ。
・メニューから「レイヤー＞レイヤーの拡大縮小」を選びDialogBoxを呼び出す。
・レイヤーサイズ欄にある鎖マークをクリックして鎖をはずす。
・幅欄の内容を800＞980にする。
これで横幅が綺麗に980になります。
○"hr.jpg"
ほとんど同じですが、bg.gifの手順にあった
・オフセット欄の中央ボタンを押す を辞め その代わり
・オフセット欄のX欄に179を入力する。 にします。
これで、絵が右に寄った状態でキャンバスサイズが大きくなります。
後は、背景の格子模様が不自然にならないようにコピペを繰り返し、
いかにもそれっぽい形にしていきます。
その作業結果は見ての通りです。
横幅９８０ 絵のズレもなくなりました。残っているのは文字のずれのみ。
ツールによって、キャンバスのサイズ変更、レイヤーのサイズ変更等
操作が違いますので頑張ってください。
では今日はここまでー