注意書き用の小文字

※これは注意書きに用いる小さい文字と段落です。

<p class=”note”><small>※これは注意書きに用いる小さい文字と段落です。</small></p>


文章の前にアイコンを置く

表記 タグ

ブログでhtmlを

<p class=”icon-point”>ブログでhtmlを</p>

そのまま

<p class=”icon-caution”>そのまま</p>

表示する

<p class=”icon-new”>表示する</p>

ためには

<p class=”icon-wakaba”>ためには</p>

タグの

<p class=”icon-blank”>タグの</p>

始まりを

<p class=”icon-zip”>始まりを</p>

表す

<p class=”icon-mail”>表す</p>

「<」を

<p class=”icon-cart”>「<」を</p>
<p class=”icon-search”>&lt;に変えて</p>

記述します

<p class=”icon-home”>記述します</p>

ちなみに

<p class=”icon-arrow-t”>ちなみに</p>

&lt;を

<p class=”icon-arrow-r”>&lt;を</p>

そのまま

<p class=”icon-arrow-b”>そのまま</p>

表示する

<p class=”icon-arrow-l”>表示する</p>

ためには

<p class=”icon-dl”>ためには</p>

&amp;lt;と

<p class=”icon-pdf”>&amp;lt;と</p>

記述します

<p class=”icon-folder”>記述します</p>

ちなみにちなみに

<p class=”icon-time”>ちなみにちなみに</p>

&amp;lt;と表示

<p class=”icon-calendar”>&amp;lt;表示と</p>

させるための記号は

<p class=”icon-building”>させるための記号は</p>

&amp;amp;lt;です

<p class=”icon-map”>&amp;amp;lt;です</p>
  • amp;を
<ul class=”check-list”><li>amp;を</li></ul>
  • 増やせば
<ul class=”check-list-l”><li>増やせば</li></ul>
<div class=”al-c”>
<a href=”#” class=”btn btn-form01″><span>いいんです</span></a></div>


フローチャートを表示させる

  1. 賢威のサポートサイトに

    ちゃんとヘルプが載っていますが

  2. 毎回移動を繰り返すのが

    ちょっと面倒で

  3. 覚書として載せました

<ol class=”flow-chart”>
<li>
<div class=”process-box rc12″>
<p class=”f12em b m0-b”>賢威のサポートサイトに</p>
<p class=”m0-b”>ちゃんとヘルプが載っていますが</p>
</div>
</li>
<li>
<div class=”process-box rc12″>
<p class=”f12em b m0-b”>毎回移動を繰り返すのが</p>
<p class=”m0-b”>ちょっと面倒で</p>
</div>
</li>
<li>
<div class=”process-box rc12 end”>
<p class=”f12em b m0-b”>覚書として載せました</p>
</div>
</li>
</ol>


画像とテキストを組み合わせる

<div class=”col-wrap col3-wrap col-onimage”>

<div class=”col m20-b border”>
<a href=”リンク先URL”>
<img class=”w100″ src=”画像のURL” alt=”画像の説明” width=”242″ height=”176″>
</a>
<p class=”text-onimage”><a href=”リンク先URL”>テキスト</a></p>
</div>

<div class=”col m20-b border”>
<a href=”リンク先URL”>
<img class=”w100″ src=”画像のURL” alt=”画像の説明” width=”242″ height=”176″>
</a>
<p class=”text-onimage”><a href=”リンク先URL”>テキスト</a></p>
</div>

<div class=”col m20-b border”>
<a href=”リンク先URL”>
<img class=”w100″ src=”画像のURL” alt=”画像の説明” width=”242″ height=”176″>
</a>
<p class=”text-onimage”><a href=”リンク先URL”>テキスト</a></p>
</div>

</div>

賢威はワードプレスやサイトのテンプレートです。