マウスやすめ～パソコンに疲れたら・・・ 自分癒しのBLOG～

フリーの画像編集ソフトGIMP（回転・傾き補正）

Ξ 2009/3/31 火曜日

画像がそのままだと横になっていたり、逆さになっていたりすることがあります。
その画像を正位置にします。

■決まった角度での回転

『画像』→『変換』から回転角度をクリックします。

■細かい指定での回転

をクリックします。

スライダや角度を入力し回転させます。
回転の中心を変えることもできます。

これで傾きや画像の正位置を補正できます。

| → Comments (0) | ∇ GIMP |

IE8・IE7・IE6・FireFox・Google Chrome・Safariを同時起動させてみた

Ξ 2009/3/30 月曜日

IE８も出そろったようなので、ブラウザを一挙同時起動させてみた。

上から
IE7（37％）・Firefox（24％）
IE6（18％）・Google Chrome（8％）
Safari（7％）・IE8（4％）
の順です。

ちなみにこのサイトの閲覧ブラウザの順番となっています。

IEの同時起動は、

ひとつのパソコンでIE7とIE8を共存させる方法

マルチIEのインストール

を参考にしてください。

| → Comments (0) | ∇ やってみました！, 環境 |

フリーの画像編集ソフトGIMP（テキスト・整列編）

Ξ 2009/3/29 日曜日

画像にテキスト（文字）を入れてみましょう。

■テキスト

をクリックして テキストエディタで文字を記入します。

でフォントの種類や大きさ色を変更できます。

色を”メイリオ”に変更し、大きさを22px、色：をクリックして文字色パネルから白に変更しました。

■整列

整列をクリックしふたつのテキストを選択します。

並べるからふたつのテキストの高さを同じにしました。

整列では縦横を中央、上、下、右、左に合わせきれいに並べることができます。

| → Comments (0) | ∇ GIMP |

最近の心配事がひとつ、ゴールデンの耳血腫

Ξ 2009/3/29 日曜日

昨年の11月から、治ってはまたなって、右かと思えは今度は左となかなか治らないゴールデンの耳血腫。

治療法はレーザー手術、外科手術、投薬などあるらしいのだが歳も歳なので手術しても再発の可能性があるということで投薬を続けている。

薬はプレロン錠とコンドロイチン、

プレロン錠はいわゆるステロイドで抗炎症作用があるので、この薬を飲んでるとかゆみがなくなるためか首を振らなくなったり、耳をこすりつけたりしません。

コンドロイチンは最近人間でも有名になってきましたが、関節などに良いとされるものです。耳の軟骨に良いとのことです。
ちなみにこれが効くのか、ゴールデンの足腰がしっかりしてきたように思います。

毎週のように通っているので治療費もばかにならないのですが早く良くなってほしい一心で通い続ける日々です。

あっ！お金のことも考えると心配事はふたつです。

| → Comments (0) | ∇ ペット |

フリーの画像編集ソフトGIMP（トリミング、トーンカーブ、リサイズ編）

Ξ 2009/3/29 日曜日

GIMPでサイト用の画像を作ってみましょう。

サカサつららの画像です。

ブログなどの画像を扱う場合、デジカメの写真を適正化することが多いと思います。写真の大きさや明るさを変えたりすることで、見やすい写真にすることができます。

■トリミング

をクリックし画像の見せたい部分を選択します。

これで画像のトリミングができます。

■トーンカーブ

『ツール』→『色ツール』→『トーンカーブ』からトーンカーブの調整を開きます。

Photoshopなどでもそうなのですが、Ｗｅｂ上ではコントラストのきいたメリハリのある画像が奇麗に見えますのでそのようにカーブを調整します。
直線の線を逆Ｓ字にすると明るい部分がより明るく、暗い部分がより暗くなりメリハリがつきます。基本的に『逆Ｓ字』が基本となります。画像によって明るさを調整しましょう。
プレビューで確認して『ＯＫ』で確定します。

■リサイズ

画像のサイズが大きい場合、ＤＡＴA量も大きくなってしまいサーバーを圧迫し表示も遅くなってしまうのでピクセルで大きさを調整します。自分の場合は長辺で800pxぐらいにしています。

『画像』→『画像の拡大縮小』で画像の拡大・縮小を開きます。

幅を800にし高さを『拡大縮小』をクリックします。
これで画像のサイズが小さくなりました。

■画像の保存

『ファイル』→『保存』で画像を保存します。

| → Comments (0) | ∇ GIMP |

フリーの画像編集ソフトGIMP（インストール編）

Ξ 2009/3/24 火曜日

Linuxを使っている人ならだれでも知っていると思うのですが、『GIMP』というフリーの画像編集ソフトがあります。

だいぶ昔（2000年頃）になりますがWindowsで使えるようになったと聞いて使っていた時期があります。人にも勧めていたり、Linuxではちょこちょこ使っていたのですがPhotshopを使っている手前、マシンにインストールしたことはありませんでした。
今回リクエストがありGIMPの最新版をWindowsにインストールしてみましたが、昔に比べかなり良くなっておりなかなか使えそうです。

■ダウンロード＆インストール

http://www.geocities.jp/gimproject2/download/gimp-download.html
からGIMPをダウンロードします。

インストール版とポータブル版があります。
ポータブル版はUSBメモリなどで持ち運びできるということですが、今回はインストール版をダウンロードしました。

ダウンロードした gimp-2.6.4-i686-setup.zip を解凍します。

解凍してできた gimp-2.6.4-i686-setup.exe でセットアップを開始します。

Nextで進めます。

最後まで行ったらFinishでGIMPが立ち上がります。

かなりPhotshopに似ています。
日本語環境もしっかりしていて迷うこともなさそうです。

それでは、しばらくの間このサイトで使う画像はこのGIMPを使ってみるということでレポートしていきたいと思います。

| → Comments (0) | ∇ GIMP |

今日のサカサつらら 2009/3/23

Ξ 2009/3/23 月曜日

冷蔵庫の中にできる不思議なつらら”サカサつらら”シリーズ

今日のサカサつららは3つです。
しばらく出来ず心配していたのですが、今日のWBCの日本チーム同様、快調なつららでした。

↓の評価ボタンを押してランキングをチェック！

| → Comments (0) | ∇ 今日のサカサつらら |

SeeSaaブログのデザインをカスタマイズする（タイトルのポイントなど）

Ξ 2009/3/23 月曜日

SeeSaaデザインも大体出来上がってきました。
遊びでタイトルのポイントと多少の修正を加えてデザインの完成とします。

まずポイントの画像を用意します。今回は 29×25px で作りました。
背景を透明で使うためGIFとします。

SeeSaaの ”記事投稿” → ”ファイルマネージャー” で画像をアップします。

CSSを変更します。

■h3の変更

h3 {

padding: 0px 0px 0px 15px;

font-size:12px;

font-weight:bolder;

background-image:url(http://blog.seesaa.jp/img/bg/lightgray_1/title.gif);

background-repeat:no-repeat;

font-family:Verdana;

}

padding を
padding: 0px 0px 10px 32px;
に変更します。

background-image のURLを
http://cat99.up.seesaa.net/image/title.gif

に変更します。

変更前



変更後

■.listCategoryArticleの変更

 
最新記事部のバックを白くします。

.listCategoryArticle{

margin-top:5px;

padding:5px;

border:solid 1px #FFE2E2;

}

background-color:#FFF;
を付け加えます。

■#footerの変更

#footer{

clear:left;

height:50px;

}

background-color:#F3FFCC;
を付け加えます。

変更前

 
変更後

■imgの追加

このままだと指定のない画像に枠線が付いてしまいますのでCSSの中に

img {

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

}

を付け加えます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

最初からみると


が
 

こうなりました。

| → Comments (0) | ∇ Seesaa |

SeeSaaブログのデザインをカスタマイズする（記事部分を変更する）

Ξ 2009/3/22 日曜日

記事部分の区切りが分かりにくいのでバックに色を入れてみることにした。

CSSを変更します。

■.blogの変更

.blog {

padding:0px 5px 50px 5px;

text-align:left;

font-family:Verdana;

}

ＢＯＸの下が開きすぎているようなので

padding:0px 5px 50px 5px;
を
padding:0px 15px 5px 15px;
に変更

background-color:#F3FFCC;
margin-bottom:20px;

border-top:2px solid #89C319;
border-bottom:2px solid #89C319;
を付け加えます。

日付の上のボーダーが邪魔になったのでとります。

■.dataの変更

.date{

font-family:Verdana;

font-size:10px;

clear:left;

color:#AFAFAF;

margin-top:0px;

margin-bottom:0px;

padding:12px 0px 25px 0px;

border-top:1px solid #D3D3D3;

}

border-top:1px solid #D3D3D3;
をとります。

padding:12px 0px 25px 0px;
を
padding:12px 0px 0px 0px;
に変更します。

■.titleの変更

.title{

margin-top:0px;

margin-bottom:0px;

font-weight:bold;

}

margin-top:0px;
を
margin-top:10px;
に変更します。

文字も大きくしたいので
font-size:14px;
を足します。

これは日付がない場合TOPとタイトルがくっつきすぎてしまうためです。
そこで .date 側のbottomのpaddingを少なくし、 .title 側のTOPのmarginを多くしました。

変更前

変更後

 

こうなりました。
完成も間近です。

| → Comments (4) | ∇ Seesaa |

SeeSaaブログのデザインをカスタマイズする（サイドバーとリンク色の変更）

Ξ 2009/3/22 日曜日

header部が変更されだいぶイメージが変わったのでそれに合わせサイドバーなどを変更します。

CSSを変更します。
■まずはカレンダー部

.calendarhead {

padding:4px 0px;

font-weight:bold;

background-color:#F1F1F0;

text-align:center;

color:#5D5D5D;

font-size:12px;

font-family:Verdana;

width:100%;

}

の background-color:#F1F1F0;
を background-color:#89C319;

color:#5D5D5D;
を color:#FFF;

.calendarhead a{

color:#5D5D5D;

}

.calendarhead .calendarday{

color:#5D5D5D;

}

の color:#5D5D5D;
を color:#FFF;

にそれぞれ変更します。

■sideberタイトル部

.sidetitle {

padding:4px 10px 4px 10px;

font-weight:bold;

background-color:#ECECEB;

font-family:Verdana;

}

の background-color:#ECECEB;
を background-color:#89C319;

に変更し color:#FFF;
を追加します。

緑ばっかりになってしまったので、リンクのテキストをオレンジにします。

a{

color:#7C9907;

text-decoration:none;

}

のカラーを ＃FF6633 に変更します。

変更前

変更後

こんな風に変わりました。

デザインのコツとしては、同系色や反対色をうまく使うと少ない色でうまくまとまります。

| → Comments (0) | ∇ Seesaa |

SeeSaaブログのデザインをカスタマイズする（headerの背景を画像にする）

Ξ 2009/3/22 日曜日

まず背景を用意します。今回は #banner 部は 950px × 150px になっていますのでそのサイズに合わせてillustratorにてつくりました。

これをSeeSaaの ”記事投稿” → ”ファイルマネージャー” でアップし元ファイルの場所（今回は”http://cat99.up.seesaa.net/image/hader-1.png”）を覚えておいてください。

CSSを変更します。

#container の変更

#container{

margin:0px auto 0px auto;

width:950px;

color:#5D5D5D;

font-size:12px;

font-family:Verdana;

text-align:center;

}

に

background-image:url(http://cat99.up.seesaa.net/image/hader-1.png);

background-repeat:no-repeat;

を追加します。

やり方としてはいくつかあるのですが、backgroundを使いました。

background-repeat:no-repeat; でリピートしない設定となります。

これに合わせてテキストの色と位置を変えます。

#banner の変更し位置を修正します。

#banner{

margin:0px;

text-align:left;

height:150px;

}

に

padding:10px;

を追加します。

h1 a を変更しタイトルの色を変更します。

h1 a{

color:#5D5D5D;

text-decoration: none;

font-weight:bolder;

}

の　#5D5D5D　を

＃FFF　に変更します。

.description を変更しサイト説明の色を変更します。

.description {

font-family:Verdana;

font-weight:bold;

padding:0px 10px 0px 0px;

}

に

color:#FFF；

を追加します。

初めのヘッダ部です

変更後のヘッダ部です

これだけでサイトの印象がガラッと変わります。

| → Comments (0) | ∇ Seesaa |

SeeSaaブログのデザインをカスタマイズする（サイトの幅を変更する）

Ξ 2009/3/21 土曜日

サイトデザインのテンプレートは『ライトグレー(両サイドバー)』を選択しましたが、サイトの幅が％でブラウザに合わせて変わるようになっています。

これを変更し固定幅となるようにします。

幅を決めるのは４つ
・全体の幅  #container を950pxに
・左サイドバー #links-left を180pxに
・右サイドバー #links を180pxに
・コンテンツ部 #content を530pxに
それぞれ変更します。

CSSを開き

   1: #container{

   2: margin:0px auto 0px auto;

   3: width:100%;

   4: color:#5D5D5D;

   5: font-size:12px;

   6: font-family:Verdana;

   7: text-align:center;

   8: }

width:100%; を width:950px; に変更

   1: #links-left {

   2: font-weight:normal;

   3: width:23%;

   4: float:left;

   5: margin: 0px 0px 0px 0px;

   6: text-align:left;

   7: }

   1: #links {

   2: font-weight:normal;

   3: float:left;

   4: width:23%;

   5: margin: 0px 0px 0px 30px;

   6: text-align:left;

   7: font-size:12px;

   8: }

の width:23%; をそれぞれ width:180px; に変更

   1: #content {

   2: margin:0px 0px 0px 30px;

   3: float:left;

   4: width:54%;

   5: }

の width: を 530px; に変更します。

固定幅に変更できました。

| → Comments (0) | ∇ Seesaa |

SeeSaaブログのデザインをカスタマイズする（CSSの見かた）

Ξ 2009/3/20 金曜日

サイトを作ったことのある方は当然知っていることなのですが、CSSの簡単な見方を説明します。

まずはWeb開発に便利なツール『Web Developer』で書いたFireFoxのアドオンを使うと便利です。

Divの要素を表示させるとこのようになります。
これで変更したいCSSの部分を確認しながらCSSを書き換えていくこととなります。

たとえば、タイトルの部分は
 
となって、CSSの部分は

   1: h1 {

   2: margin:0px;

   3: padding-top:50px;

   4: padding-bottom:10px;

   5: font-weight:bolder;

   6: font-size:24px;

   7: font-family:Verdana;

   8: }

であることが分かります。

そして、大きさを変えたいときは

font-size:24px;

を

font-size:20px;

などと変更すれば文字は小さくなります。

左のサイドバーは

#links-left

であることが分かりCSSの

   1: #links-left {

   2: font-weight:normal;

   3: width:180px;

   4: float:left;

   5: margin: 0px 0px 0px 0px;

   6: text-align:left;

   7: }

この部分を変えることで変更できます。

| → Comments (2) | ∇ Seesaa |

SeeSaaブログのデザインをカスタマイズする（ローカルでサイト編集する準備）

Ξ 2009/3/18 水曜日

SeeSaaブログのデザインをオリジナルにするにはHTML（デザイン→HTML→HTML名）

とCSS（デザイン→デザイン一覧→タイトル）

を変更して行います。
ブログの色やヘッダの画像を変更するぐらいならCSSを変更するだけで結構見栄えが違ってきます。

ブラウザ上で変更してもいいのですが、一応ローカルで編集し確認してからアップしたいと思います。

①まずは適当にフォルダを作ります。

②ブラウザで自サイトを表示しソースコードをindex.htmlとしフォルダの中に保存します。このとき

<link rel="stylesheet" href="http://cat99.seesaa.net/styles-index.css" type="text/css" />

を

<link rel="stylesheet" href="styles-index.css" type="text/css" />

と変更します

③SeeSaaでCSSを表示し（デザイン→デザイン一覧→タイトル）内容をコピーします。

④styles-index.css というファイル名で保存します。

index.htmlをクリックするとローカルにて自サイトが表示できます。

一部表示できないものがあったりしますがデザイン変更には問題ありません。

この後、ローカルにてCSSを確認しながら変更し、SeeSaaのCSSを更新することで本サイトのデザイン変更が完了します。

| → Comments (0) | ∇ Seesaa |

Windows Live Writerでソースコードを表示するプラグイン『Code Snippet』

Ξ 2009/3/14 土曜日

『ひとつのパソコンでIE7とIE8を共存させる方法』の記事を書いた時にも使っているWindows Live Writerのプラグインです。

Code Snippet plugin for Windows Live Writer

他にもプログラムなどのソースコードを表示するプラグインはあるのですが、ブログの加工が必要だったり、使い勝手があまり良くなかったりして結構このプラグインにたどり着くまで時間がかかりました。

探すまで大変なのでメモです。

http://gallery.live.com/liveItemDetail.aspx?li=d4409446-af7f-42ec-aa20-78aa5bac4748&pl=8&bt=9

からダウンロードできます。

対応しているのが
C#
CSS
HTML
JavaScript
MSH
TSQ
Visual Basic
色分けができたり行番の表示ができたりとっても使いやすいプラグインです。

| → Comments (2) | ∇ Web制作関連, ツール |

今日のサカサつらら 2009/3/13

Ξ 2009/3/13 金曜日

冷蔵庫の中にできる不思議なつらら”サカサつらら”シリーズ

撮影しているときは何とも思わなかったのですが、今日のサカサつららはちょっとエッチな形です。

太いな・・・とは思っていましたが、よくよく見ると何となく・・・

↓の評価ボタンを押してランキングをチェック！

| → Comments (0) | ∇ 今日のサカサつらら |

定額給付金　～　勘違いの巻

Ξ 2009/3/12 木曜日

定額給付金に対して売り上げアップをするべく会議をしている際、どうもうちの課のボスの言動がおかしい。

よくよく聞いてみると「えっ！毎年でるもんじゃないの？そんなの意味ないじゃん！」だから意味ないんだって・・・。

| → Comments (0) | ∇ マウスやすめ日記 |

ひとつのパソコンでIE7とIE8を共存させる方法

Ξ 2009/3/11 水曜日

まず断わっておきますが、XP環境でしか成功しませんでした。

IE8製品候補版のリリースとともにIEの再インストールのデフォルトがIE8になった今日この頃、なんとかIE8とIE7の検証を一緒にやりたいなといろいろやっていたがなかなかうまくいかない。
表示はできるもののお気に入りがIE8、IE7ともに飛んでしまったり、どちらも不安定になってしまったり、ちょっとあきらめ気味だったのだが、IE7betaの時にやった方法をちょっと試してみたらうまく動いてくれるようになった。

1. まずはIE8をインストールします。

そして作業の準備として

2.C:\Program Files の中に『IE7』というフォルダを作る。

その中に 『ie7.bat』『ie7.vbs』 というふたつのファイルを作ります。

ie7.bat の中身は

@ECHO OFF

TITLE IE7 Launcher 1.4

ECHO IE7 STANDALONE LAUNCHER 1.4

ECHO Updated for IE7 Beta 2 Preview

ECHO.

ECHO Do not close this window or it will not clean up after itself properly.

ECHO You can pass a URL into this batch file, like this:

ECHO ie7.bat www.microsoft.com

ECHO.

ECHO More info here: http://weblogs.asp.net/jgalloway/archive/2005/12/28/434132.aspx

ECHO.

ECHO When you close IE7, this will remove the registry key and shut itself down.

ECHO.

ECHO Setting up IE7 for standalone mode...

PUSHD %~dp0

ECHO Removing IE7 registry key and set the version vector to "7.0000".

> %TEMP%.\IE7Fix.reg ECHO REGEDIT4

>>%TEMP%.\IE7Fix.reg ECHO.

>>%TEMP%.\IE7Fix.reg ECHO [-HKEY_CLASSES_ROOT\CLSID\{C90250F3-4D7D-4991-9B69-A5C5BC1C2AE6}]

>>%TEMP%.\IE7Fix.reg ECHO [-HKEY_CLASSES_ROOT\Interface\{000214E5-0000-0000-C000-000000000046}]

>>%TEMP%.\IE7Fix.reg ECHO [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Version Vector]

>>%TEMP%.\IE7Fix.reg ECHO "IE"="7.0000"

>>%TEMP%.\IE7Fix.reg ECHO.

:: Merge the REG file to delete the IE7 standalone entry

REGEDIT /S %TEMP%.\IE7Fix.reg

REN SHLWAPI.DLL SHLWAPI.DLL.BAK

TYPE NUL > IEXPLORE.exe.local

ECHO Running IE7...

iexplore.exe "%1"

:: Merge the REG file to delete the IE7 standalone entry

REGEDIT /S %TEMP%.\IE7Fix.reg

:: Delete the temporary REG file

DEL %TEMP%.\IE7Fix.reg

ECHO Removing IE7 standalone files...

REN SHLWAPI.DLL.BAK SHLWAPI.DLL

DEL IEXPLORE.exe.local

:: Set the old version vector "6.0000".

> %TEMP%.\IE7Fix.reg ECHO REGEDIT4

>>%TEMP%.\IE7Fix.reg ECHO.

>>%TEMP%.\IE7Fix.reg ECHO [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Version Vector]

>>%TEMP%.\IE7Fix.reg ECHO "IE"="6.0000"

>>%TEMP%.\IE7Fix.reg ECHO.

REGEDIT /S %TEMP%.\IE7Fix.reg

DEL %TEMP%.\IE7Fix.reg

POPD

ECHO Complete, closing...

ie7.vbs

Set oShell = CreateObject("WScript.Shell")

oShell.Run "ie7.bat", 0, True

3.IE7をダウンロードする。

IE7-WindowsXP-x86-jpn.exe がダウンロードされる。

4.クリックするとインストールが始まりますが、ローダーが動いているときの解凍先を読んでおきます。

5.IE8が入っているので途中で止まってしまいます。

6.ここで解凍先のフォルダを開き中身を全部作っておいたIE7フォルダにコピーします。隠しファイル”$shtdwn$.req”が見える場合（隠しファイルを表示する設定にしている）はこれをはずします。

7. ie7.vbs クリックでIE7が動けば成功です。

IE7                                       IE8               デスクトップに並べてみました。

レジストリを書き換えますので、慎重な方はレジストリのバックアップをしておくことをお勧めします。

———————————————–

古いのですが、参考サイトは

IE7 Standalone Launch Script – Jon Galloway

| → Comments (8) | ∇ やってみました！, 環境 |

バナーなどの国際標準サイズ

Ξ 2009/3/8 日曜日

IAB（Interactive Advertising Bureau）というところがあって、インターネットの広告関係の基準を定めているのだが、バナーやポップアップなどの表示サイズも一応基準があります。

その基準サイズに合わせてバナーやボタンポップアップなどをいつも作るのですが、よく忘れてしまうので一覧にしてみました。

アドユニット 国際標準サイズ | マウスやすめ～パソコンに疲れたら・・・ 自分癒しのBLOG～

• レクタングル ＆ ポップアップ
• バナー ＆ ボタン
• スカイスクレイパー

を掲載してあります。

| → Comments (0) | ∇ Web制作関連 |

今日のサカサつらら 2009/3/7

Ξ 2009/3/7 土曜日

冷蔵庫の中にできる不思議なつらら”サカサつらら”シリーズ

今日のサカサつららは1本と半分というところです。

オーソドックスな形ですがとってもきれいです。

↓の評価ボタンを押してランキングをチェック！

| → Comments (2) | ∇ 今日のサカサつらら |