旧レイアウト・独自レイアウトでボタン機能の設定が出来るCSS
Jimdoの項目追加で、新たにボタン（リンクボタン）を設定する機能が追加されました。
大変便利なのですが、特に旧レイアウト・独自レイアウトでは、色等の設定が出来ず、活用する事ができません。
そこで、取り急ぎ旧レイアウト・独自レイアウトで使用できる、ボタン機能用のCSSを作成しました。
旧標準レイアウトヘッダ追記用CSS
<style type="text/css">
/*<![CDATA[*/
/* Jimdo標準ボタン機能スタイル設定（旧レイアウト・独自レイアウト用）
----------------------------------------------- */
.j-calltoaction-link
{
color: #ffffff !important;
text-decoration: none !important;
background: #82AC5A !important;
font-weight:bold !important;
border-radius: 2px;
border-style: none !important;
}
.j-calltoaction-link:hover
{
text-decoration: underline !important;
background: #9AC96A !important;
}
</style>
使用方法
上記ソースをコピーしてご利用ください。
※コピー＆ペーストを行う際は、コピー後、一度「メモ帳」やテキストエディタに貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。
Jimdoにログイン後、管理メニュー（右側に表示されるアイコン一覧）から「設定（歯車のアイコン）」を選択してください。
表示されるメニューから「ヘッダー部分を編集」を選択し、上記ソースを貼り付けてください。
独自レイアウト用CSS
/* Jimdo標準ボタン機能スタイル設定（旧レイアウト・独自レイアウト用）
----------------------------------------------- */
.j-calltoaction-link
{
color: #ffffff !important;
text-decoration: none !important;
background: #82AC5A !important;
font-weight:bold !important;
border-radius: 2px;
border-style: none !important;
}
.j-calltoaction-link:hover
{
text-decoration: underline !important;
background: #9AC96A !important;
}
使用方法
上記ソースをコピーしてご利用ください。
※コピー＆ペーストを行う際は、コピー後、一度「メモ帳」やテキストエディタに貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。
主なCSS内容
尚、主なCSS内容については下記の通りです。変更する事でカスタマイズが可能です。
※取り急ぎのため、一部設定が反映されていない場合がございますのでご了承ください。文字色・背景色・枠線・文字太さについては確認済みです。
- color: ＃ffffff !important;
文字色の指定です。白色に指定しています。 - text-decoration: none !important;
テキストの下線表示についての指定です。下線が表示されない様に指定しています。 - background: ＃82AC5A !important;
背景（ボタン部分）の色指定です。 - font-weight:bold !important;
文字の太さについての指定です。太字に指定しています。 - border-radius: 2px;
ボタン部分の角丸指定です。 - border-style: none !important;
ボタン外部の枠線指定です。表示されない様にしています。
コメントをお書きください