Jimdo独自レイアウトと旧レイアウトで使用するボタン3種類をデザインする方法をご紹介します。スマホ用テンプレートやPC表示用などのカスタマイズにお役立て下さい。
なお、このページから閲覧されている方は、スマートフォン表示用のテンプレートからお読みになると理解が深まるかと思います。
1. スマホ表示用ボタンをカスタマイズ
普通にスマートフォン表示をすると、リンクボタンが左寄せになってしまいますよね。
編集画面でボタンをセンター(中央)に指定しても、なぜかスマホ表示では左揃えで強制表示されます。この問題を解決するためには、下記のスタイルを適用するのが良いでしょう。
.j-calltoaction-wrapper {
text-align: center;
}
ボタンがセンタリングされました。でも、このままのデザインでは何だか味気ないという方へ。
ここでは、スマホ表示用ボタン3種類をカスタマイズして、サイトを少し華やかにしてみましょう。早速、下記のCSSをお試し下さい。
.j-calltoaction-link-style-1 {
background: #6db553 !important;
color: #ffffff !important;
border-radius: 20px !important;
padding: 0.8em 1.5em !important;
box-shadow: none !important;
}
.j-calltoaction-link-style-2 {
background: #4e75b9 !important;
color: #ffffff !important;
border-radius: 20px !important;
padding: 0.8em 1.5em !important;
box-shadow: none !important;
}
.j-calltoaction-link-style-3 {
background: #eb3d41 !important;
color: #ffffff !important;
border-radius: 20px !important;
padding: 0.8em 1.5em !important;
box-shadow: none !important;
}
実はこのボタンの色は、Jimdoブランドのイメージカラーで使われていたりします。
色彩がポップで鮮やかなので、サイト訪問者をワクワクさせたりもできるかも知れませんね。
2. パソコン表示用ボタンをカスタマイズ
独自＆旧レイアウトのPC表示における「リンクボタン」の初期デザインは、3種類ともグレー色になっています。
「少し古くさい。物足りない・・。」という方は、下記のスタイルを「基本設定」＞「ヘッダー編集」にコピペ後、保存をクリックしましょう。最後にパソコンの「F5」ボタンを押す(またはページを再読込する)のを忘れないようにしましょう。
<style type="text/css">
.j-calltoaction-link-style-1 {
background: #6db553;
font-size: 15px;
border: none;
border-radius: 20px;
padding: 11px 15px;
}
.j-calltoaction-link-style-2 {
background: #4e75b9;
font-size: 15px;
border: none;
border-radius: 20px;
padding: 10px 15px;
}
.j-calltoaction-link-style-3 {
background: #eb3d41;
font-size: 15px;
border: none;
border-radius: 20px;
padding: 9px 15px;
}
.j-calltoaction-link-style-1:hover,
.j-calltoaction-link-style-2:hover,
.j-calltoaction-link-style-3:hover {
opacity: 0.8;
font-weight: normal;
}
</style>
※<style type="text/css">と</style>は、既に記述されている場合は不要です。
画像のボタンは3つとも当記事内のスマホ表示のものと同色ですが、マウスオン時にエフェクトを付けるなど、PC表示に合うようなデザインに変更しています。
そしてもうお気づきかと思いますが、ボタンの大きさは3つともほぼ同じ大きさにしています。
（各ボタンの「内余白：paddingの数値」を調整することで同一サイズにしています。）
簡潔に用語を説明
【 .j-calltoaction-link-style-1 】
：大雑把に、ボタン1の表示部分のクラス名です。
【 .j-calltoaction-link-style-1:hover 】
：ボタン1の上にマウスカーソルをのせた状態です。
【opacity 】
：透明度「0.0～1.0」の範囲内で数値が大きくなるほど不透明になります。
他にはリンク画像のマウスオン（a:hover img）などにも応用が利きます。
【 font-weight 】
：ここではマウスオン時に太文字にならないよう、標準サイズにしています。
【 border 】
：ここではボタン周りの枠線を無しにしています。
上手く行きましたか？
ボタンのデザインを変えるだけでもサイトの印象が見違えて良くなりますよね。
次回は、メディアクエリを利用したコンテナのカスタマイズを見ていきましょう。
どうぞ、お楽しみください。