スマートフォンサイトを表示する

  1. TOP
  2. はじめて相談室 : 第34回 「ボタン」を使ってリンクをもっと目立たせよう

エキスパートコラム

はじめて相談室

第34回:「ボタン」を使ってリンクをもっと目立たせよう

執筆:#fc0(株式会社エフシーゼロ)

2018年2月13日更新

  • このエントリーをはてなブックマークに追加

閲覧数1,676views

このコラムをPDF形式でダウンロードする

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、「ボタン」をうまく使う方法が知りたいというご相談です。

おたより

はじめてWEBでホームページを作ってから結構経ちます。
Jimdoのコンテンツにある「ボタン」をうまく使いたいなと思っているんですけど、スタイルが3つあってどれを使えばいいかわからないし、なんか色がしっくりこないし、うまくできません。
ボタンをうまく使う方法、教えてください!(面倒な綿棒さん)

ナビゲーターからの回答

ナビゲーター

面倒な綿棒さん、こんにちは。
はじめてWEBナビゲーターの立花かずみです。

いろいろな方のJimdoで作ったページを見ていると、Jimdoの「ボタン」コンテンツって意外と使われていないなと感じます。ちょっと使いどころが難しいのかもしれません。そこで今回は、ボタンの使いどころや見た目の調整についてお話していきたいと思います。「ボタン」を使ってリンクをかっこよく目立たせちゃいましょう!

「ボタン」追加の基本操作

まず、ボタンを入れるための基本操作について見ていきましょう。

(1)「ボタン」コンテンツを選択

ボタンを入れたい場所で「コンテンツを追加」をクリックしたあと、「ボタン」を選択します。

(2) スタイルを選ぶ

ボタンの設定画面が表示されます。3つのスタイルが選べるので、必要なものを選びます。

(3) ボタンの中の文字を編集する

ボタンの中に表示する文字は自由に編集ができます。ボタンの中をクリックして文字を書き換えます。

(4) リンク先を設定する

ボタンをクリックしたときのリンク先を設定します。
文字に対するリンク(「第29回:文字にリンクをつけたい」)と操作は同じです。ホームページの内部のページ場合はページを選択できます。外部ページの場合はURLを指定します。

ボタンをいい感じにしてみよう

ボタンを追加するだけなら割とかんたんにできるのですが、そのままだとちょっとしっくりこないこともあると思います。そんなときの調整ポイントについてお話します。

(1) 見た目の調整

初めてボタンを追加したとき「色がちょっと雰囲気と合わない」「字が見づらい」と感じたときには、「スタイル」機能を使って調整しましょう。

「スタイル」機能については、前回のコラムに基本操作が載っているので参考にしてくださいね。

管理メニューの「デザイン」から「スタイル」を選択してボタンをクリックすると、ページの上のほうに以下の図のようなボタンの設定画面が現れます。ここでボタンの見た目をいろいろ調整できます。

結構いろいろ変えられるんです!

  • フォント(=文字)の種類
  • フォントの大きさ
  • フォントの色(通常時、マウスカーソルが上に乗ったとき)
  • ボタンの枠線の色(通常時、マウスカーソルが上に乗ったとき)
  • ボタンの枠線の太さ
  • ボタンの角の丸み

ちなみに「(active)」と書いてあるものは、マウスカーソルが上に乗ったときの設定です。
割と目立つので忘れずに設定しましょう。設定するとページにすぐに反映された状態でプレビューすることができます。「保存」を押すまでは確定しないので、しっくりいく見た目を探してみてください。

(2) スタイルごとの見た目調整

ボタンには3つのスタイルがありますが、3つそれぞれ別の見た目に調整できます。
ホームページの中で同じスタイルのボタンが複数使われていた場合、そのうちの1つのボタンの見た目を調整すると、他のボタンもすべて同じ見た目に変わります。

「このボタンは他とは違う見た目にしたい」というときには別のスタイルのボタンにすれば、見た目の違いを出すことができます!

(3) 配置の調整

ボタンを追加した直後はボタンが左端に配置されます。ページのレイアウトによっては、中央や右に配置したいこともあると思います。そんなときは、ボタンの編集画面で配置を調整します。通常の編集画面(スタイルは選択していない状態)で調整ができます!

(4) ボタンの中の文字の調整

より多くクリックしてもらえるように、ここに入る文字の内容も工夫できるといいですね!「ここをクリック」などよりも「業務内容を詳しく見る」といった、見る人がクリック後に何をするのかわかるようなものにすると、クリックしやすくなるかも!

今回は「ボタン」の操作と調整の方法についてお話しました。
ボタンはページの中にいくつでも入れられますし、どのページにも入れることができます。いろいろなページにボタンを入れて、ホームページの中身をどんどん見に行ってもらいましょう!

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

さあ、はじめよう!

はじめてWEB ホームページ公開の7ステップとポイントを動画でご紹介!!

  • ホームページ公開の7ステップ

    ホームページ公開の7ステップ

    ホームページ公開の7ステップ
  • はじめてWEB サービス紹介

    はじめてWEB サービス紹介

    はじめてWEB サービス紹介
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/12/2~2018/12/8]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ