2011年01月05日

【第24回】サイドタイトルの画像サイズを変更する

第22回からの、ブログの幅を変更するシリーズ。

前回は、左サイドバーの幅を200pxから250pxへと広げてみました。

そしてその結果、メインコンテンツが入りきらなくなり、サイドバーの下に表示されるようになってしまっています。

SD_023_03.jpg

これを修正する必要があるわけなのですが、それは次回に置いておいて、今回は先に左サイドバーを完成させてしまいたいと思います。


さて、左サイドバーを見てみると、少しおかしな箇所があります。

SD_024_01.jpg

ご覧のように、サイドバーの幅を広げたので、その幅に対してタイトル画像の線が短くなってしまっています。

今回は、この画像を修正してみたいと思います。

★サイドタイトルの画像を変更する方法★

サイドタイトルの画像を取得し、PictBearなどでサイズを調整してブログにアップロードした上で、CSSにてその画像を参照するように修正する。

<手順1>
サイドタイトルの画像の所在(URL)を、CSSを見て確認する。
今回はサイドタイトルの背景画像なので、.sidetitleクラスのbackgroundプロパティにURLが記載されています。

.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、過去の作業で修正した箇所です。

<手順2>
背景画像のURLをIEなどのブラウザに入力し、画像が表示されたらその画像を右クリックしてPCに保存する。

SD_024_03.jpg

<手順3>
保存した画像のサイズを、PictBearなどで修正する。
ここでは、取得した画像の横幅が、以前のサイドバーの幅200pxに対して195pxだったので、新しいサイドバーの幅250pxよりも5px狭い245pxに修正しています。
(注)PictBearの入手方法や画像サイズの修正方法は第17回を参照してください。

SD_024_04.jpg

<手順4>
修正した画像を、Seesaaブログの記事を書くページでアップロードし、一度貼りつけてみて、そのURLを取得する。
取得すべきURLは、<img src="の後ろの文字列になります。

SD_024_05.jpg

<手順5>
.sidetitleクラスのbackgroundプロパティを、取得した新しいURLに変更する。

▼▼▼ 変更前 ▼▼▼
.sidetitle{
background:url("http://blog.seesaa.jp/img/bg/cat_stamp2/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}

▼▼▼ 変更後 ▼▼▼
.sidetitle{
background:url("http://seesaa-blog-design.up.seesaa.net/image/side_title.jpg") no-repeat 10px 0px;
color:#f90;
text-align:left;
padding:5px 0px 20px 55px;
margin-bottom:0px;
font-weight:bold;
border-top:1px solid #FF9900;
border-right:4px double #FF9900;
border-left:1px solid #FF9900;

}
(注)灰色字箇所は、過去の作業で修正した箇所です。

以上の作業で、サイドコンテンツのタイトルの背景画像は、修正したものに置き換わります。

▼▼▼ 変更前 ▼▼▼
SD_024_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_024_06.JPG

今回の修正では、猫の足跡の画像が少し横長になってしまいましたが・・・ここでは良しとしましょう。

もしこれが気になる方は、画像加工ソフトを使って、画像を横に継ぎ足すなどの修正を行ってみてください。

これで、左サイドバーのサイズ調整は完了です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。