忍者ブログ
GIMP思い込みチュートリアルGIMPの使い方

画像編集ソフトGIMPの使い方(チュートリアル)を中心に、GIMPに関する事を書いています。
思い込みで書いている部分もあると思いますので、コメントでのご指摘、随時募集中です。

ブログ内検索
カテゴリー
月別記事一覧
ツイート

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

1つ新しい記事:GIMP(ギンプ)の環境設定
1つ古い記事:GIMPを使って迷路の出口をあぶりだす方法

▲ このページの1番上へ ▲

忍者ブログ・テンプレート「Aqua Blue」作成

しばらく書いていませんでしたが、また、忍者ブログのテンプレートを作ってました。という事で、GIMP(ギンプ)とは関係ない話。

IE6で「透過色を含んだpng画像を表示する方法」とか「position:fixedを使わずに(というか、使えないので)画像を固定する方法」とか、テンプレートいじくりながら色々と学習したつもりなので、それについてまとめておきます(いつか使うかもしれないし…)

詳しくは以下の通り。
とりあえず、初めにテンプレートについて。
出来上がったテンプレートはこんな感じ(画像をクリックするとページが開きます)↓


以前作ったのは黒ベースで暗かったので、今回は明るくしようかと、青を使ったシンプルなデザインのテンプレートにしました。涼しげな感じになったと思います。もうスグ夏だし、雰囲気的にはいい感じじゃないかと。

基本的に線で囲ったりってのは好きじゃないです(前回のは囲ってましたが)。なんだか線で囲うと窮屈な感じがしてしまうので。

ちなみに、本当なら下の画像のように、意味も無くグラデーションをかけたものにしたかったんです。(画像はクリックで拡大します)
070627gradation.jpg

が、Internet Explorer(IE)でもFirefoxでも表示できるように設定したら、ブラウザの幅が狭い場合、スクロールバーが上手く表示さず、操作性が悪いものになっちゃって…。
「これは共有テンプレートにはできんだろう」と思いグラデーションは無しにしました。

グラデーションは画像を使ったんですが、IE6では「透過色が使えない」「"position:fixed;"が使えない」ので、アーでもない、コーでもないと、結構、苦労したのになぁ…。

以下、いつか参考にするかもしれないので、その事についてまとめておきます。

まず、透過色について。

以下のページで紹介されているJavascriptを使わせて頂きました。
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

このJavascriptを読み込むだけで透過色は問題解決。といっても、Javascriptの内容については理解できてないですが…。


次の問題、「"position:fixed;"が使えない」について。

これに関しては下の二つのページを参考にしました
IEで固定座標を指定する方法
position

とりあえず「IEで固定座標を指定する方法」の方を試してみるも上手くいかず、「position」を見ながら「あ~そうか」と自分なりに理解して、「IEで固定座標を指定する方法」をちょっと変えて作りました。

結局、どうしたかを簡単に示すと、以下のような感じになります。ここでは簡単のため上側のグラデーション画像を固定する方法のみ示します。

CSSの編集
html {
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
これで、bodyは高さをウィンドウサイズにし、そこからはみ出た部分をスクロールするように設定します。
で、画像を表示するブロックは
div.GradationTop {
position:absolute;
top:0;
left:auto;
z-index:1;
}
body > div.GradationTop {
position:fixed;
top: 0px:
left:auto;
z-index:1;
}
とします。IE6は子セレクタ(「body > div.GradationTop」の「>」部分)を認識しないので「body > div.GradationTop 」以下は無視されます。一方FirefoxやIE7などのブラウザは子セレクタを認識するので、「div.GradationTop」の情報を上書きします。

また、HTMLはこんな感じ↓
    <body>
        <div class="GradationTop">
            <img src="グラデーション画像のURL" alt="" />
        </div>
    </div>
    <div id="EntryBlock">
        内容部分
    </div>
    </body>
</div>
で、そんなこんなで出来上がったサンプルページはこちら↓
サンプルページ

ブラウザのウィンドウ幅を狭めると、スクロールバーの操作性が悪くなるのが分かると思います。

今回は、画面全体にグラデーションをかけようとして上手くいかなかったんですが、任意の要素に対して固定位置を設定するのには使えますね。

「IE6がもっと、まともなブラウザなら、こんな苦労しなくて済むのに」と思いつつ、IE7が早く浸透してほしい、いや、Firefoxがもっと浸透してくれれば…。まぁ、勉強できたので良しとするか。 でも、一度ビル・ゲイツのメガネを割ってやりたい。

ちなみに、こういったグラデーションのかかった効果は画像を使わなくてもJavascript使えば出来るようです。が、それに思い至ったのはテンプレートを審査に出したあと。なので、またテンプレート作る気になったときには挑戦してみようかと考え中。でも、その前にJavascriptちゃんと勉強しときたいなぁ。

って、そんな事やってるからGIMPについて書かなくなってしまうんですね…。GIMPについてもちゃんとやりますよ。
PR
1つ新しい記事:GIMP(ギンプ)の環境設定
1つ古い記事:GIMPを使って迷路の出口をあぶりだす方法

▲ このページの1番上へ ▲

コメント一覧

コメント数:0

この記事にコメントする

申し訳ありませんが、現在コメントは受け付けておりません。

▲ このページの1番上へ ▲

この記事へのトラックバック

この記事と関係ないトラックバックは削除させていただきます。

トラックバックURL:

最近の記事
最近のチュートリアル
GIMPで凹凸感のあるシンプルなボタンを作る方法 GIMPで氷のテキストを作成する方法 【GIMP】下から飛び出す感じの虹色のテキスト GIMPで虫メガネを描く方法 GIMPでカラフルなモザイクのテキストを作成する方法 GIMPを使ってインフォメーション・アイコンを作る方法 GIMPで回転する地球のgifアニメーションを作成する方法 GIMPでサイコロ(角丸な直方体)を描く方法 GIMPで雪だるまのクリスマスカードを作る方法 GIMPを使って消しゴムを描く方法 GIMPを使って鉛筆を描く方法 リング式メモ帳の描き方

画像をクリックするとチュートリアルのページを開きます