テンプレートデザイナーへ

あなたのテンプレートがslidde.coで素晴らしい編集体験を提供するなら、デザインを変更したり、複数ページに拡張したいときに顧客があなたに連絡してくるでしょう。

コーディングやデザインの経験がないユーザーでも、リッチテキストエディタを使って自分で画像を変更できます。しかし、時には美しいテンプレートが複雑すぎて、ニーズに合わせて簡単に調整できないことがあります。

以下はいくつかのヒントです。

チュートリアルを書く

非表示をスライドで使用して、テンプレートの使い方に関するチュートリアルを書いてください。こちらが例です。

アニメーションで隠された要素の編集

特定のテキストや画像を隠すアニメーションがある場合、例えばopacity: 0やdisplay: noneのような場合、CSSスタイル名にカーソルを合わせて編集アイコンをクリックできます。そして、「キャンバスで非表示」オプションを選択して、実際のウェブサイトをエクスポートする際にのみ適用されるようにします。これにより、ユーザーはエディタ内で要素を簡単に編集できます。

変数を使用する

CSS変数を設定して、顧客がテンプレートの色や他の属性を簡単に変更できるようにします。

--primary-fg: #000
--primary-bg: #fff

そして、要素自身を含むすべての子孫に適用できます。

color: var(--primary-fg)
background-color: var(--primary-bg)

より詳細なガイドについては、公式ドキュメントをご覧ください。

要素のリストのスタイリング

要素のリストをスタイリングする際には、ユーザーエクスペリエンスを向上させるために高度なセレクタを適用できます。

ボタンリストをcolor:red、color:blue、color:greenでスタイリングすると、ユーザーが3つ以外のボタンを持っている場合や、誤ってボタンを削除した場合、再度ボタンをスタイリングする必要があります。

しかし、ボタンリストに以下のようにすると、

&>*:nth-child(3n+1).color: red
&>*:nth-child(3n+2).color: green
&>*:nth-child(3n+3).color: blue

ユーザーが何個ボタンを持っていても、常に交互の色のボタンシーケンスが得られます。

同じ原則は、画像のリストにも適用できます。

また、特定の文法について学ぶために、nth-child と nth-of-type についてさらに読むことができます。