自閲覧用・アイコン装飾 キラキラ

hiino
·

またしてもアイコン装飾です。沼崎さんほんとにありがとう、いいおもちゃを与えられた子どもなのでさんざん遊んでいます

css for PCデッキ

CSS for スマホ

二色版、黄色とゴールドを選択できるよ for PC

白背景でも見えやすくなったと思う!やったね

注意点

ノート内の呪文をコピペして、「設定」>「全般」最下部「css」へ入れて使って下さい。

* 各段落の一行目に 「IDを入れる場所」が4カ所あります。自分のIDを入れて下さい。

 ※一色版はダークモード推奨。黄色のキラキラが白背景だと見えにくいです

 ※二色版はお好みで黄色とゴールドが選べるようにしました!サンプルを末尾に入れておきます。

調整カスタマイズ

各パーツのサイズ上下位置などは各パーツの段落の最終行でできるよ

  • scale=(倍率)、

  • translate=( ①左右方向→数字が小さくなると左へ・大きくなると右へ, ②上下方向→大きくなると下へ移動 )

遊びとして適度にさわってみるのもいいかも。パーツがおおきいー!というのもたのしいですん

二色版cssサンプル

```

/* キラキラ装飾 二色バージョン 改造20240112.1ver from 沼崎さんCSS カスタムプロパティバージョン */

.x5yeR > a[href="/@ ここにIDを入れる "]{

position: absolute;}

/* 通知のところ ミニパーツ 初期カラー ゴールド*/

.x5yeR > a[href="/@ ここにIDを入れる "] + .xDn7E .xhAPG::after {

display:block;

content:var(--svgshinegold); /*色変更ここよ*/

transform:scale(0.2) rotate(10deg);

margin-left:10px;

width:15px;

height:15px;

}

/*上のパーツ 初期カラー ゴールド*/

.x5yeR > a[href="/@ ここにIDを入れる "]::before {

display:inline-block;

width: 100px;

height: 100px;

content:var(--svgshinegold);  /*色変更ここよ*/

transform: scale(0.4) translate(-0.5vw,70%) rotate(20deg);

}

/*下のパーツ 初期カラー 黄色*/

.x5yeR > a[href="/@ ここにIDを入れる "]::after {

display:inline-block;

width: 30px;

height: 30px;

content:var(--svgshine); /*色変更ここよ*/

transform: scale(0.35) translate(1vw,40%) rotate(-20deg);

}

/* 色は①shine=黄色、②shinegold=ゴールドが入っています。

どちらかの色でそろえたいときは:

上記各段落「最終から二行目」末尾部分(--svgshine)⇔(--svgshinegold)、goldの有無で指定を直して下さい。※以下を触る必要はありません */

:root{

--svgshine:url('data:image/svg+xml;charset=utf8, %3Csvg%20version%3D%221.1%22%20id%3D%22SHINE%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20enable-background%3D%22new%200%200%2040%2040%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23FCE400%22%20d%3D%22M40%2C20c-12.603%2C4.085-15.914%2C7.397-20%2C20c-4.085-12.603-7.396-15.915-20-20c12.603-4.085%2C15.915-7.397%2C20-20%20C24.086%2C12.603%2C27.397%2C15.915%2C40%2C20z%22%2F%3E%3C%2Fsvg%3E');

--svgshinegold:url('data:image/svg+xml;charset=utf8, %3Csvg%20version%3D%221.1%22%20id%3D%22SHINE%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20enable-background%3D%22new%200%200%2040%2040%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23c4a81a%22%20d%3D%22M40%2C20c-12.603%2C4.085-15.914%2C7.397-20%2C20c-4.085-12.603-7.396-15.915-20-20c12.603-4.085%2C15.915-7.397%2C20-20%20C24.086%2C12.603%2C27.397%2C15.915%2C40%2C20z%22%2F%3E%3C%2Fsvg%3E');

}

```

 あそんでみてね!

@hiino
このうさぎには角があります 兎に角というやつです