settings
何らかの配布場
nanraka-no-haihu-ba
てがろぐ用のスキンを配布する場所
chat
TOP
photo_library
ギャラリーモード
home
HOME
アバウト
(2)
配布
(15)
デモ用
(12)
つぶやき
(78)
返信
(21)
開発
(11)
鍵付き投稿
(1)
自由装飾
(5)
下げる投稿
(1)
スキンtenran
(5)
スキンsirason
(5)
スキンmeikan
(1)
スキンkozin
(7)
スキンippen
(8)
スキンhokan
(2)
スキンaien
(3)
カスタマイズ
(21)
お知らせ
(2)
htmlテンプレート
(1)
NSFW
(2)
No.31
#カスタマイズ
#自由装飾
(2024/05/26追記)
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
以下は以前の記法(リンクを自由装飾で囲むやつ)
続きを読む
めっちゃ焦った DLリンクをボタンにしようと思って自由装飾で適当にボタン作ったら表示崩れてびっくりした
リンクがボタンの装飾の外側にあると駄目なようです まずテキストリンクを作ってからそれを丸ごとボタンの装飾で包み、deco-〇〇配下のaに対して装飾すればいいっぽい
という感じでスキンのDLリンクを
ボタン
にしてみました ちゃんとできてる?下にcss置いときます
自由装飾「button」
/* ボタン(リンクはボタンの中に貼る) */
.deco-button a {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 5px;
margin: 3px;
padding: 0.3rem 1rem;
background-color:
好きな背景色
;
color:
好きな文字色
;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px
好きな影色
;
}
.deco-button a:hover { background-color:
好きなホバー色
; box-shadow: 0 0;}
畳む
つぶやき
2023/10/22(Sun) 17:30
edit_note
この投稿と同じカテゴリに属する投稿:
カテゴリ「つぶやき」の投稿だけを見る
(※
時系列順で見る
)
この投稿日時に関連する投稿:
2023年10月22日の投稿だけを見る
(※
時系列順で見る
)
2023年10月の投稿だけを見る
(※
時系列順で見る
)
この投稿に隣接する前後3件ずつをまとめて見る
« No.29
/
No.32 »
初期表示に戻る
アバウト
(2)
配布
(15)
デモ用
(12)
つぶやき
(78)
返信
(21)
全年月 (129)
2024年 (65)
2024年11月 (8)
2024年10月 (4)
2024年09月 (5)
2024年08月 (3)
2024年07月 (9)
2024年06月 (5)
2024年05月 (10)
2024年04月 (11)
2024年03月 (3)
2024年02月 (2)
2024年01月 (5)
2023年 (53)
2023年12月 (10)
2023年11月 (19)
2023年10月 (14)
2023年09月 (10)
2022年 (11)
2022年02月 (10)
2022年01月 (1)
新しい順(降順)
時系列順(昇順)
FREESPACE
フリースペースエリアです。
管理画面から自由に編集ができます。
・プロフィールとか
・リンク集とかにしてもいいかも
expand_less
(2024/05/26追記)
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
以下は以前の記法(リンクを自由装飾で囲むやつ)
めっちゃ焦った DLリンクをボタンにしようと思って自由装飾で適当にボタン作ったら表示崩れてびっくりした
リンクがボタンの装飾の外側にあると駄目なようです まずテキストリンクを作ってからそれを丸ごとボタンの装飾で包み、deco-〇〇配下のaに対して装飾すればいいっぽい
という感じでスキンのDLリンクをボタンにしてみました ちゃんとできてる?下にcss置いときます
自由装飾「button」
/* ボタン(リンクはボタンの中に貼る) */
.deco-button a {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 5px;
margin: 3px;
padding: 0.3rem 1rem;
background-color: 好きな背景色;
color: 好きな文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px 好きな影色;
}
.deco-button a:hover { background-color: 好きなホバー色; box-shadow: 0 0;}
畳む