タグ:CSS・HTML ( 85 ) タグの人気記事
文字の大きさ
ブラウザの「表示」→「文字のサイズ」 から、文字の大きさを変えることが出来ますが、今まであまり気にしていませんでした。
が、一昨日、ブラインド枠のことを書いているとき、文字が小さくて読みにくかったのでブラウザで文字のサイズを「中」から「大」にしたところ、
あらら、せっかく乏しい脳みそを絞って書いた枠の中の説明文が大胆にはみ出しています。
あわててお詫びの書き込みをしましたが、考え直して文字サイズを固定してみました。
なんとか見られるようになり、お詫びの一文は消しましたが、・・
なるほど~、よく、文字サイズを固定しないほうが良いというのは、こういうことだったのですね。
視力が弱い人はブラウザで文字を大きくしてみているわけですから固定されている文字は小さくて見えにくいですね。レイアウトデザインだけにこだわっていると思わぬ失敗をしていることに気がつきません。
下は文字サイズを絶対値のpt(ポイント)を指定したものと、何も指定しなかったものです。
最初の画像はブラウザの文字サイズを大きくしても変わらないと思います。
次の画像はブラウザの文字を大きくするとレイアウトデザインが崩れます。(サイズ「中」でぴったり収まるように書いています)
気がつかなかったとはいえ、今までもやっていたかもしれません。反省。


30幅の
グリーンのブラインド枠に(中は黒)
名前を入れて(濃いピンク色)
バラの花の写真を
加算合成
ピンク透明度50で
枠25・丸め半径22の
角丸切抜き
この文字は
フォントサイズ
9ポイントで
書いています。
                         pt(ポイント)は固定された大きさなので
                         ブラウザの文字を大きくしても同じです


30幅の
グリーンのブラインド枠(中は黒)に
名前を入れて(濃いピンク)
バラの花の写真を
加算合成
ピンク透明度50で
枠25・丸め半径22の
角丸切抜き
この文字は
フォントサイズを
指定しないで
書いています。
                     ブラウザの文字の大きさを大きくすると
                     レイアウトが崩れます。

あ~、しんど

初心者のためのホームページ作りよりフォントのコントロールについて banbanさんのページです
[PR]
by mmi331 | 2008-11-18 21:15 | html・css | Comments(3)
ブラインド枠
街路樹のユリノキです。すっかり色づいて冬の訪れを感じます。
このブラインド枠はフォントを使わないで作りました。昨日のブラインド枠と同じです。
d0048312_20405773.gif


忘れないうちに作り方を書いておきます。

500x375PXの大きさで説明します。画像は半分にリサイズしていますがクリックで元の大きさになります。

d0048312_14383172.gif
新規作成、白。(黒でもいいのですがその場合その場合すべて逆の操作になります)
立体枠→凹ませる 30 (枠の大きさは好みですが、例では30です)
上の枠が濃いグレーで左の枠が薄いグレーになっていると思います。

d0048312_1435856.gif

上の枠を黒で塗りつぶす
左の枠は白で塗りつぶす。
図①
d0048312_1481848.gif
上の図①をコピーし、フリップ回転(垂直に回転)して
暗い画素優先で合成します

図②


d0048312_1422915.gif上の図②をコピーし、黒で塗りつぶします。
加工→ブラインドで、幅3、色は白、水平にチェックを入れ、OKします。

図③
d0048312_14272138.gif
先ほど図②をコピーしていますので
そのまま
編集→合成→明るい画素優先で左図のようになります。
図④

図④をコピーして別のJTrimを立ち上げ、「貼り付け」しておきます。 
d0048312_14424196.gif
最初の画像の立体枠まで戻ります。
今度は左側の枠を黒く塗りつぶし、上の枠は白く塗りつぶします。
コピーして、今度はミラー回転(水平回転)し、暗い画素優先で合成します。
図⑤
図⑤をコピーした後、黒く塗りつぶしブラインド作成

d0048312_14494660.gif先ほどと同じ操作をしますが、今度はブラインドの水平チェックをはずし、垂直にします。
(クリックで拡大します)

d0048312_1503461.gif
もう、おわかりですね。

編集→合成→明るい画素優先で左右の枠も出来上がりました。

図⑥


d0048312_1591847.gif図⑥をコピーし、先ほど図④を貼り付けたもうひとつのJTrimの画像(上下枠)に暗い画素優先で合成します。

これで出来上がりですが・・・・



d0048312_15215190.gif
ネガポジ反転して
このまま夜景の写真を加算合成すると昨日のような画像になります
中に入れる画像の明るさで合成方法は変わってくると思います。
また、ブラインドは縦でも横でも自由に出来ます。(水平チェックの順番を逆にします)

d0048312_15261536.jpg
グラデーションをかけたり、色で塗りつぶしたり(50%)、RGB交換をしたり・・・

その場合、中は範囲 20~25ぐらいにして黒または白で塗りつぶします。
左の図は赤と青のグラデーション50%をかけた後、中を黒く塗りつぶし、ネガポジ反転しています。

枠の大きさがわかっているので座標指定切り抜きも簡単ですし、中に写真を入れるのも簡単に出来ます。後から立体枠をつけてもおもしろいです。

座標指定切抜き30.30.横幅-30、縦長さー30
OK→ ここで画像を挿入

画像の入れ方はJTrimRingでJTrimに詳しい方々がいろいろわかりやすく説明なさっていますのでそちらからご覧ください・・・・と、まる投げ。 ボキャ貧の私には無理!(^_^;)

角丸切抜き→丸め半径22、枠線5  コピー
元に戻る→ 上書き合成

縦、横、斜めも自由自在です ♪
d0048312_15473087.jpg

枠を作って保存するときは必ずBMPで。あとで色掛けが面倒なことになります。(経験者)
念のためホームページにも載せてみましたが、間違いがあったら教えてくださいませ。
[PR]
by mmi331 | 2008-11-16 21:08 | 画像加工 | Comments(4)
炎上
今日はいっぱい色んな事がありすぎて mmi 炎上 (ブログのことではありません)

午前中は防災訓練がありましたが雨が降っていたので小学校の体育館でプロジェクターによる防災の映像を見ました。
また、四川大地震で実際に救援活動に参加した消防署の方の生のお話を聞き、あらためて地震の怖さを知りました。
まずは、身の安全の確保が第一ということ。(火の後始末はその後です)
また、都心で地震があったときはビルの中に逃げ込んだほうが良いというのは意外でしたが、ガラスが落ちてくるので外に出るより、中に逃げ込んだほうが良いそうです。

それから、避難するときは必ず電気のブレーカーを落としていくこと!
阪神淡路大震災で火災が発生したのは早い時期に電気が復旧し、その際のショートによるものだそうです。

午後から地域の花壇にチューリップの球根とパンジーを植えました。テレビ局新聞社の人が取材に来るというので張り切っていましたが、都合で来れなくなったそうで、・・・・
でも、花は生き物。雨の中、植え込んできました。

その後、いろいろ、あれこれ、なんだかんだ、すったもんだがあり、ふ~、こんな時間に・・・
マウスオンしてください (Gimpです)
d0048312_22414335.jpg
d0048312_2242405.gif


でも、来月姉と会えそうなので、楽しみです。
[PR]
by mmi331 | 2008-10-26 22:21 | Comments(6)
画像編集
写真は撮ったけど、真っ暗でなんだかわからないときがあります。(私だけかもしれないけど)
そんなときは画像編集ソフトで明るくしたりコントラストや、ホワイトバランスやバックライトなどでくっきりさせることができる(場合が)あります
下の画像はすぐには何の写真かわからないと思います。
マウスオンで画像が変わります。PhotoScapeで、バックライト他、あれこれ適用しました。
d0048312_204713100.jpg
d0048312_20454412.jpg


今はもう収穫が終わって葉だけになってしまいましたが、6月はじめまで毎日にょきにょき生えて、新鮮なアスパラガスを食べることが出来ました。
黄色い小さな点はアスパラガスの花です。今は花盛りです。
[PR]
by mmi331 | 2008-06-28 20:46 | 画像加工 | Comments(1)
ムム・・・
絶対位置で文字を重ねたかったのですが、やっぱり出来ませんでした。
同じブログお仲間、「パソコンで遊びた~い」のmakoさんは綺麗に文字を重ねていますが、私がまねをすると、ページの右端に行ってしまいます。
私が間違っているのかもしれませんが、テンプレートが違うということも考えられます。
       なんちゃって
散々苦労して何回も数字を書き直してやっと文字(画像)を重ねました。
きっと数字は決まった法則で出るのだと思いますが、なにしろ数字に弱いので目分量です。
e0095659_1621830.gif
e0095659_1631578.gif


この画像のソースです。
<div style="background-image:url(背景画像のURL);padding-top:(マーキー画像の上からの距離);"><marquee>マーキーで流す画像のURL</marquee><div
style="margin-top:(上に重なる画像の距離)" >上に重なる画像のURL</div></div>
*上に重なる画像の距離はマイナスの値になります。

今回も途中でI.Eのプログラムの終了画面が出てしまいました。
このタグを使用なさる方は自己責任でお願いします。(^_^;)

一時画像が消えて大変失礼しました。
もうひとつのブログで試したものをそのまま貼り付けていたのに、もうひとつの記事をうっかり消してしまいました。おっちょこちょいです。
ついでにソースも直しておきました。(5月23日)
[PR]
by mmi331 | 2008-05-21 22:33 | 画像加工 | Comments(0)
飛行機? と 孔雀サボテン
このバラの写真を撮ったときからこんなイメージがわいたのですが・・・

以前どこかのブログで建物の後ろを飛行機が通るのを見かけたのですが、テーブルと絶対位置を取り入れていました。
でも、このブログはテーブルが使えません。
しかも絶対位置を使ったらブログの端から飛行機が現れたり、日付やコメントの位置がずれたり・・・・もう、たいへん!
夕べ寝ながら考えたのですが、良い考えが浮ばず、、すったもんだの末、今日、なんとかそれらしく・・・
ここに至るまで、入力がだぶって表示されたり、(たとえば、と打つと、たとえば、たとえば、となります)、プログラムの終了画面が出たり、と、またパソコンが壊れるかと思った
責任が持てませんので説明ははぶきます。
バラは神代植物公園のバラです。飛行機はペイントで適当に書きました。

テーブルを使用して作ったページです 
http://homepage3.nifty.com/mamekobosi/sora/sora.html

今朝は嵐のようなお天気でしたが気がつけば廊下の隅で孔雀サボテンが咲いていました。
d0048312_19594771.jpg
PictBearで合成と立体枠
[PR]
by mmi331 | 2008-05-20 20:03 | 画像加工 | Comments(9)
アニメーションgif画像
2月15日にI.E6からI.E7にしました。
タブ機能がついて便利になったそうですがctrlキーを押さないといけないのでちょっと面倒です。でも、この記事を書いている途中お気に入りからctrlキーを押しながら他のページを開いても投稿欄の記事が消えることがなくなったので、便利・・・・かな?今までどおりもうひとつ立ち上げれば良いだけの事ですが。
変わったことといえば今までマイドキュメントのアニメgif画像を右クリックでI.Eから開いて、アニメを確認していたのですが、I.E7 にしてからはアニメが再生されません。
gifはPhotoEditorで開いてしまうので動きません。
ところが、ブラウザを開いてから(オフラインでもOK)アニメgifを右クリック、I.Eから開くとちゃんとブラウザで動きます。インターネットオプションの設定が変わったのかと思って見てみましたが、わかりませんでした。昨日、gifアニメを作成していて感じたことです。
追記:コメントをいただいて、右クリック「プログラムから開く」で「Windows Picture and Fax Viewer」から開いたらちゃんと動きました。そういえばフォルダの表示で「写真」にするとWindows Picture and Fax Viewerで動きますね。いつも「縮小版」にしているので気がつきませんでした。


d0048312_15282962.gif
背景画像の桜はそのままでは重いのでグラデーションを掛けてあります。

昨日アップしたウグイスの向きだけ変えてアニメにしました。
(PictBearで加工)




(Giamでアニメ化)


(画像を左寄せ、または右寄せにした場合)

ソースです
<div style="background-image:url(背景画像のURL); padding:20px">

文章
<br clear="all"> (画像を左寄せ、または右寄せにした場合)
</div>
[PR]
by mmi331 | 2008-03-31 20:28 | パソコン・周辺機器 | Comments(2)
背景画像
マーキーは見えないブラウザもあるということで、自分で遊んでいるだけですが、
背景画像の貼り方についてちょっとメモしておこうと思います。
下の画像ではグラデーション画像を背景画像として使用しています。
YYYYY
ハートはフォント(webdingsのY)です


<div style="background-image:url(背景画像のURL)">
この間にマーキーのタグ(ソース)を書きます。</div>

以前の説明では</div>が抜けていました。お詫びします。
この背景画像URLですが、自分のホームページにアップロードしてその画像URLを貼り付けてもいいのですが、こちらにアップロードして使用することも出来ます。
まず、参照から画像をアップロードします。gifまたはjpgのファイル名(アップロード後の)が出ますのでクリックします。画像が現れますので画像の上で右クリック。プロパティで画像のURLが表示されていますのでそれをコピーして(背景画像の URL)欄に貼り付けます。
投稿欄の画像は消します。ただし、参照でアップロードした画像は削除してはいけません。なくなってしまいます。
追記*単純にプレビューで画像を表示させ、右クリックでプロパティからURLをコピーした方がいいです。上の方法でも背景画像は表示されますが、メモ帳編集などのときはプレビューで表示された画像のURLじゃないとうまく画像が表示されませんでした。失礼しました。
メモ帳編集やスキン編集も一度exblogのアップロードしてから、画像のURLを使用します。
なお、バナーなどはマイイメージアカウントに登録しておいた方がいいと思います

スキン変更→スキン編集→HTML編集→マイイメージアカウントにイメージ登録

上のマーキーでは私のスキンの幅が500なので幅500の背景画像を使用しました。
文字やマーキーの高さ分(<div>~</div>の間分)、背景画像が表示されます。
*これはexciteブログで試したことです。他のブログはわかりません。
[PR]
by mmi331 | 2008-03-27 21:08 | html・css | Comments(7)
朝から暖かい日が続いています。朝食前に畑に出かけて菜花類を収穫して、ちょっと違う道を通ったら、意外な場所を発見。細い階段の奥に稲荷神社があるのです。赤い鳥居が何本もあってそこをくぐるとお稲荷さんがあります。両脇に狐が鎮座しています。
写真に撮ったけど、もしかして個人のお宅の守り神様かもしれないのでアップしませんが、なんだか楽しい朝のひと時でした。もちろんお賽銭を入れてきました。

その階段の脇に咲いていた寒緋桜です。大きな木で、満開でした。
スタイルシートで枠をつけました。
上からridge、dotted、20pxの色枠です

写真にridge枠をつけました

写真にdotted枠をつけました


背景色20pxはpaddingで

どういうわけだかちゃんと表示されません・・・・
[PR]
by mmi331 | 2008-03-13 20:57 | html・css | Comments(2)
水泳教室
息継ぎなしで泳いでくださいといわれ、(途中で立つのを)すっかり忘れ、25メートルノーブレスで泳いでしまいました。ゴールの後、頭がキンキンと痛くなり、脳が酸欠状態になっている気がしました。とっさに思ったのは水着姿で救急車に乗るわけには行かない・・・・・・・・・
落ち着いて呼吸を整えたら治りました。危ない危ない。無理をしてはいけません。年を考えなくっちゃ。



e0095659_1683672.jpg


e0095659_2164640.gif


驚かせてすみません
くじら(?)は図鑑を見ながらオートシェイプで描きましたが、細かい作業は苦手なのでほとんどフリーハンドで描きました。
マウスオンで画像が変わります。
ma-komさんのブログからヒントをいただきました。ma-komさん有難う!
[PR]
by mmi331 | 2008-03-01 21:20 | Comments(0)