タグ:CSS・HTML ( 85 ) タグの人気記事
windows7
今日は月に一度の同好会でした。特にテーマは決めないでわいわいとおしゃべりしながら情報交換をしています。
今日は、Kさんがwindows7を持ってきてくださいました。早速買ったんですって。
Kさんは(たぶん)最高齢で、昭和一桁の前半・・・かな?と思われますが、意欲的です。私がまだwindows98でもたもたしている時にすでにXPを買い、その後、vistaを買い、そして今セブンです。ため息がでますね。
ワンタッチボタンが7個もついています。32ビットにも、64ビットにもできるというお話でしたがちんぷんかんぷんです。64ビットにすれば早いでしょうが、XPで使っていたソフトが使えなくなるとかならないとか・・
Kさんのwindows7パソコン
d0048312_23152979.jpg
短い時間でしたがちょっと使わせていただきました。ペイントが面白いのです。私はvistaを持っていないので余計変化を感じました。私にとっては高価なおもちゃですが、今のXPが壊れたら7で遊びたいなぁ~
windows7のペイントで出来ること
AllAboutのページ

その後、ホームページのことで色々お話しがありました。自治会のホームページをすべてご自分で管理していらっしゃるI先生が、自治会のページがHTML,CSS共にW3Cのお墨付きをいただいたとおっしゃるので、家に帰ってから早速見てみたら、お~~、W3Cのマークが付いてる!!
うらやましくて私も一生懸命中身のないページをいじって、なんとかW3Cのマークをもらったけど、 厳密に言えば穴だらけです。
相当前に作ったけど、全然手を入れていなかった私のページです。笑わないでね。
(手直ししたのはこのページだけです。念のため。後はひどいもんです)

ホームページのチェックはこちらから。URLを入れてチェックします。
Another HTML-lint gateway
こちらはCSSをチェックしてくれます。
CSS検証サービス

こんなことばっかりしていたので今日の加工は無しです。
[PR]
by mmi331 | 2009-11-04 23:54 | パソコン・周辺機器 | Comments(2)
マーキー
う~ん、自分で作るのも難しいけど、説明するのはもっと難しい。 (うまくできるかなぁ~)
昨日のマーキー画像は背景画像に夜空の月、魔女を透過してマーキーで動かし、その上に雲とカボチャのの画像を重ねたものです。画像は下の4枚です。魔女は別々のものですが、便宜上背景画像に貼り付けました。d0048312_219391.gif
左の画像は縮小してあります。
背景画像はJPGです。(何でもいいです)500×700です。
黒色だけでも良かったのですが、月フォントもあったので。
繰り返したくなかったし、余分なタグも書きたくなかったので大きめのサイズにしました。

紫魔女のサイズは200×200ですが、HTMLで100×100にしました。
エンボス魔女も透過してあります。背景画像の上に飛ばす時は周りを透過しないと四角い枠をつけたまま飛ぶことになります。周りが背景色と同じ場合はその限りではありません。

d0048312_2110760.gif
上に重ねる画像も周りを透過します。透過した部分を魔女が飛びます。
透過をする時は透過する色を画像で使用していない色にし、jtrimやPhotoEditorの透過アイコンでクリックします。
透過アイコンです 透過アイコン

透過した画像は必ずgifで保存します。

下のタグはエキサイトブログで使用できる普通のタグです。gooブログでは特殊なタグを使うのでこのまま使うことは出来ません。
昨日のソースです。数値は画像によって違いますのでそれぞれ直します。

<div style="background-image:url(背景画像のURL)"><MARQUEE scrollAmount=5 behavior=alternate width="600"><MARQUEE scrollAmount=5
direction=up behavior=alternate width="100" height="200">マーキーで動かす透過画像1</MARQUEE>
<MARQUEE scrollAmount=7 direction=down behavior=alternate width="200" height="300">マーキーで動かす透過画像2</MARQUEE></marquee>
<div style="margin-top:-400px">上に重ねる透過画像</div></div>

さて、最初にこれをやったのは、ある、gooブログでビルと木の間をたしか、バスと飛行機が走っている画像を見たときです。(だいぶ前なのではっきりと覚えていません)
その方はtableタグを使って作成なさっていました。
このエキサイトブログではtableタグが使えないのでdivタグを使って工夫しました。
その時の画像です。2008年5月20日
そこで、これをgooブログで出来ないかと、がんばってみました。(gooブログはややこしくてずいぶん前にやめてしまいましたが、まだ残っていたのでためしてみました。
gooブログ・マーキーです。
できましたね。最初、「<」がちょろちょろ出るので困り果てました。

d0048312_21531486.jpg
背景画像はバラの写真です。
飛行機と手前に重ねる画像は透過gif画像です。
手前の画像は飛行機が通る部分以外を塗りつぶし、透過しました。

一番右側のバラだけ飛行機が手前を飛んでいます。これはなぜかというと、私のgooブログの横幅が600なのに対し、画像が500だからです。背景画像は余った分、リピートしていますので、左側のバラが右側に出てきたのです。一方、上に重ねる画像も500pxなので100px分右側が空いています。
この失敗画像のおかげで、どうなっているかが良くわかります。
重ねる画像の上余白をマイナスにしているのはマーキー(飛行機)の分だけ下に下がるので飛行機の分、上に上げて、画像をぴったり合わせるためです。
(飛行機も実際は別に作って透過しておきます)




gooブログで書いたタグです。


<div style="background-image:url(背景画像のURL)"><span style="font-size:0px;"><<marquee><img src="飛行機画像のURL"><</marquee></span><div style="margin-top:-186px"><img src="重ねる画像のURL"></div></div>

「gooブログ マーキー」で検索したら出てきたマーキー画像のソースを見て参考にさせていただきました。 gooブログで教えて下さっているサイトを見たほうが早いと思います

マーキータグについてはあちこちで説明がありますので検索してください。
makoさんのところにも説明があります。

23日訂正:肝心のマイナス(-)が抜けていました。
widthを指定すれば右側に余分な画像が出ませんでした。 10月23日 goo画像

<div style="background-image:url(背景画像のURL);width:500px"><span
style="font-size:0px;"><<marquee><img
src="飛行機画像のURL"><</marquee></span><div
style="margin-top:-186px"><img src="重ねる画像のURL"></div></div>
[PR]
by mmi331 | 2009-10-21 22:48 | 画像加工 | Comments(0)
訂正
昨日アップしたホームページのリボンの作り方に また 間違いがあり、訂正しました。
ご指摘がなかったのでだ~れも見て無かったようです。ある意味 ホッとしましたが・・・
⑤で透明度を指定して合成というところを明るい画素優先合成にしてしまいました。やはり、あせらないでゆっくり作らないといけませんね。ホームページはいつもメモ帳で書きます。Terapadもあるのですが、最初に勉強したサイトがメモ帳で書くように書いてあったので律儀にメモ帳で書いています。最近、ホームページは加工の仕方しか書かないのでタグも忘れてしまい、面倒になったので直前に書いたページのソースをそのまま画像のURLと大きさと文章だけ変えて済ませています。「home」ページそのものを直さなくてはいけないのですが、行き詰っています。誰か、おしえて~~。
ソースの一部です(青い部分が訂正したところ)。シンプルです。ソースはメニューバーの「表示」→「ソース」で見ることが出来ます。クリックで拡大します。
d0048312_20502282.gif
フレームを使っている場合は右クリックから見ることが出来ますが、最近はソースを見えないようにするところもあります。
yahooや、gooブログは文字化けして見られないのですが、エキサイトブログはちゃんと見られるので参考になります。
*12日訂正:コメントでで教えていただきました。IE・8では、ちゃんとソースが見られます。しかも、行番号が付いて色分けまでしてあります。あら~、IE・8にしなくちゃ。


10月は花が少ないのですが、今、プランターのメキシカンセージが咲いています。挿し木で簡単に増え、大株になります。
d0048312_22444094.jpg
ウェーブの枠はいつも500x500から角丸切りぬきで枠を作っていましたが、これは余白で作りました。(計算しなくてはいけないのでちょっと頭がいたいのですが・・・)
角丸切り抜きではぼやっとした模様が出来ますが、余白ではくっきりした模様になります
d0048312_2391076.gif

[PR]
by mmi331 | 2009-10-10 23:10 | html・css | Comments(4)
校歌
やっほ~ と、いえば・・・・  全然関係ありませんが、^^

次女が1年間通った小学校の校歌はとってもユニークです。
まどみちお作詞 寺島尚彦作曲の
♪ 小学生だ わはっは   で始まる校歌です。 稗原小校歌
子供たちが大きな声で楽しそうに歌う光景が目に浮びます。

いっぽう、私が小学生の時の校歌は・・・
今、歌詞を見れば、なんと素晴らしい歌かと思いますが、果たして小学生の時、意味がわかって歌っていたかどうか定かではありません。

歌詞を縦書きで書いてみます
          作詞:藤田 福夫
          作曲:今井 松尾


 朝空匂う 倶利伽羅の 
 澄める山の気 窓に入り
 すがしさ満つる 学び舎よ 
  師の愛の 誠にこたえ 
    ああ我ら 正しく生きむ

 ま昼のどかに 天つ日の 
  光みなぎる 野に丘に
 豊けきみのり たたえつつ 
  とこしえの 平和を求め
    ああ我ら 共に進まむ

 加越をおおう 夕映えの 
  色うるわしく 輝けば
 文化彩なす 世をしたい 
  学芸の 尽きぬ泉を
    ああ我ら 競いて汲まむ   
           笹リンドウ

(Netscapeでは縦書きに見えないそうですが。持っていないので良くわかりません)

間違っているところがあるかもしれません。40年以上も前のことです。念のため姉に確かめたらほとんど間違っていないということでした。最近の歌は何度聴いても覚えられないけど、昔歌った歌は忘れないものですね。
誰も見ていないと思うけど、違っていたら教えてね。

笹リンドウの紋は素材やさんからお借りしました。小学校の校章に似ていたので・・・
とっても素敵な素材やさんです。こんなのが描けたらいいな♪  
フリー素材 「花うさぎ」様のサイトです。利用規約から入ってください

上の縦書きタグです。このブログでは使えますが、他のブログではわかりません。
だいぶ前に書いたものをコピーして利用。どのサイトで見つけたのか覚えていません
<p style="writing-mode: tb-rl; white-space: nowrap;
font-size:1.2em;background-color:#ffffff">この間に文字を書く</p>
または、高さを指定して
<p style="writing-mode: tb-rl;height:250px;
font-size:1.2em;background-color:#ffffff">この間に文字を書く</p>

ああっ、ほったらかしでぐちゃぐちゃのホームページを思い出してしまった。ひとつにまとめてすっきりと整理しようと思ってはいるのですが、いつも、・・・「見なかったことにしよう」でおわり。
[PR]
by mmi331 | 2009-09-12 22:19 | Comments(4)
桧扇水仙 cssでスクロールバー

d0048312_1559279.jpg
 


桧扇水仙(ひおうぎすいせん)です。

先日、近所の方にこの花の名前を尋ねられ、モントブレチアと答えてしまいましたが、

考えてみれば、ずっと昔からお盆の花としてどこにでもあったので

きっと和名があるはずだと思って検索したら

ありました。やっとめぐり合えました。

桧扇水仙・素敵な名前ではありませんか!

今までモントブレチアなんて、舌を噛みそうな名前で呼んでいましたが

これからは和名で呼んであげよう。

でも、来年まで覚えているかしら?

外枠の模様は竹網風の模様の中を枠つきの角丸切抜きで切り抜き、上書き合成、オイルペイントをかけて中に写真を合成しました。


  ↑ フォントはメイリオを使用しましたが、インストールされていないパソコンではどんな風に見えるのかはわかりません。
[PR]
by mmi331 | 2009-07-24 20:58 | Comments(2)
署名 
メールを送信する時に署名を活用する方は多いと思います。
私は今まで署名は使っていませんでした。一時、簡単な絵文字の入った署名を使用していましたが、今は最後に自分の名前を書いて終わりです。
先日「署名Web」というのを紹介していただきました。ブログで知り合った方で、最初の頃からいろんなソフトを紹介してくださったり、使い方を教えてくださったり、見ず知らずの方ですが本当にいつもありがたいと思っています。ここで紹介してもいいのかどうかわかりませんので興味のある方は検索してください。面白い署名が色々ありました。
そこで、簡単ながら自分で作ってみました。
簡単に見えますが、このエキサイトブログで見え方を工夫するのにちょっとばかり頭を使いました。でも、ブラウザが違う方や、文字の大きさを変えてみていらっしゃる方にちゃんと見えるかどうかわかりません。 一応「さかな」のつもりです。

   o
  o
 o    xx     xx
  xxxxxxx   xxx
 xxoxxxxxxxxxxxx
xxxxxxxxxxxxxx
xxxxxxxxxxxxxxx
 xxxxxxxxxx  xxx
   xx   xx   xx
    mmi
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

お粗末でした。 でも、楽しく作れました。 wさん、いつも有難うございます。

こちらも、コメントで教えていただいたイチゴのワード絵です。MOCO☆HOUSE様のブログから作りかたをダウンロードさせていただきました。
細かくて大変でしたが、今まで使い方がわからなかった頂点の編集の中の「頂点を中心にスムージングする」という使い方がわかりました。
本当にパソコンは奥が深く、私は表面をなでているだけだということがよくわかりました。
じゃ~ん、・・・・種が大きすぎて終わりかけのイチゴみたいになってしまいました。
難しいんだから。。
これ、リサイズするとスカスカになってしまうのですが、何とかならないのだろうか?
d0048312_2291213.gif


インターネットの向こうの方々に、感謝。
[PR]
by mmi331 | 2009-06-25 21:56 | ワード絵 | Comments(2)
ブラインドとパンチで作った円形枠・スポットライト合成
28日のアヤメの円形枠についてお尋ねがありましたので再現しようとあれこれやったのですが数値を忘れているので同じ模様が出来ませんでした。が、画像は保存してありましたので簡単に説明します。
と、いうけど、簡単じゃないんです、これが。
だいたいいつも簡単でないものは作りっぱなしでパスしています。
28日のアヤメ
d0048312_20472286.jpg

28日の模様⑥からはじめます。模様⑥は模様⑤にパンチ100と10かけています。
d0048312_20555984.jpgこれにスポットライトをど真ん中に入れます。数値は忘れましたが大体大きさが35くらい、明るさの減衰レベルが7くらいです。こんな感じになればいいと思います

(加工→スポットライト で、十字を真ん中に持ってきてクリック、設定をしてOK)
図① 

d0048312_2122834.jpg図①をを2階調化で真っ黒にしてコピーし、パンチ画像に暗い画素優先で合成します。

(カラー→2階調化で白黒画像にし、暗い画素優先合成)


図②

d0048312_217715.jpg さらに同じ大きさの写真に明るい画素優先で合成します。

(写真を開き、編集→合成→クリップボードから入力にチェックし、明るい画素優先→OK)
図③

d0048312_2115022.jpg図③の周りを黒で塗りつぶし、図②に明るい画素優先で合成します。

あ・・・書いてみると意外と簡単でしたね。(^_^;)



例では透明度50%水色の円形切抜き枠を適用しました。
虹色グラデーション枠についてのご質問ですがグラデーションの作り方は「We Love JTrim」様に作り方が書いてありますのでそちらからどうぞ。
私のホームページにも一応書いてあります。模様を作るのが面倒な方はお使いになっても結構です。

連結模様を増やしてリサイズし、パンチを2回かけて円形切抜き。中を黒く塗りつぶし、余白をつけてからブレを適用。濃い色をつけて加算合成した枠に写真を合成。・・・??
後で自分自身がわかるかどうかが一番問題だワ
ブルーサルビアです。
マウスオンでブレをかけていない画像になります。
d0048312_2281654.jpg
d0048312_15115057.jpg

[PR]
by mmi331 | 2009-05-30 21:25 | 画像加工 | Comments(4)
かわいい花
かわいい花が咲きました。
マウスオンしてください。
d0048312_2271232.jpg
d0048312_228679.jpg

ァハ、どこにでもある「ユキノシタ」でした。葉は薬効があり、てんぷらなどでも食べられますが、ちょっと渋い。どくだみと間違えました。味は・・・・食べたことがありません。

ついにお膝元に新型インフルエンザが発生・・・これ以上蔓延しないことを祈る。
マスク無いのよ~~。花粉症の時期には箱で山積していたのに、今スーパーでレジ横にも置いていません。

と、いうわけでもないけど早く寝ようっと。
[PR]
by mmi331 | 2009-05-21 22:27 | 野菜と花 | Comments(2)
Picasa3
パソコンくらぶのTさんのブログにPicasaのことが書いてありました。
Tさんは毎週火曜日のパソコン教室で初心者の方にワードなどを教えています。
私は月に一度の同好会しか行けないのでTさんのブログはとても参考になります。

PicasaはGoogleから無料でダウンロードできるソフトで、写真の編集や検索、管理、などを行ったり、ウェブアルバムにアップロードして世界中のユーザーと共有することも出来ます。

そういえば私もハードディスク交換以前にインストールしたことがありましたが、ちょっと重いので今は私のパソコンには入っていません。
でも、夫のパソコンに入っているのを思い出し、久しぶりに夫の留守中にPicasaを立ち上げてみました。
私がインストールした時はPicasa2だったのですが、立ち上げた瞬間、アップデートが始まり、あれよあれよというまにPicasa3に成りました。(例の”規約に合意”手順は踏みましたが)

3ではコラージュという画像編集が出来ます。写真の数、大きさ、傾き、前面、背面画自由に出来るので便利です。
あーでもない、こーでもないと触ってみて、楽しかったのですが、大きい元画像でそのままコラージュ作成したせいか、完成画像が出るのが遅くて、JTrimやペイントに慣れている私としてはちょっと・・・
こんなコラージュや
d0048312_2030217.jpg

こんなのも。 一度保存した画像をもう一度呼び出して編集することも出来ます。
d0048312_20311368.jpg


下の画像も一度作成したコラージュ写真を呼び出して、大きさや傾き、配置を換えてみました。マウスオンで画像が変わります。
d0048312_1629870.jpg
d0048312_16293279.jpg

もっと変化させればよかった・・・・アップしてから手抜きが判明。
注:Picasa3にバージョンアップする際、関連付けのチェックをはずさないと、Picasaに乗っ取られるそうです。(Nさんから聞いたTさん談話)
[PR]
by mmi331 | 2009-02-19 16:32 | ソフト | Comments(2)
紅葉
昨日は文字の大きさについて書きましたが、ブラウザの見え方には画像の配置方法によっても変わってくることがあります。・・・・
実はコメントをいただいて、そういえば、3年前ホームページビルダー体験版をインストールし、何枚かページを作ったことがあるのを思い出しました。急いで開いてみると、キャ~~、
ありました。「どこでも配置」。案の定、文字サイズを変えたら文字が画像の下に入ってしまって見えません。もう、ホームページビルダーは期限切れで存在しないので直せません。
いや、タグを書き直せば出来ないことは無いのですが、最初から作るのと同じです。そんな面倒なことはいやなので、悪い例として残しておきます。(^_^;)V
京都の旅・貴船、鞍馬、二条城の3ページはホームページビルダー体験版で作成。
その内貴船は「どこでも配置」です。3年間もほったらかしのホームページは見たくないよ~


しょうもないピンボケ写真でも、加工すると意外な画像に生まれ変わって楽しいです。
元画像です。
d0048312_1172769.jpg

マウスを乗せて下さい
d0048312_21133383.jpg
d0048312_21141935.jpg

新宿御苑の紅葉でした
d0048312_1153136.jpg


相変わらずの失敗で顔も紅葉です。
[PR]
by mmi331 | 2008-11-19 22:39 | 画像加工 | Comments(0)