トップページイラスト(ナナセミキ様作成)

イラストの情報はこちらから≫

menuopen

Jimdo・みんビズカスタマイズ テキストからリンクボタン作成方法

テキストからリンクボタンを作成する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(独自レイアウト記載用)】

/* テキストからリンクボタン作成用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を指定した状態でリンクを変更すると、変更が反映されません(設定画面は「反映されている」様に動作するのでご注意ください)のでご注意ください。

▲このページのトップへ