• HTMLのナレッジを貯めよう!!

    トピックス by ホリィ CX @SIVA ユーザーランク 3 pt  2022年3月14日 12:36 128 PV

    ウィジェット編集してるとたまにつまづきますよね・・!
    ここみて振り返れるようにしていきたいです!

    私からは以下です!
    ・リンクを追加するときのaタグにはclassではなくidを使う
    ・videoタグのみセンターにしたい場合divでvideoタグを囲みCSSで
    text-align:center;
    文字だけ右や左寄せにする場合
    <p style=”text-align: right”>
    文字を右寄せ
    </p>

    のい CX ウィジェット   1 月, 1 週間前 9 人 · 18 コメント
  • 18 コメント
  • かわさき CX @SIVA

    メンバー
    2022年3月14日 13:04

    すごーく初歩的なのですが、この前他のユーザーさんが新人さんにwidgetの使い方を教えるときに、CSSのオレンジの部分は触らないで、紫のところは変えると適宜アレンジ出来るんだよーと教えていてなるほどそういう伝え方があるのか〜と感心しました🤔

     

    あと個人的によく間違えてしまうのが入れ子関係ですかね。。

    spanの中にdiv入れられないとか、よくやってしまいます><

    社内のエンジニアさんに下記サイトを教えてもらったのでうまく活用したいところです💪

    https://yoshikawaweb.com/element/

    ↑色が水色になっているところは選択したタグの親として使用することができるのがわかります。
    また、「子」をクリックすると、子として使用できるタグがオレンジ色に変わるようになっています!(この見方もどっちがどっちだかよくわからなくなってしまいますが。。)

  • ユーザーボイス

    メンバー
    2022年3月31日 23:45

    アンケートwidgetでよく使います!

    選択のtype=“radio” と“checkbox”の違い

    radio: 1つだけ選択

    checkbox: 複数選択

  • ホリィ CX @SIVA

    管理者
    2022年3月31日 23:53
    • フォームの枠に太さをつけるには、タグ設定に記述する。色はフォーム設定から変更可能!
      iframeなので、外側のdivの.sb-formに記述が必要。
      .sb-form{
      border-right: 15px solid rgb(254, 228, 102)!important;
      border-left: 15px solid rgb(254, 228, 102)!important;
      }
    • 記事LPが長い場合は、ページ内リンクが正しく飛ばない場合がある。lazyloadの影響。slack確認し、現状は解決方法ない為、フォームなどであれば、ファネルでステップをつけた方が良い!
  • きはら CX @SIVA

    メンバー
    2022年4月4日 13:51

    ボタンを追従させる魔法のコードです!

    該当のCSSにそのまま入れてください!

      position: fixed;
      bottom: 10px;
      left: 50%;
      transform: translatex(-50%);
      z-index: 10000
  • のい CX ウィジェット

    メンバー
    2022年4月11日 19:44

    CTAボタンの上にカーソルを合わせた時に

    「ボタンの背景色が変える方法」と「ポインターの種類」です!

    <ボタンの背景色が変える方法>

    .button:hover {

    background-color: #59b1eb;

    }

    ※カラー部分は色々と変更できます!

     カーソルを合わせると背景色が変わります!

    <ポインターの種類>

    ①指のカーソル

    .button{

    cursor: pointer;

    }

    ②十字のカーソル

    .button{

    cursor: crosshair;

    }

    ③テキストのカーソル

    .button{

    cursor: text;

    }

  • のい CX ウィジェット

    メンバー
    2022年6月13日 18:13

    コピーガードをつけることができる記述👾

    <style>

    img {

    pointer-events: none;

    }

    </style>

  • つめ CX @SIVA

    メンバー
    2022年7月24日 13:52

    画像の余白を消すコードです。

    タグ設定のbodyに入れることで画像と画像の間の余白を消すことができます!

    <style>

    body .article-header-wrapper img {

      vertical-align: top;
    }

    </style>

  • 島原夏音

    メンバー
    2022年7月29日 14:51

    行間を変えたい時は以下を該当のCSSに入れることで、変更できます!

    { line-height:指定したい行間の数値; }



    例)HTML <h2> テキストテキスト </h2>

      CSS  h2{ line-height:指定したい行間の数値; }


  • みづき CX @SIVA

    メンバー
    2022年7月29日 17:08

    アンケートwidget等で次の画面がプレビューにない

    CSSに入っている下記コードを消していただくとプレビューで見ることができます!

    配信する際は元に戻すのをお忘れなく!

    .is-hidden {

    display: none;

    }

  • のい CX ウィジェット

    メンバー
    2022年8月19日 16:58

    見出しやテキストに注釈をつけたい時に便利なコード!

    上付きの注釈
    <sup>※注釈部分を入力</sup>
    下付きの注釈
    <sub>※注釈部分を入力</sub>

    ぜひご活用ください😄

  • りさりさ CX @SIVA

    メンバー
    2022年8月26日 19:15

    余白部分のつくるときはCSSにこの部分を追加してください!

    「margin-top: ○○;」

    「margin-bottom:○○;」

    「margin-left:○○;」

    「margin-right:○○;」

    「margin:○○(上下) ○○(左右);」

  • 島原夏音

    メンバー
    2022年8月29日 19:55

    widget内の一部に動きをつけたい場合

    HTMLで該当の箇所にクラス名をつけてCSSに以下を追加すると指定した箇所が大小に動きます。

    ◯◯◯◯ {
    animation: anime1 0.5s ease 0s infinite alternate;
    transform-origin: center;
    }<div>

    @keyframes anime1 {
    from {
    transform: scale(0.9, 0.9);
    }
    to {
    transform: scale(1, 1);
    }
    }

    ※◯◯◯◯の部分に、動きをつけたいclass名やid名を入れてください。

    目立たせることができますよ〜💫

    </div>

  • 島原夏音

    メンバー
    2022年8月29日 20:04

    スマホの表示画面にも背景をつけたい場合は、

    以下をタグ設定のJavascriptのheadに追加すると表示されます!

    <style>
    @media screen and (max-width: 919px) {
    .article-body {
    margin: 10px;
    }
    }
    </style>

  • ユーザーボイス

    メンバー
    2022年8月31日 22:30

    カルーセルで表示される画像の枚数を増やす方法

    以下の要素を増やすことで画像の枚数を増やすことが可能です

    <div class="swiper-slide">
    画像URL </div>
  • ユーザーボイス

    メンバー
    2022年8月31日 22:35

    箇条書きの点を消すCSSです

    ul {
      list-style-type: none;
    }
Page 1 of 2