指定した文字範囲の先頭にアイコンをつけることができます。
テキスト入力フォームに入力する際、下記記入例のように、テキスト内の装飾したい部分の前後を指定のタグではさむことで、先頭にアイコンをつけることができます。
組み合わせるタグは限定されていませんので、既存の様々なタグ内に付加して使用することが可能です。
■原文
coreblobook(コアブロブック)の特徴
■記入例 ---- ↓このように入力してください。
<span class="ic02_gl02">coreblobook(コアブロブック)の特徴</span>
■結果 ---- ↓このように表示されます。
coreblobook(コアブロブック)の特徴
リンクに使用する
「coreblo-book」は「ページをめくりながら読む」という本の持つインターフェースを採用し、画像を登録するという簡単な操作だけでデジタルドキュメントを作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。
詳しくはこちらへ
「coreblo-book」は「ページをめくりながら読む」という本の持つインターフェースを採用し、画像を登録するという簡単な操作だけでデジタルドキュメントを作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。<br>
<a href="#" class="ic02_bl01">詳しくはこちらへ</a>
リンクタグ＜a＞にクラスをつけているところがポイントです。
タイトル風に使用する
coreblobook(コアブロブック)の特徴
「coreblo-book」は「ページをめくりながら読む」という本の持つインターフェースを採用し、画像を登録するという簡単な操作だけでデジタルドキュメントを作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。既存の印刷物をスキャニングしたデータやDTPデータを元に簡単に電子カタログを制作する事ができます。
<strong class="ic02_pp01">coreblobook(コアブロブック)の特徴</strong><br>
「coreblo-book」は「ページをめくりながら読む」という本の持つインターフェースを採用し、画像を登録するという簡単な操作だけでデジタルドキュメントを 作成できてしまう、WEBサーバー上で動作するWEBアプリケーションソフトウェアです。既存の印刷物をスキャニングしたデータやDTPデータを元に簡単に電子カタログを制作する事ができます。
文字強調タグ＜strong＞にクラスをつけているところがポイントです。
他にも、ブロックタグ＜p＞＜div＞、見出しタグ＜h3＞＜h4＞＜h5＞などにも使用することができます。
■グレー（1） 表記：<span等のタグ class="ic02_gl01">内容～</span等のタグ>
簡単に使用することができる。
■グレー（2） 表記：<span等のタグ class="ic02_gl02">内容～</span等のタグ>
簡単に使用することができる。
■ブラック 表記：<span等のタグ class="ic02_bk">内容～</span等のタグ>
簡単に使用することができる。
■オレンジ(1) 表記：<span等のタグ class="ic02_or01">内容～</span等のタグ>
簡単に使用することができる。
■オレンジ(2) 表記：<span等のタグ class="ic02_or02">内容～</span等のタグ>
簡単に使用することができる。
■レッド(1) 表記：<span等のタグ class="ic02_or01">内容～</span等のタグ>
簡単に使用することができる。
■パープル(1) 表記：<span等のタグ class="ic02_pp01">内容～</span等のタグ>
簡単に使用することができる。
■ブルー(1) 表記：<span等のタグ class="ic02_bl01">内容～</span等のタグ>
簡単に使用することができる。
■ブルー(2) 表記：<span等のタグ class="ic02_bl02">内容～</span等のタグ>
簡単に使用することができる。
■グリーン(1) 表記：<span等のタグ class="ic02_gr01">内容～</span等のタグ>
簡単に使用することができる。
■グリーン(2) 表記：<span等のタグ class="ic02_gr02">内容～</span等のタグ>
簡単に使用することができる。
■カーキ(1) 表記：<span等のタグ class="ic02_kh01">内容～</span等のタグ>
簡単に使用することができる。
■えんじ(1) 表記：<span等のタグ class="ic02_en01">内容～</span等のタグ>
簡単に使用することができる。
■ブルーグレイ(1) 表記：<span等のタグ class="ic02_bg01">内容～</span等のタグ>
簡単に使用することができる。
■ブルーグレイ(2) 表記：<span等のタグ class="ic02_bg02">内容～</span等のタグ>
簡単に使用することができる。
■サーモン(1) 表記：<span等のタグ class="ic02_sm01">内容～</span等のタグ>
簡単に使用することができる。
このパーツのCSS記述をユーザーフリーエリアCSSにコピーして内容を一部変更することで、このバリエーション内に無いオリジナルパーツを作成することができます。
ユーザーフリーエリアCSSの記入方法
デザイン管理→詳細CSS設定→ユーザーフリーエリア編集をクリックすると、入力フォームのポップアップ画面が開きますので、以下の記述を貼り付けて指定部分をお好みの値に変更してください。
※クラス名（パーツの名前）に関して。
必ずクラス名（パーツの名前）を変更してください。また、名前の先頭に「u」などを付加して、既存のクラス名との重複を回避してください。クラス名が重複すると思わぬ結果になる恐れがあります。
このパーツのCSSサンプル
.パーツ名 {
padding: 0px 0px 0px 文字開始位置px;
background: URL(../../images/フォルダ名/画像名) left center no-repeat;
}
赤文字の部分が変更対象箇所です。