メニューボタン素材

やはり・・・みなさま文字入れにはハードルがあるようで・・

とりあえずはこれだけあれば何とかなるのかな？

見本ブログ　http://ameblo.jp/exlink02/

設置方法は：http://ameblo.jp/exlink/entry-10649903317.html

加工方法は：http://ameblo.jp/exlink/entry-10650972607.html

青系ボタン 　　　桃系ボタン

http://ameblo.jp/ab-test/entry-10653456115.html

http://ameblo.jp/ab-test/entry-10653466200.html

http://ameblo.jp/ab-test/entry-10653386653.html

http://ameblo.jp/ab-test/entry-10653434936.html

http://ameblo.jp/ab-test/entry-10653503765.html

メニューボタン素材の文字入れ加工方法

前の記事　CSS　メニューを作っちゃおう7 　画像の置き換え　はトライしてみましたか？

まだ読まれていない方は先に　CSS　メニューを作っちゃおう7 　をお読み下さい

文字の合成のやり方です

素材置き場：（あけおめがまだ付きっぱなしなのでうざくてすみません）
青系ボタン　http://ameblo.jp/ab-test/entry-10650879996.html
緑系ボタン　http://ameblo.jp/ab-test/entry-10650922058.html
桃系ボタン　http://ameblo.jp/ab-test/entry-10650898070.html

こちらにありますメニューボタン用の画像・・・

ゆうこせんせい さまでもメニューボタンを配布されていますよ

【加工】ヘッドメニューボタン 　お持ち帰りのさいにはコメントにカキコをお願いします

画像編集ソフトをお持ちの場合はそれを使って文字を合成してください

何にもないよ～って方は・・・

以前に紹介しました　pixlr

http://www.pixlr.com/editor/

日本語化まではこちらの記事を参考にしてください

（日本語がおかしなところもありますが気にしないで）

普通の？メニュー画像とマウスオーバー時の画像と2つ画像を使う場合で説明します

まずは2つの画像をそれぞれ開きます　　　ファイル→開ける

どちらでもかまいませんので片方の画像を選択して　　編集→全部を選択

編集→コピー



別の方の画像を選択してから　　編集→ペースト　　　新しいレイヤーが出来ます

最初にコピーした画像は×で消します（保存しなくてかまいません）

なぜ・・こんなことをするのかというと・・

2枚の画像の同じ位置に同じサイズの文字を置きたいからなんです・・

マウスがのった時に文字の位置がずれないようにしたいんです

そのためにレイヤーが使えるpixlrで説明しています

普段表示されているメニューの文字とマウスオーバー時の文字が違う場合は

普段は「読者登録」でマウスがのった時は「うれし～」・・こんな場合は・・

このようなことをする必要はありません

文字が違うのですから位置とかが変わっていても大丈夫なんで

それぞれの画像ごとにココから下を参考に文字を載せてください

では・・文字（メニュ項目）を入れていきます

文字ツールを選択して・・

画像の上の適当なところでクリックすると文字を入力する枠が現れます

文字位置は後で調整しますのでだいたいの位置でかまいません

文字（メニュー項目）を入れてフォント・サイズ・スタイル・文字色を決めます

文字が決まったら移動ツールを選択して文字位置を調整します

（キーボードの←↑↓↓矢印キーを使って微調整します）

次に文字レイヤーをコピーします（マウスがのったときの文字色を変えるため）

文字レイヤーの上で右クリック→レイヤーを複製

↑これで同じ位置に同じサイズで文字が入ったレイヤーが2つ出来ました

片方は最初に表示される画像用に加工してもう片方はマウスオーバー時に表示される画像用に加工します

文字レイヤーが複製されたらレイヤーの右にある□をクリックして文字レイヤーとどちらかの画像のチェックを外します

これでチェックの付いているレイヤーだけが表示されます

次に文字を装飾します

チェックの付いている文字レイヤーの上で右クリック→レイヤーをラスター化 （photoshop でしたら ラスタライズですね）

コレをすると文字が画像になります（文字ツーツで文字の変更が出来なくなります）

※ラスター化しなくてもここから先のレイヤースタイルはつかえるのですが・・・一応ラスター化のやり方として説明します

文字レイヤーが普通のレイヤーになりました・・

レイヤーの上で右クリック→レイヤースタイル

文字に影を入れたり光をつけたり・・自由に加工します

自分で気に入るまでいろいろトライください・・・

これでよければ　ファイル→保存　（ファイルの形式はPNGで保存します）

※PXD形式で保存するとレイヤー含めてこの状態を保存できますので途中でやめる場合や後で修正する場合に便利です

片方の画像が完成したら次はもう片方の画像を作ります

先ほど使ったレイヤーのチェックを外して・・

別のレイヤーにチェックを入れます

文字レイヤーを選択

最初に文字レイヤーをコピーしたのでサイズや位置は同じです

なので・・ココでは文字の色を変更してマウスがのったときに文字色が変わるようにします

文字色を変更したら・・先ほどと同じように文字レイヤーの上で右クリック→レイヤーをラスター化

レイヤーの上で右クリック→レイヤースタイル・・・

先ほどと同じように文字を装飾してＯＫでしたら

ファイル→保存　先ほどとは別のファイル名をつけて下さい　（ファイルの形式はPNGで保存します）

※PXD形式で保存するとレイヤー含めてこの状態を保存できますので途中でやめる場合や後で修正する場合に便利です

これで普通のメニューボタンとマウスがのった時用のメニューボタンの2つが出来ました

pixlrで文字を加工しないで別のソフトで文字だけを加工して透過PNGで保存

参考：　http://ameblo.jp/exlink/entry-10504039719.html

メニューボタン画像の上に透過した文字画像を乗せてもできます

上で最初にしたように2枚開いてから文字の画像を全部を選択してコピー

それをボタン画像の上にペーストします

サイズがあっていなければ自由変形や位置を調整してボタン画像に合わせます

工夫して楽しいメニューボタンを作ってくださいな

CSS メニューを作っちゃおう7 画像の置き換え

1週間ほど前から耳に圧迫感があって・・

耳をふさがれているような状態であまりよく聞えません

バイクに乗っていても風の音は聞えますが・・

エンジンの音がほとんど聞えない状態です・・

1日おきに病院へ通っていますし

先日は耳の奥の（麻酔して鼓膜の後ろ）水？をとってもらったのですが

ほとんど聞え方は変わらないです・・

メニエールで右の耳がほとんど聴力がありませんから

左の耳までおかしくなっちゃったら困るんです・・　マジで・・

精神的にまいっちゃっているようで・・

今日は休みで朝から食事もしないでこんな記事を書いていました・・

夢中になっていると忘れるから・・・

朝昼抜かしてもう晩御飯だよ～

ごめんなさい

今週もコメント欄は開放できそうにありません

すみません　m(_ _)m

CSS　メニューを作っちゃおう（動画はドコ？）
CSS　メニューを作っちゃおう（動画はドコ？）2
CSS　メニューを作っちゃおう（動画はドコ？）3

CSS　メニューを作っちゃおう 4

CSS　メニューを作っちゃおう5（横メニュー1）

CSS　メニューを作っちゃおう6（横メニュー2）

たいぶ長いこと間が開いてしまいましたが・・・

本当は全部を1枚の画像にしちゃいたいのですが・・

それだとCSSや画像を作るのに面倒そうなのでバラバラな画像で出来る方法を説明します

・・って　わたしが記事で説明するのが面倒なだけなんですが

一応・・画像先読み対策？を取っていますので最初の一瞬ちらつくことはないはずです

ヘッド画像の上や下に設置する方法もいままではＣＳＳで説明してきましたが

今度はjQueryを使ってみます

見本のブログ　http://ameblo.jp/exlink02/

まずは↓こんなメニュー画像を作ります（↓お持帰り自由）

最初に表示されるメニュー画像とマウスがのった時に表示される画像の2種類を作ってください

あたし・・そんな面倒なことじぇったいにムリ～！！！　って～方は・・

最初に表示される方の画像だけでもいいです・・

でもマウスがのった時に画像は変化しませんよ（裏ワザ的なのもあるんですが・・ ）

ベーシック用横5メニュー（横幅800px 1枚は160px×60px　透過png）

　　


　　


　　


　　


　　


　　


　　


　　


　　


　　


　　


　　


　　

グレイ・ブルー・ピーチ・グリーン用横5メニュー（横幅760px 1枚は152px×57px　透過png）

　　


　　


　　


　　


　　


　　


　　


　　


　　


　　


　　


　　

画像を作るときの注意です・・・透過画像を使っている場合・・

最初に表示されるメニューボタン画像がマウスオーバー時の画像より小さいと・・

下にマウスオーバー時の画像が見えてしまいます・・・

画像さえ出来ればコッチの物です？

メモ帳とかを使ってメニュー項目を作ります

項目は自由に作ってかまいません

CSS　ルームのメニュ2 　を参考にしてください

<div id="topmenu">
<ul>
<li id="menu01"><a href="http://ameblo.jp/あなたのID/" title="トップページに戻るよ">トップ</a></li>
<li id="menu02"><a href="http://profile.ameba.jp/あなたのID/" title="ルームに飛ぶよ">ルーム</a></li>
<li id="menu03"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID" title="いつもペタありがと～">ペタ</a></li>
<li id="menu04"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのID" title="マジっすか～？">読者</a></li>
<li id="menu05"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID" title="返事遅れたらごめんね">メッセージ</a></li>
</ul>
</div>

出来ましたら改行を削除してからフリースペースに貼り付けます

<div id="topmenu"><ul><li id="menu01"><a href="http://ameblo.jp/あなたのID/" title="トップページに戻るよ">トップ</a></li><li id="menu02"><a href="http://profile.ameba.jp/あなたのID/" title="ルームに飛ぶよ">ルーム</a></li><li id="menu03"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID" title="いつもペタありがと～">ペタ</a></li><li id="menu04"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのID" title="マジっすか～？">読者</a></li><li id="menu05"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID" title="返事遅れたらごめんね">メッセージ</a></li></ul></div>

※改行が残っているとメニューボタンが一列に並びません

CSSの最後に・・・・

#topmenu ul{
width:760px;/*ベーシックの場合は800pxです*/
height:57px;/*画像の高さ*/
margin: 0;/*注1*/
padding: 0;
dislay: block;
}
#topmenu li{
width:152px;/*1枚の画像の幅*/
height:57px;/*画像の高さ*/
float: left;
list-style-type:none;
background-repeat:no-repeat;
}
#topmenu li a{
text-decoration:none;
text-indent:-9999px;
display:block;
height:100%;
background-repeat:no-repeat;
}
#menu01 a{
background-image:url(はじめに表示する画像のURL);
}
#menu01{
background-image:url(マウスオーバー画像のURL);
}
#menu02 a{
background-image:url(はじめに表示する画像のURL);
}
#menu02{
background-image:url(マウスオーバー画像のURL);
}
#menu03 a{
background-image:url(はじめに表示する画像のURL);
}
#menu03{
background-image:url(マウスオーバー画像のURL);
}
#menu04 a{
background-image:url(はじめに表示する画像のURL);
}
#menu04{
background-image:url(マウスオーバー画像のURL);
}
#menu05 a{
background-image:url(はじめに表示する画像のURL);
}
#menu05{
background-image:url(マウスオーバー画像のURL);
}
#topmenu li a:hover{
background-image:none;
}

※↑マウスオーバー時の画像を使わない場合はピンクのCSSは削除します

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

もし・・・メニューとヘッド画像や記事の間にスキマを作りたい場合は・・
上のＣＳＳの　margin: 0;/*注1*/　この部分・・

margin:10px 0;/*注1*/　　←メニューの上下に10pxのスキマを作ります
margin:10px 0 0;/*注1*/　　←メニューの上に10pxのスキマを作ります
margin:0 0 10px;/*注1*/　　←メニューの下に10pxのスキマを作ります

もし・・メニューを並べたときスキンの幅より狭くて中央にしたい場合は

#topmenu ul{
width:600px;/*ベーシックの場合は800pxです*/ ←実際のメニューの横幅を設定
height:57px;/*画像の高さ*/
margin:0 auto;/*注1*/　　← auto を付けて中央寄せにします
padding: 0;
dislay: block;
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

見本ブログのようにヘッド画像の下にメニューをつける場合は・・

フリープラグインにこのままコピペ・・・

<script type="text/javascript">
<!--
$(function() {
$("#topmenu").insertAfter('#header');
})
// -->
</script>

ヘッド画像の上にメニューをつける場合は・・

フリープラグインに・・・

<script type="text/javascript">
<!--
$(function() {
$("#topmenu").insertBefore('#header');
})
// -->
</script>

ブログの下・・フッターの上につける場合は・・

フリープラグインに・・・

<script type="text/javascript">
<!--
$(function() {
$("#topmenu").insertBefore('#footerArea');
})
// -->
</script>

・・

うぅ～　・・・・

もっとつけたい場所があるのですが・・・それは書けません・・・

自分で好きなフォントで好きな項目を作りたい方は・・

こちらに素材がありますから自由に加工ください　

（背景が変更できますから使っているスキンの色に合わせてチェックください）

素材置き場：（あけおめがまだ付きっぱなしなのでうざくてすみません）
青系ボタン　http://ameblo.jp/ab-test/entry-10650879996.html
緑系ボタン　http://ameblo.jp/ab-test/entry-10650922058.html
桃系ボタン　http://ameblo.jp/ab-test/entry-10650898070.html

こちらの素材には文字（メニュー項目）が入っていません

次の記事で文字入れ加工方法を説明します