賢威７簡単呼び出し装飾タグその２

文字の装飾と画像の装飾

文字の装飾

<p class="navy">前回に引き続き</p>

<p class="aqua">コピペで使える</p>

<p class="red">賢威７の簡単</p>

<p class="orange">呼び出し装飾タグを</p>

<p class="pink">集めてみました。</p>

<p class="purple">ちなみに</p>

<p class="green">コピペで上手く表記できない場合は</p>

<p class="blue">半角英数字での記述に</p>

<p class="yellow">なっているか確認して</p>

<p class="olive">ください。※修正済みです。</p>

<p class="lime">たまになぜか</p>

<p class="black">全角表記になる場合が</p>

<p class="gray">あるのです、なぜか。※修正済みです。</p>

<p class="white">ところで</p>

<p class="brown">文字色を変えることって</p>

<span class="box-orange">それほど多くはないし</span>

<span class="box-pink">こんなにたくさんの色が</span>

<span class="box-yellow">本当に必要なんだろうか</span>

<span class="box-lime">なんて考えていましたが</span>

<span class="box-gray">企画ブログでは</span>

<em>びっくりするくらい</em>

<strong>使えたんです！！</strong>

<p class="big">文章を書くとか</p>

<p class="big2">コラムを読んでいただくとか</p>

<p class="big3">そういった使い方のときには</p>

<small>あまり必要ありませんが</small>

<span class="dot">資</span><span class="dot">料</span><span class="dot">等</span>

<s>やすさを重視する場面では</s>

<abbr title="HyperText Markup Language">とても便利でした。</abbr>

画像の装飾

<figure class="al-c">
<img class="shadow" src="画像のURL" alt="画像の説明" width="200" height="200">
<figcaption class="al-c">ちなみにpとspanという</figcaption>
</figure>

<figure class="al-l">
<img class="shadow02" src="画像のURL" alt="画像の説明" width="200" height="200">
<figcaption class="al-l">二種類のタグが出てきますが</figcaption>
</figure>

<figure class="al-r">
<img class="outline" src="画像のURL" alt="画像の説明" width="200" height="200">
<figcaption class="al-r">簡単に言うと</figcaption>
</figure>

<figure class="al-c">
<img class="rc12" src="画像のURL" alt="画像の説明" width="200" height="200">
<figcaption class="al-c">pが段落全体のスタイルを</figcaption>
</figure>

<figure class="al-c">
<img class="circle" src="画像のURL" alt="画像の説明" width="200" height="200">
<figcaption class="al-c">spanがその部分だけスタイルを</figcaption>
</figure>

<figure class="al-c">
<img class="frame" src="画像のURL" alt="画像の説明" width="200" height="200">
<figcaption class="al-c">指定する記号です。</figcaption>
</figure>

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

<div class="related-articles related-articles-thumbs02">
<ul>
<li>
<div class="related-thumb">
<a href="#"><img src="画像のURL" alt="画像の説明" width="220" height="160"></a>
</div>
<p><a href="リンク先URL">この装飾タグは重宝しました。表示画像がサムネイルというのもおしゃれ感に一役買って、ぴったりはまった感じです。</a></p>
</li>
<li>
<div class="related-thumb">
<a href="リンク先URL"><img src="画像のURL" alt="画像の説明" width="220" height="160"></a>
</div>
<p><a href="#">リンクを外せば画像付きの商品説明にも使えます。
ちなみにリンクを外すには<a></a>これらを消せばOKです。
こちらはリンクありバージョンです。</a></p>
</li>
<li>
<div class="related-thumb">
<a href="リンク先URL"><img src="画像のURL" alt="画像の説明" width="220" height="160"></a>
</div>
<p><a href="リンク先URL">次回は行間等についてまとめる予定です。</a></p>
</li>
</ul>
</div>