• 文字サイズ
  • 文字サイズ[小]
  • 文字サイズ[中]
  • 文字サイズ[大]

リストパーツ

リストパーツ -- 矢印マーカーリスト(2)--

リストのマーカーを指定することができます。

テキスト入力フォームに入力する際、下記記入例のように、テキスト内の装飾したい部分の前後を指定のタグではさむことで、リストのマーカーを指定することができます。

使い方

■原文

coreblobook(コアブロブック)の特徴
簡単に使用することができる。
プラグインを用意する必要がない。
外部サイトとの連携が可能。


■記入例 ---- ↓このように入力してください。

<strong>coreblo-book(コアブロブック)の特徴</strong>
<ul class="ar02_gr01 mgn10">
<li>簡単に使用することができる。</li>
<li>プラグインを用意する必要がない。</li>
<li>外部サイトとの連携が可能。</li>
</ul>

「mgtb10」は「対象のマージン(外余白)を上下10pixelあける」という追加指定です。 [マージンの指定]へ


■結果 ---- ↓このように表示されます。
coreblo-book(コアブロブック)の特徴
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

装飾パターンとタグ記述

■グレー(1) 表記:<ul class="ar02_gl01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■グレー(2) 表記:<ul class="ar02_gl02 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■ブラック 表記:<ul class="ar02_bk mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■オレンジ(1) 表記:<ul class="ar02_or01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■オレンジ(2) 表記:<ul class="ar02_or02 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■レッド(1) 表記:<ul class="ar02_or01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■パープル(1) 表記:<ul class="ar02_pp01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■ブルー(1) 表記:<ul class="ar02_bl01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■ブルー(2) 表記:<ul class="ar02_bl02 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■グリーン(1) 表記:<ul class="ar02_gr01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■グリーン(2) 表記:<ul class="ar02_gr02 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■カーキ(1) 表記:<ul class="ar02_kh01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■えんじ(1) 表記:<ul class="ar02_en01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■ブルーグレイ(1) 表記:<ul class="ar02_bg01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■ブルーグレイ(2) 表記:<ul class="ar02_bg02 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

■サーモン(1) 表記:<ul class="ar02_sm01 mgn10"><li>内容~</li></ul>
  • 簡単に使用することができる。
  • プラグインを用意する必要がない。
  • 外部サイトとの連携が可能。

このパーツを元にオリジナルパーツ作成する

このパーツのCSS記述をユーザーフリーエリアCSSにコピーして内容を一部変更することで、このバリエーション内に無いオリジナルパーツを作成することができます。

ユーザーフリーエリアCSSの記入方法
デザイン管理→詳細CSS設定→ユーザーフリーエリア編集をクリックすると、入力フォームのポップアップ画面が開きますので、以下の記述を貼り付けて指定部分をお好みの値に変更してください。

※クラス名(パーツの名前)に関して。
必ずクラス名(パーツの名前)を変更してください。また、名前の先頭に「u」などを付加して、既存のクラス名との重複を回避してください。クラス名が重複すると思わぬ結果になる恐れがあります。

このパーツのCSSサンプル

ul.パーツ名 li {
padding: 0px 0px 0px 文字開始位置px;
background: URL(../../images/フォルダ名/画像名) 0px マーカーの上下位置px no-repeat;
}

赤文字の部分が変更対象箇所です。
list page page top