注意書き用の小文字
※これは注意書きに用いる小さい文字と段落です。
<p class="note"><small>※これは注意書きに用いる小さい文字と段落です。</small></p>
文章の前にアイコンを置く
表記 | タグ |
ブログでhtmlを |
|
そのまま |
|
表示する |
|
ためには |
|
タグの |
|
始まりを |
|
表す |
|
「<」を |
|
<に変えて |
|
記述します |
|
ちなみに |
|
<を |
|
そのまま |
|
表示する |
|
ためには |
|
&lt;と |
|
記述します |
|
ちなみにちなみに |
|
&lt;と表示 |
|
させるための記号は |
|
&amp;lt;です |
|
|
|
|
|
|
フローチャートを表示させる
-
賢威のサポートサイトに
ちゃんとヘルプが載っていますが
-
毎回移動を繰り返すのが
ちょっと面倒で
-
覚書として載せました
<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>
賢威はワードプレスやサイトのテンプレートです。
菜月美さん、こんばんは!
お気に入りに登録させて頂きました~
先日、賢威7に変更したので、
私にとってとても助かるエントリーです(笑)
こういうショートコードって便利ですよね(*´ω`*)
応援していきます!
秋山さん、こんばんは。
個人的な備忘録でしたがお役に立てたなら何よりです。
まだまだCSSにはいろんなコードが隠れていそうなので
いろいろと探してみますね。
コメント&応援ありがとうございました。