さて今日はずっと気になってた「M3用ミックス・マスタリングプラン」のページを編集してました。
ボタンクリックで表示/非表示を切り替えたり表を入れたりしたよー。
という忘備録です。
クリックで表示されるボタン導入
前座の文章…読まずにパッとプランの説明いきたい人きっといるよなぁ
そう思った私は「基本しまってあってクリックすれば文章が展開されるボタン」を導入しようと決意。アレコレ調べてボタンのデザインも考えて、こんな感じに落ち着きました。
えるしつているか
ぶつとびは
こゆびがみじかい
今回のコードもサルワカさんのを使わせていただきました。
デザインも同じくサルワカさんのボタン一覧から。
ほんの少し右に寄せたかったので padding を入れて場所を調整しました。
価格表のデザイン
あとミックスの価格表をもうちょっと見やすくしたかったので今回はじめて表を作ってみました。ややこしかった…！！
PCからだとこんな感じー。
これもサルワカさんのページでお勉強しました。各要素の説明が丁寧でわかりやすくてありがたかった…。
こちらのページで他のタグ要素を確認したりCSSの書き方をチェックしたり。
スマホでも綺麗に見えるように専用コードを書いて文字サイズや余白を調整しました。各セルの幅を指定するのにすごい時間取られたよ……。
まだミックスの価格表しかできてないのでこれからマスタリングの方も編集予定です。
…なんだけど、実はまだあれでいいか考え中。もうちょっと見やすい表記にならないものか……妙案浮かんだらまた編集します。
お仕事ご依頼ページに何をどう書くかって難しいのよねー。今後も四苦八苦が続きそうです。
でも今日も一つ気になってたことができて余は満足なり(^ω^)(^ω^)(^ω^)
件のページはこちらをクリック！
追記：ご依頼ページからの誘導ボタンも変えたよ
あとそうだ、M3用じゃない普通のお仕事ご依頼ページからM3用プランへの誘導ボタンも編集しました。
マウスオーバーで色がちょっと変わるグラデボタン〜〜(^ω^)
これもさっき紹介したサルワカさんのボタンデザインのページを元に、リンクに下線が出ちゃうのを消したくてこちらのページを参考にコード（text-decoration: none;）追加したりしました。
