テキストからリンクボタンを作成するCSS
テキストベースのリンクボタンを制作する際は、下記サイトに掲載されている方法が一般的です。
簡単ロールオーバー!:Jimdoでつくる簡単ホームページ! 様
しかし、widthを指定しないといけないため使用箇所が限られてしまいます。
「より手軽に、例えば<a>タグ(リンク部分のタグ)にクラス指定するだけでリンクボタンが作りたい・・・」と色々試して、「Jimdo・みんビズ上で動作する」リンクボタン用のソースを作成しました。
(CSSの指定ですので他のCMSやサイト制作でもご利用頂けます)
リンクボタン見本
テキストからリンクボタンを作成しました≫
※クリックすると当サイトのトップページに移動します。
<リンクボタン見本の備考>
- ソースで指定しているボタンのカラーは異なります。
- 色が変化する際のアニメーション効果は別途指定しています。
- マウスオーバー時には、下線が表示しない様に指定してあります。
- ブラウザの種類やバージョンによって見え方が異なります(IE6~8では角丸等が反映されません)
CSSの設定追加で更にカスタマイズも
CSSの設定を追加・調整すると下記ボタンの様なカスタマイズも可能です。グラデーションの指定等が必要ですが、興味のある方はぜひチャレンジしてみてください。
CSSの設定を変更するとここまでカスタマイズ出来ます≫
※クリックすると当サイトのトップページに移動します。
リンクボタン用CSSソース及び設置方法
標準レイアウト・スペシャルレイアウトに設置する方法
【リンクボタン用CSS(ヘッダ追記用)】
/* テキストからリンクボタン作成用CSS
(Jimdoの「ヘッダ」部分に追記用)
fonto-size等適宜変更してください
----------------------------------------------- */
<style type="text/css">
.link
{
display: inline-block;
*display: inline;
*zoom: 1;
margin: 5px 0;
font-weight: bold;
font-size: 14px;
padding: 10px;
line-height: 20px;
color: #ffffff !important;
text-decoration: none !important;
background: #c83b3b;
border-radius: 2px;
}
.link:hover
{
text-decoration: underline !important;
background: #C65555;
}
</style>
上記ソースをコピーしてご利用ください。
※コピー&ペーストを行う際は、コピー後、一度「メモ帳」やテキストエディタに貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。
Jimdoにログイン後、管理メニュー(右側に表示されるアイコン一覧)から「設定(歯車のアイコン)」を選択してください。
表示されるメニューから「ヘッダー部分を編集」を選択し、上記ソースを貼り付けてください。
独自レイアウトに設置する方法
【リンクボタンCSS(独自レイアウト記載用)】
(独自レイアウトで設置用)
fonto-size等適宜変更してください
----------------------------------------------- */
.link
{
display: inline-block;
*display: inline;
*zoom: 1;
margin: 5px 0;
font-weight: bold;
font-size: 14px;
padding: 10px;
line-height: 20px;
color: #ffffff !important;
text-decoration: none !important;
background: #c83b3b;
border-radius: 2px;
}
.link:hover
{
text-decoration: underline !important;
background: #C65555;
}
上記ソースをコピーしてご利用ください。
※コピー&ペーストを行う際は、コピー後、一度「メモ帳」やテキストエディタに貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。
Jimdoにログイン後、管理メニュー(右側に表示されるアイコン一覧)から「レイアウト」を選択し、「独自レイアウト」内「CSS」に上記ソースを貼り付けてください。
CSSの反映方法
文章入力画面の右上にある「HTML」をクリックし、ソース編集画面の
<a href="・・・>部分を
<a class="link" href="・・・>
と書き替え、保存します。
(全て半角英数字で記載してください)
反映されれば、テキストがリンクボタン変わり、マウスオーバーすると色が変化します。
(文字部分には下線が表示されます)
設定後のリンク変更について
上記リンクボタンを制作した場合、一度設定しているリンクを変更する際は「CSSの反映を解除する」必要があります。
リンクボタンのCSSを指定した状態でリンクを変更すると、変更が反映されません(設定画面は「反映されている」様に動作するのでご注意ください)のでご注意ください。
コメントをお書きください