文字の装飾と画像の装飾

文字の装飾

表記 タグ

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

コピペで使える

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

賢威7の簡単

<p class="red">賢威7の簡単</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>


画像の装飾

インターネット
ちなみにpとspanという

<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>
インターネット
pが段落全体のスタイルを

<figure class="al-c">
<img class="rc12" src="画像のURL" alt="画像の説明" width="200" height="200">
<figcaption class="al-c">pが段落全体のスタイルを</figcaption>
</figure>
インターネット
spanがその部分だけスタイルを

<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>

※クラス指定の部分(al-c)のcは中央配置となります。
 左に配置したい場合は al-l、右に配置したい場合は al-r に変えてください。


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

<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>

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