このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。

今回のデザイン道場は、画像をくり抜いた文字テキストを作成する方法をご紹介します。
背景画像を変更すると、色々なカラーやグラデーションのかかった文字を作成できます。






HTMLタグを挿入する

配置/画像/コメント設定のフッター上部自由記入欄に下記のHTMLタグをコピーして貼り付けてください。

<h2 class="bgclip">BACKGROUND CLIP</h2>

 
スタイルシートを編集する

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は最下部にお願いします。

文字サイズは例として入れているだけです。必要なければ削除してください。
背景画像は変更してください。


h2.bgclip {
font-size: 80px;
background: blue url(https://cafe-responsive.ocnk.net/data/cafe-responsive/image/4774525_m.jpg);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

 
なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php

Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.