No.31
リンクをボタン風にする自由装飾
Ver 4.1.1以降、リンクにオプションで任意のクラス名を付与できる記法が実装されたので、配布記事のダウンロードリンクをボタン風に装飾してみました
これ→
ボタン
リンクのときこう書く→ [ボタン:CL(lbtn)]任意のURL
/* ボタン(リンク記法) */
a.uc-lbtn {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 0.3rem;
margin: 0.2rem;
padding: 0.3rem 1rem;
background-color: 背景色;
color: 文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px rgb(0 0 0 / 0.2);
}
a.uc-lbtn:hover { background-color: ホバー時の背景色; box-shadow: 0 0;}
公式ページ:任意のclass名を指定できるオプションをラベルに加えた場合に出力されるHTML
#自由装飾
役に立つかも情報
2023.10.22
No.31
back
この投稿と同じカテゴリに属する投稿:
カテゴリ「役に立つかも情報」の投稿だけを見る
(※
時系列順で見る
)
この投稿日時に関連する投稿:
2023年10月22日の投稿だけを見る
(※
時系列順で見る
)
2023年10月の投稿だけを見る
(※
時系列順で見る
)
この投稿に隣接する前後3件ずつをまとめて見る
開発
(11)
自由装飾
(5)
スキンyousen
(1)
スキンtenran
(3)
スキンsirason
(3)
スキンmeikan
(1)
スキンkozin
(6)
スキンippen
(9)
スキンhokan
(2)
スキンaien
(1)
カスタマイズ
(11)
お知らせ
(3)
htmlテンプレート
(1)
HOME
Ver 4.1.1以降、リンクにオプションで任意のクラス名を付与できる記法が実装されたので、配布記事のダウンロードリンクをボタン風に装飾してみました
これ→ボタン
リンクのときこう書く→ [ボタン:CL(lbtn)]任意のURL
/* ボタン(リンク記法) */
a.uc-lbtn {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 0.3rem;
margin: 0.2rem;
padding: 0.3rem 1rem;
background-color: 背景色;
color: 文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px rgb(0 0 0 / 0.2);
}
a.uc-lbtn:hover { background-color: ホバー時の背景色; box-shadow: 0 0;}
公式ページ:任意のclass名を指定できるオプションをラベルに加えた場合に出力されるHTML
#自由装飾