変化するグラデーションをつける方法:HTMLユニット編

HTMLユニットを使用して変化するグラデーションを作ります。

HTMLユニットを使用して変化するグラデーションを作ります。

HTMLユニットを使用して変化するグラデーションを作ります。

このTipsでは、bingo!CMS1.7より搭載の「HTMLユニットV17」にHTMLとCSSを記述し、見出し1の背景に変化するグラデーションをつける方法をご紹介します。
グラデーションの色数を増やす、色の入る角度を変えるなど、適宜調整してご利用ください。

※上の表示サンプルは、幅100%のコンテナに「HTMLユニットV17」を配置し、HTMLとCSSを記述しています。

HTMLユニットの編集画面を開きます

  1. bingo!CMS管理画面にログインし、任意のページのページ編集画面を開きます。
  2. 画面上部のデザインユニットの一覧の中から、「HTML v17」のアイコンをドラッグ&ドロップでコンテナに配置します。
  3. 「HTML v17」のユニット編集画面を開きます。

※サンプル画面のコンテナはページ幅1000px、中央寄せに設定されています。コンテナのレイアウトは任意で設定してください。

HTML、CSSを記述します

  1. HTML欄、CSS欄にそれぞれ以下のように記述しました。ご希望のデザインに合わせて適宜変更してください。
    【HTML】
    
    	<h1>HTMLユニットを使用して変化するグラデーションを作ります。</h1>
    【CSS】
    
    	#unit-●●●{
    	    width: auto;
    	    height: 30vh;
    	    color: #fff;
    	    background: linear-gradient(-45deg, #F7FF00, #DB36A4);
    	    background-size: 400% 400%;
    	    animation: Gradient 5s ease infinite;
    	}
    
    	@keyframes Gradient {
    	    0% {background-position: 0% 50%}
    	    50% {background-position: 100% 50%}
    	    100% {background-position: 0% 50%}
    	}
    
    	h1 {
    	    font-family: 'sans-serif';
    	    font-weight: 300;
    	    text-align: center;
    	    position: absolute;
    	    top: 45%;
    	    right: 0;
    	    left: 0;
    	}
    
    ※HTML欄の<h1>〜</h1>の間は任意のタイトルに書き換えてください。
    ※CSS欄の#unit-●●●の●●●の部分はお使いの「HTMLユニットV17」のIDに書き換えてください。
  2. 記述が終わったら入力内容を保存します。

正しく記述できたか確認します

  1. HTML、CSSの記述が反映されました。
    適宜、プレビューページ等で表示をご確認ください。

※設定を保存しても何も反映されない場合は、ブラウザを再読み込みしてください。再読み込み後もグラデーションが動かない場合は、記述が間違っている可能性があります。記述内容に問題が無いかご確認ください。

その他のTips

ページトップ