ホームページ作成

コピペで簡単!Jimdoのボタンに矢印をつけて見栄え良くする方法

コピペで簡単!Jimdoのボタンに矢印をつけて見栄え良くする方法

Jimdoでリンクを設定する時には、「ボタン機能」を効果的に使って欲しいということをこちらの記事でご説明しました。

そのボタン機能をより使いやすく、さらに見栄え良くデザインもカスタマイズする簡単な方法をご紹介します。

具体的には、「ボタンの先頭に矢印をつける」というやり方です。Jimdoのボタンがこんな風に変わります。

Jiimdoのボタンデザインをカスタマイズする

矢印をつけることで、

  1. ボタンのデザインが洗練され、見栄えが良くなる
  2. クリックやタップをすることができる「ボタン」であることがよりわかりやすくなる
  3. 矢印が、訪問者に「次に進むのはこちらのボタンを押すんですよ」というイメージを与えてくれる

といった効果が期待できます。

ソースコードをコピー・ペーストするだけなので、作業も簡単です。ぜひともお試しください。

Jimdoのボタンに矢印を追加するCSSソースコード5種類

矢印のデザインによって、ソースコードが異なります。

Jimdoの場合、ボタンのデザインは3つ設定できます。3種類とも同じ矢印をつけることもできますし、すべて違うデザインにすることも可能です。ボタンごとにコードがわかれていますので、組み合わせることが自由にカスタマイズできます。

①シンプルなラインの矢印を使ったボタンデザイン

①シンプルなラインの矢印を使ったボタンデザイン

②丸の中に矢印があるJimdoボタンデザイン

②丸の中に矢印があるJimdoボタンデザイン

③角丸矢印のJimdoボタンデザイン

③角丸矢印のJimdoボタンデザイン

④シンプルな三角形のJimdoボタンデザイン

④シンプルな三角形のJimdoボタンデザイン

⑤丸の中にラインの矢印が入ったJimdoボタンデザイン

④シンプルな三角形のJimdoボタンデザイン

ボタンに矢印を追加するCSSソースコードをJimdoホームページに追加する方法

紹介した5つの矢印デザインの中から好きなものを選び、対応するソースコードをすべてコピーしてください。

すでに他のCSSソースコードなどをJimdoホームページに設定している場合は、その内容を変更してしまわないよう、注意して設置してください。場合によっては、そのままコピー・ペーストするだけですと、不具合が生じる場合があります。ヘッダー編集の中に何も入れていないという方は、そのままコピーペーストして大丈夫です。

Jimdoにログインしたら、「管理メニュー」へ移動
基本設定を選んで
ヘッダー編集を選択。
ヘッダー編集のページ内になる枠の中に、コピーしたテキストをペーストして、保存を押してください。

ボタンデザインに矢印が反映されたら成功です。

まとめ:ボタンデザインに矢印を加えるだけでも、ホームページの雰囲気やわかり易さは大きく変わる

Jimdoはシンプルさがうりなので、余計な装飾がないのですが、そこを少しカスタマイズしてあげるだけで、ちょっと野暮ったかったボタンデザインも見栄えが良くなります。

また、矢印をつけることで「次にこのボタンを押してください!」というホームページ制作者のメッセージがより強調されるという点も大きなメリットでしょう。

設置方法などわからないことがありましたら、JimdoCafe太田までお気軽にお問い合わせください。