ナビボタンを作る
ホームページに欠かせないのが、ナビボタン。トップページに戻ったり、別のページへジャンプしたり、カッコいいホームページには、カッコいいナビゲーションボタンがついてます。とくに、マウスでクリックしたときに、ぼこっとへこんだり、色がかわったりする、「マウスオーバー機能」つきは、ちょ~かっこい~。
単色のメニューなら、HTMLとCSSの記述のみでいけますが、現在まだ主流の方式では、画像を使わないとグラデーションとか、かっちょいいのは、作れないです(HTML5では、できるらしいけど、まだムリ…)。
そういうわけで、普通は、画像編集ソフトを使ってこうしたボタンを作ります。今回は、これをワードでどこまでできるか、トライです。(Word2010使用)
いざ、発進!
上の赤いボタン「ぽちっとな」の上にマウスを移動してください。
ぼこっと「ぽちっとな」ボタンがへっこみます。ちょうどボタンを押した感じです。このボタンは、このページにリンクが張ってあるので、押してもジャンプしませんが、きちんとリンク先を指定してあげれば、本物のリンクボタンになります。
どうです? ちょっとカッコいいでしょ?
でっぱったボタンはもう古い! という声も聞きます。でも、家具調テレビや「たっちょんぱ」に、文明の香りを感じる世代としては、こういう「でっぱり」って押したくなるんですよね~。やっぱり時代はたっちょんぱ!です。
- 図形の挿入
ワードを起動し、「挿入」⇒「図形」⇒「角丸四角形」を選びます。
- 角丸四角形の描画
左上から右下に向かってドラックし、ボタンの大きさを決めます。
- 「図形のスタイル」
「描画ツール」の「書式」から「図形のスタイル」を開き、「光沢ー赤、アクセント2」をクリックします。
「光沢」系の色の中から、ページのイメージに合うものを選びます。そのほかのスタイルも試してみるといいと思います。
この「図形のスタイル」の中にはカラーバリエーションが8個しかありません。ほかのカラーから選びたい!という場合は、ワードの「テーマ」という機能を利用します。「ページレイアウト」の「テーマ」⇒「配色」を選ぶと、「Office」「アース」「エコロジー」など多数のカラーパレットのようなものがあります。この中から好みの色調のものを選びます。すると、「図形のスタイル」で選べる色の種類が変わります。また、「テーマ」では、自分好みに「配色」の組み合わせをカスタマイズできるので、いろいろ試してみるのがおススメです。
- ボタンをコピー&貼り付け
スタイルを決めた「角丸四角形」をコピーし、右側に貼り付けます。
通常時のボタンとマウスオーバーのときのボタンをCSSで読み込ませるのに、縦か横に並べて一枚のファイルとして準備するとよいので、このようにコピーします。CSSの指定によっては、縦に並べてもいいです。
このように一枚のファイルで準備すれば、ページが読み込まれたときに、マウスオーバーのときの画像も読み込まれるので、マウスオーバーしたときに一瞬ボタンが消えてしまうということが防げます。
- 横書きテキストボックスの描画
「ぽちっとな」を入力するために、テキストボックスを作ります。
「角丸四角形」に直接「ぽちっとな」と入力することはできます。しかし、今回は、後のほうで「上下反転」という機能を使い、「角丸四角形」を反転させます。この場合、「ぽちっとな」というテキストまで一緒に反転してしまい、天地が逆になってしまうので、ここでは別にテキストボックスを用意します。
「挿入」⇒「テキスト」⇒「テキストボックス」⇒「横書きテキストボックスの描画」を選択します。
- テキスト入力
「角丸四角形」の上にドラックして横書きテキストボックスを挿入します。
「ぽちっとな」とテキストボックスに入力します。
- テキストのセンタリング
「ぽちっとな」テキストボックス内にカーソルがある状態で、「ホーム」の「段落」⇒「中央揃え」を選択します。
- フォントを決める
テキストボックスの外枠をクリックした状態で「ホーム」の「フォント」から、似合うフォントを選択します。これは「メイリオ」フォントです。
- テキストボックスの塗りつぶしをなしに
「描画ツール」の「書式」⇒「図形のスタイル」から「図形の塗りつぶし」⇒「塗りつぶしなし」を選択します。
テキストボックス自体の色がなくなり、下にある「角丸四角形」の色が透けて見えます。
- テキストボックスの線をなしに
続いて、テキストボックスの外枠も消します。
「描画ツール」の「書式」⇒「図形のスタイル」から「図形の枠線」⇒「線なし」を選択します。
- テキストの装飾
「ぽちっとな」を装飾します。
「描画ツール」の「書式」⇒「ワードアートのスタイル」から「塗りつぶし-白、影付き」を選択します。
- テキストを中央に
「ぽちっとな」が完全に「角丸四角形」の中央に寄るようにします。
「ぽちっとな」テキストボックスと「角丸四角形」を選択した状態で、「描画ツール」の「書式」⇒「配置」⇒「左右中央揃え」を選択します。
- 上下反転させる
マウスオーバーのときに、ぼこっとへこんだように見せる細工をします。
右側のボタンがマウスオーバー用です。へこんだ感じに見せるには、上下反転させます。
まず、右側のボタンを選択し、「描画ツール」の「書式」⇒「回転」⇒「上下反転」をクリックします。
- へっこみ画像も完成
「上下反転」した右側の画像、ぼこっとへっこんだ感じがします。
- 文字のコピー
「ぽちっとな」テキストボックスをコピーして、マウスオーバー用ボタンの上に貼り付けます。位置をしっかり決めます。
- グループ化
2つの「角丸四角形」と2つの「ぽちっとな」テキストボックスのすべてを選択してから、「描画ツール」の「書式」にある「配置」の「グループ化」を選択します。
これでグループ化されて、ひとつの画像として扱うことができます。
- 画像をコピー
画像を選択した状態から、右クリックして、「コピー」を選択します。
- 「ペイント」起動
「アクセサリ」にある「ペイント」を起動します。「ホーム」から「貼り付け」を選択します。
- 貼り付け
ワードで作成した「ぽちっとな」画像が貼り付けられました。
- JPEG画像として保存
ホームページで使うので、JPEG形式で保存します。「名前を付けて保存」からJPEG画像を選択します。
- ファイル名をつける
ファイルの種類が「JPEG」であることを確認し、ファイル名を決めて、保存します。
- ぽちっとなボタン
じゃじゃ~ん。「ぽちっとな」ボタン、できあがりです~。
- <<Word DE Show!トップ
- 3
- 4
- 風景画風写真をつくる予定>>
Tweet