わー、どーでしょう。ワードで遊ぶ、とことん遊ぶ、WordDEShow

ナビボタンを作る

ホームページに欠かせないのが、ナビボタン。トップページに戻ったり、別のページへジャンプしたり、カッコいいホームページには、カッコいいナビゲーションボタンがついてます。とくに、マウスでクリックしたときに、ぼこっとへこんだり、色がかわったりする、「マウスオーバー機能」つきは、ちょ~かっこい~。

単色のメニューなら、HTMLとCSSの記述のみでいけますが、現在まだ主流の方式では、画像を使わないとグラデーションとか、かっちょいいのは、作れないです(HTML5では、できるらしいけど、まだムリ…)。

そういうわけで、普通は、画像編集ソフトを使ってこうしたボタンを作ります。今回は、これをワードでどこまでできるか、トライです。(Word2010使用)

いざ、発進!

上の赤いボタン「ぽちっとな」の上にマウスを移動してください。

ぼこっと「ぽちっとな」ボタンがへっこみます。ちょうどボタンを押した感じです。このボタンは、このページにリンクが張ってあるので、押してもジャンプしませんが、きちんとリンク先を指定してあげれば、本物のリンクボタンになります。

どうです? ちょっとカッコいいでしょ?

でっぱったボタンはもう古い! という声も聞きます。でも、家具調テレビや「たっちょんぱ」に、文明の香りを感じる世代としては、こういう「でっぱり」って押したくなるんですよね~。やっぱり時代はたっちょんぱ!です。

図形の挿入
図形の挿入

ワードを起動し、「挿入」⇒「図形」⇒「角丸四角形」を選びます。

ボタンの大きさ決定
角丸四角形の描画

左上から右下に向かってドラックし、ボタンの大きさを決めます。

図形のスタイル
「図形のスタイル」

「描画ツール」の「書式」から「図形のスタイル」を開き、「光沢ー赤、アクセント2」をクリックします。

「光沢」系の色の中から、ページのイメージに合うものを選びます。そのほかのスタイルも試してみるといいと思います。

この「図形のスタイル」の中にはカラーバリエーションが8個しかありません。ほかのカラーから選びたい!という場合は、ワードの「テーマ」という機能を利用します。「ページレイアウト」の「テーマ」⇒「配色」を選ぶと、「Office」「アース」「エコロジー」など多数のカラーパレットのようなものがあります。この中から好みの色調のものを選びます。すると、「図形のスタイル」で選べる色の種類が変わります。また、「テーマ」では、自分好みに「配色」の組み合わせをカスタマイズできるので、いろいろ試してみるのがおススメです。

ボタンのコピーアンドペースト
ボタンをコピー&貼り付け

スタイルを決めた「角丸四角形」をコピーし、右側に貼り付けます。

通常時のボタンとマウスオーバーのときのボタンをCSSで読み込ませるのに、縦か横に並べて一枚のファイルとして準備するとよいので、このようにコピーします。CSSの指定によっては、縦に並べてもいいです。

このように一枚のファイルで準備すれば、ページが読み込まれたときに、マウスオーバーのときの画像も読み込まれるので、マウスオーバーしたときに一瞬ボタンが消えてしまうということが防げます。

テキストボックス描画
横書きテキストボックスの描画

「ぽちっとな」を入力するために、テキストボックスを作ります。

「角丸四角形」に直接「ぽちっとな」と入力することはできます。しかし、今回は、後のほうで「上下反転」という機能を使い、「角丸四角形」を反転させます。この場合、「ぽちっとな」というテキストまで一緒に反転してしまい、天地が逆になってしまうので、ここでは別にテキストボックスを用意します。

「挿入」⇒「テキスト」⇒「テキストボックス」⇒「横書きテキストボックスの描画」を選択します。

テキスト入力
テキスト入力

「角丸四角形」の上にドラックして横書きテキストボックスを挿入します。

「ぽちっとな」とテキストボックスに入力します。

テキストセンタリング
テキストのセンタリング

「ぽちっとな」テキストボックス内にカーソルがある状態で、「ホーム」の「段落」⇒「中央揃え」を選択します。

フォント指定
フォントを決める

テキストボックスの外枠をクリックした状態で「ホーム」の「フォント」から、似合うフォントを選択します。これは「メイリオ」フォントです。

塗りつぶしなし
テキストボックスの塗りつぶしをなしに

「描画ツール」の「書式」⇒「図形のスタイル」から「図形の塗りつぶし」⇒「塗りつぶしなし」を選択します。

テキストボックス自体の色がなくなり、下にある「角丸四角形」の色が透けて見えます。

線なしに
テキストボックスの線をなしに

続いて、テキストボックスの外枠も消します。

「描画ツール」の「書式」⇒「図形のスタイル」から「図形の枠線」⇒「線なし」を選択します。

テキスト装飾
テキストの装飾

「ぽちっとな」を装飾します。

「描画ツール」の「書式」⇒「ワードアートのスタイル」から「塗りつぶし-白、影付き」を選択します。

テキストを中央に
テキストを中央に

「ぽちっとな」が完全に「角丸四角形」の中央に寄るようにします。

「ぽちっとな」テキストボックスと「角丸四角形」を選択した状態で、「描画ツール」の「書式」⇒「配置」⇒「左右中央揃え」を選択します。

上下反転
上下反転させる

マウスオーバーのときに、ぼこっとへこんだように見せる細工をします。

右側のボタンがマウスオーバー用です。へこんだ感じに見せるには、上下反転させます。

まず、右側のボタンを選択し、「描画ツール」の「書式」⇒「回転」⇒「上下反転」をクリックします。

へっこみ画像完成
へっこみ画像も完成

「上下反転」した右側の画像、ぼこっとへっこんだ感じがします。

文字のコピー
文字のコピー

「ぽちっとな」テキストボックスをコピーして、マウスオーバー用ボタンの上に貼り付けます。位置をしっかり決めます。

グループ化
グループ化

2つの「角丸四角形」と2つの「ぽちっとな」テキストボックスのすべてを選択してから、「描画ツール」の「書式」にある「配置」の「グループ化」を選択します。

これでグループ化されて、ひとつの画像として扱うことができます。

画像をコピー
画像をコピー

画像を選択した状態から、右クリックして、「コピー」を選択します。

ペイント起動
「ペイント」起動

「アクセサリ」にある「ペイント」を起動します。「ホーム」から「貼り付け」を選択します。

貼り付け
貼り付け

ワードで作成した「ぽちっとな」画像が貼り付けられました。

JPEG画像として保存
JPEG画像として保存

ホームページで使うので、JPEG形式で保存します。「名前を付けて保存」からJPEG画像を選択します。

ファイル名をつける
ファイル名をつける

ファイルの種類が「JPEG」であることを確認し、ファイル名を決めて、保存します。

ぽちっとなボタン
ぽちっとなボタン

じゃじゃ~ん。「ぽちっとな」ボタン、できあがりです~。

ページの先頭へ戻る