ブログのテンプレートを変更しました。今まで淡路島から見た瀬戸内海の画像をタイトル部分に使用して全体を青でまとめていましたが、青系のテンプレートは冬になると寒い感じがします。先日、偶然日の出を撮影できたので、その画像をブログタイトルの背景に使い、赤を中心としたデザインに変えて、暖かみを出してみました。
このブログタイトルの背景画像を作るのにはちょっと手間をかけました。
まず、デジカメで撮った写真から日の出の部分を横長に切り出してきます。
このとき、できるだけ横長に切り出すようにはしますが、やはり画像の横幅には限界があります。切り出した画像をそのままタイトル文字の背景に使用すると、ブラウザの表示幅によっては背景画像がタイトル部分の右端まで届かず、背景が途中でプツッと切れた状態になってしまいます。何枚も横に連結できるパターン画像なら繰り返し表示すればいいので簡単ですが、今回の日の出画像は左右がつながりませんし、お日様をいくつも繰り返し表示するのは不自然です。
ブログのタイトル部分は、上から順にタイトルや説明の文字、背景画像、背景色の順に重なっています。つまり、透明なシートを1枚用意してタイトルの文字を書き、その下に背景画像を重ね、さらにその下に背景色の台紙を敷いた状態と考えてください。
背景色 (一番下に敷いた台紙) を青色にしているので、背景画像が右にいくに従って徐々に青くなり、右端で青一色になるようにグラデーションをかけると、背景画像の右端が背景色 (台紙) に溶け込みます。こうすれば背景画像の右端が尻切れトンボになるのを防ぐことができます。
このグラデーション加工にはGIMP for Windowsを使用しました。GIMPはPhotoShopに匹敵する強力な機能を持ち、かつ無料で配布されているグラフィックエディタです。簡単に言うと、お絵かきや写真のレタッチなどができるソフトです。GIMPは「ジンプ」または「ギンプ」と読みます。GIMP for Windowsはここからダウンロードできます (ソフトウェア配布サイトVectorにリンクしています)。
GIMPを起動して、横長に切り出した背景画像 (今回は日の出) を開きます。定義済みのグラデーションのリストを見てみましたが、左端が無色透明で右端に色が付く種類のグラデーションは見当たりません。新しくグラデーションを作りましょう。グラデーションは左端を無色透明に、右端を不透明の青色にしておきます。グラデーションを定義したら編集画面に戻ります。前景色に青色を指定し、右端から左側に向けて直線を引く要領で範囲を指定すると、その範囲にグラデーションがかかります。
これを先ほどの日の出画像の右側に連結して、さらに横長にします。
※ 画像を縮小表示しているので、縦方向の高さが縮んでいます。
ブログタイトルの背景には、この画像を使用しました。
この背景画像の横幅には1500ピクセルと十分な長さを取っていますが、UXGA以上の大型ディスプレイを使用している場合は、ブラウザを最大化すると、ブラウザウィンドウの横幅が1500ピクセルを超えてしまいます。当然、背景画像は右端に達する前に終わってしまいますが、背景画像の右端が徐々に青に変化しているので、背景色 (青) に自然になじんでくれます。
私が普段愛用しているJTrimにもグラデーション加工機能がありますが、残念ながらJTrimバージョン1.51のグラデーション加工機能では端の色として無色透明を指定できないので、今回の画像加工には使用できませんでした。
関連リンク:
Vector: GIMP for Windows …… ソフトウェア配布サイトVectorのページです。ここからGIMP for Windowsをダウンロードできます。
2005年4月20日の記事: ステンドグラス …… 過去にこのブログでGIMPを紹介した記事です。GIMPの基礎知識に関するリンクがあります。
このブログタイトルの背景画像を作るのにはちょっと手間をかけました。
まず、デジカメで撮った写真から日の出の部分を横長に切り出してきます。
このとき、できるだけ横長に切り出すようにはしますが、やはり画像の横幅には限界があります。切り出した画像をそのままタイトル文字の背景に使用すると、ブラウザの表示幅によっては背景画像がタイトル部分の右端まで届かず、背景が途中でプツッと切れた状態になってしまいます。何枚も横に連結できるパターン画像なら繰り返し表示すればいいので簡単ですが、今回の日の出画像は左右がつながりませんし、お日様をいくつも繰り返し表示するのは不自然です。
ブログのタイトル部分は、上から順にタイトルや説明の文字、背景画像、背景色の順に重なっています。つまり、透明なシートを1枚用意してタイトルの文字を書き、その下に背景画像を重ね、さらにその下に背景色の台紙を敷いた状態と考えてください。
背景色 (一番下に敷いた台紙) を青色にしているので、背景画像が右にいくに従って徐々に青くなり、右端で青一色になるようにグラデーションをかけると、背景画像の右端が背景色 (台紙) に溶け込みます。こうすれば背景画像の右端が尻切れトンボになるのを防ぐことができます。
このグラデーション加工にはGIMP for Windowsを使用しました。GIMPはPhotoShopに匹敵する強力な機能を持ち、かつ無料で配布されているグラフィックエディタです。簡単に言うと、お絵かきや写真のレタッチなどができるソフトです。GIMPは「ジンプ」または「ギンプ」と読みます。GIMP for Windowsはここからダウンロードできます (ソフトウェア配布サイトVectorにリンクしています)。
GIMPを起動して、横長に切り出した背景画像 (今回は日の出) を開きます。定義済みのグラデーションのリストを見てみましたが、左端が無色透明で右端に色が付く種類のグラデーションは見当たりません。新しくグラデーションを作りましょう。グラデーションは左端を無色透明に、右端を不透明の青色にしておきます。グラデーションを定義したら編集画面に戻ります。前景色に青色を指定し、右端から左側に向けて直線を引く要領で範囲を指定すると、その範囲にグラデーションがかかります。
これを先ほどの日の出画像の右側に連結して、さらに横長にします。
※ 画像を縮小表示しているので、縦方向の高さが縮んでいます。
ブログタイトルの背景には、この画像を使用しました。
この背景画像の横幅には1500ピクセルと十分な長さを取っていますが、UXGA以上の大型ディスプレイを使用している場合は、ブラウザを最大化すると、ブラウザウィンドウの横幅が1500ピクセルを超えてしまいます。当然、背景画像は右端に達する前に終わってしまいますが、背景画像の右端が徐々に青に変化しているので、背景色 (青) に自然になじんでくれます。
私が普段愛用しているJTrimにもグラデーション加工機能がありますが、残念ながらJTrimバージョン1.51のグラデーション加工機能では端の色として無色透明を指定できないので、今回の画像加工には使用できませんでした。
関連リンク:
Vector: GIMP for Windows …… ソフトウェア配布サイトVectorのページです。ここからGIMP for Windowsをダウンロードできます。
2005年4月20日の記事: ステンドグラス …… 過去にこのブログでGIMPを紹介した記事です。GIMPの基礎知識に関するリンクがあります。
蔵出し企画: おもちゃ箱の奥 2004年12月8日の記事は → 「野菜入り豆乳 (続)」 【みぃのつぶやき】 私、たいていのものは、ぜいたくを言わずに食べちゃいます。せっせと作った人がいると思うと、口に合わないから捨てるなんてできないなぁ。 ※ 過去の記事へのコメントも歓迎します。恐れ入りますが、コメントは該当する記事に書いてくださるようお願いします。過去の記事に関するコメントが今日の記事に書かれていると、他の読者が脈絡を理解できず、混乱してしまいますから。 |
私の場合は無料版のgooブログを使っているので、編集できるのはCSSに限られ、HTMLまでは編集できません。表示領域の横幅をある程度のサイズに制限できれば、背景画像のグラデーション加工をしなくてもいいんですけど。
gooの既製テンプレートは文字サイズが小さすぎて読みにくいので標準の文字サイズ (font-size:medium) にしたい、ただそれだけのためにテンプレートをカスタマイズしている「みぃ」でした。
サイトデザインって、けっこう悩みますよね。
ここだけ変えたかったんだけど、バランスが崩れちゃったんで、結局こっちも修正とか…。
タイトルバックのバナーを変更するだけでも、そうとう印象が変わってきますし、それにあわせてタイトル文字色も見直したり。
それ以前に、画像編集もこだわるときりがないですからね。
ご苦労様でした。