アイコン装飾 配布cssのパーツだけを変更したいとき

hiino
·

春になったら・夏になったら…そんな風に思うこともあるかもしれません

そんなときのために!備忘録として!

パーツを変更したいとき!!!

① ↑ svg画像を作るジェネレーターを使う。しゅごい便利! 色や大きさや膨らみ具合など、描画要素はすべてマウスでスライド調整! 目で見ながら色々ここで作れる。ここで好みのパーツを作ります(* 大きさを40pxにするとあとで配布cssへいれたときに位置の数値をそんなに動かさなくてよいみたい)。

② できたら右側 <svg>とか書いてあるテキスト部分 をコピペでここへ ↓

ここの上欄(SVGコード)へいれて、青い変換ボタンをぽちっとして文字列を変換する、中段(base64コード)にすごくしゅごい呪文ができたら、それをコピペ。(*変換がうまくできているかどうかはシミュレータがあるので最下段で見られるよ!すてき!)

③ ノベスキへ戻り、「設定」>「全般」最下部「css」、すでにある(とおもう)上記cssの最下部、rootの部分の、 charset=utf8,  の続きへいれる。(配布記事内サンプルでは改行してあるように見える部分)

④ 保存・リロードで確認する。(PCの場合は別窓1でノベスキのcss画面を開いておき、css保存したら「リロードをキャンセル」して・別窓2でリロード。片側は編集用、片側を確認用にするとリロード後にホームへ・もう一回もどって、などいちいち開閉せずにすむから楽)

⑤ 必要なら位置を調整。たぶんミニパーツは触らなくていいと思う。上下パーツの各段落、最終行で調整ができます。

  • scale=(倍率)、

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

の指定が好みでできるので、数字を少しずついじってみてください。

 

という感じでそれぞれが好きにできるはず…私はコピペでミスったか何かでどうにも上手くいかずに泣きを見た日がありましたが助けてもらって何とかなりました。ありがとう沼崎さん

今度は私は助ける番かもしれない…という感じで素振りだけはしています(ぶんぶん)ただまったくのど素人には変わりが無いんだよね…

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