WixStudioでVeloを使う Step 42 「『※』マークのリスト」
はじめに
皆はどうやって対応しているんだろう。前から気になってた。注意事項を列挙するときに箇条書きが使われることが多い。そして、箇条書きのマークに「※」が使われている。「・」よりも注意って感じがして良いと思う。しかし、WixStudioの箇条書きにこれはない。これに対応する方法をメモする。
「※」の箇条書き
準備
新しくサイトを作成しておく。コードも有効にしVeloを有効にしておく。
段落要素を配置し、リストにする
まずは、ページに段落要素を配置する。
段落要素を配置
デザインのパネルから箇条書きを選択すれば、段落要素の内容が箇条書きになる。
箇条書きを適用
箇条書きの中身がサンプルのままではイメージが湧きづらいので、理解出来る内容に書き換えておく。これは好み。
箇条書きの中身を変更
うん、なんとなく守らないといけない感が出てきた。
CSSクラス(カスタムクラス)を設定する
Veloを有効にし、既に配置されている段落要素の1つを選択する。
プロパティ・イベントを選択し、CSSクラスを開く。初めてCSSクラスを利用する場合、CSSファイルを追加を促される。
CSSクラス：初めて利用する時はCSSファイルを追加しなければならない
カスタムクラスの入力欄が現れる。ここに適用したいフォントのクラスを指定する。
今回はnote-markとした。
カスタムクラスはnote-mark
実装
実装はCSSで行う。コードパネルからglobal.cssを選択する。
global.css
コード
.note-mark ul {
list-style-type: '※';
}
実装は以上。これで箇条書きの「・」は「※」に変わる。
この記述はnote-markがカスタムクラスに指定されている要素に含まれている箇条書きに対するデザインを定義している。番号無しの箇条書きをWEBで表現する際にはulタグという記述によって実現されるので、これを対象にデザインを定義している。
どのようなデザインを定義内容list-style-type: '※';は、リスト項目に対するマークを指定。マークを「※」と指定している。
動作確認
この動作はプレビューをしなくてもエディタ上で確認ができる。
箇条書きが「※」マーク
補足
このglobal.cssの記述は単純でいい。中身を理解するというほどの内容ではないのでサイトを作るときにはglobal.cssにとりあえず貼り付けておいても良いと思う。
サイトのglobal.cssにこの3行を貼り付けておけば、サイト上の箇条書きへ適用することは容易。
例えば、段落要素をもう一つ用意して箇条書きにする。
段落要素(箇条書き)を追加
この要素のCSSクラス(カスタムクラス)にnote-markを設定すれば、箇条書きのマークが「※」にかわる。
CSSクラス(カスタムクラス)にnote-markを追加するだけでマークが変化する
非常に便利だと思う。
list-style-type
list-style-typeは独自の文字列をマークとして使う以外にも標準でマークを用意しているので、一度調べて見た方が良い。
まとめ
サイト全体からすればホント小さなことだと思うけど、こういった細かい事を解決できないのは悔しい。でも、まだ標準のGUI操作では提供されていないだけで解決方法はある。そしてコードの構造を理解しなくたってコピペで十分解決できるモノがある。今回のような記述をツール的に用意できると表現の幅が拡がってくるのかも。
つづき
Discussion